From e8b66d8fcea497be8b1820cde8ec187383b70c60 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Wed, 12 Aug 2020 03:27:24 +0300
Subject: feat: create basic drawer

---
 src/components/Drawer/Drawer.tsx | 86 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 src/components/Drawer/Drawer.tsx

(limited to 'src/components/Drawer/Drawer.tsx')

diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
new file mode 100644
index 0000000..eded40c
--- /dev/null
+++ b/src/components/Drawer/Drawer.tsx
@@ -0,0 +1,86 @@
+import React, { useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  SwipeableDrawer,
+  List,
+  ListItem,
+  Typography,
+  Divider
+} from '@material-ui/core';
+import { ExitToApp as LogoutIcon, Info } from '@material-ui/icons';
+import { makeStyles } from '@material-ui/core/styles';
+
+import UserInfo from './UserInfo';
+import { useAuth } from '../../hooks/useAuth';
+
+interface PropTypes {
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+}
+
+const useStyles = makeStyles(theme => ({
+  item: {
+    padding: theme.spacing(2, 14, 2, 2)
+  },
+  icon: {
+    marginRight: theme.spacing(1)
+  }
+}));
+
+
+const Drawer: React.FC<PropTypes> = React.memo(({ isOpen, setIsOpen }) => {
+  const classes = useStyles();
+  const history = useHistory();
+  const { user, logout } = useAuth();
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleLogout = () => {
+    logout();
+    handleClose();
+  };
+
+  const handleAbout = () => {
+    history.push('/');
+    handleClose();
+  };
+
+  const iOS = useMemo(() => {
+    return /iPad|iPhone|iPod/.test(navigator.userAgent);
+  }, []);
+
+  return (
+    <SwipeableDrawer
+      anchor="left"
+      open={isOpen}
+      onOpen={handleOpen}
+      onClose={handleClose}
+      disableBackdropTransition={!iOS}
+      disableDiscovery={iOS}
+    >
+      {user && <UserInfo user={user} />}
+      <Divider />
+      <List>
+        {user && (
+          <ListItem button className={classes.item} onClick={handleLogout}>
+            <LogoutIcon className={classes.icon} />
+            <Typography>Logout</Typography>
+          </ListItem>
+        )}
+        <ListItem button className={classes.item} onClick={handleAbout}>
+          <Info className={classes.icon} />
+          <Typography>About</Typography>
+        </ListItem>
+      </List>
+    </SwipeableDrawer>
+  );
+});
+
+export default Drawer;
+
-- 
cgit v1.2.3