feat: create basic drawer

2 files changed, 124 insertions, 0 deletions

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;
+
diff --git a/src/components/Drawer/UserInfo.tsx b/src/components/Drawer/UserInfo.tsx
new file mode 100644
index 0000000..027f076
--- /dev/null
+++ b/src/components/Drawer/UserInfo.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { User } from 'which-types';
+
+import Avatar from '../Avatar/Avatar';
+
+interface PropTypes {
+  user: User;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(4, 10),
+    textAlign: 'center'
+  },
+  avatar: {
+    width: theme.spacing(14),
+    height: theme.spacing(14)
+  }
+}));
+
+
+const UserInfo: React.FC<PropTypes> = React.memo(({ user }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Avatar user={user} className={classes.avatar} />
+      <Typography variant="h5">
+        {user.username}
+      </Typography>
+    </div>
+  );
+});
+
+export default UserInfo;
+