Login / Register / SideMenu / Fixes

src/components/UserMenu.js

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import Collapse from "@material-ui/core/Collapse";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListSubheader from "@material-ui/core/ListSubheader";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import ExpandLess from "@material-ui/icons/ExpandLess";
+import ExpandMore from "@material-ui/icons/ExpandMore";
+import FastfoodIcon from "@material-ui/icons/Fastfood";
+import AddIcon from "@material-ui/icons/Add";
+import SettingsIcon from "@material-ui/icons/Settings";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: "100%",
+  },
+  nested: {
+    paddingLeft: theme.spacing(4),
+  },
+  subheader: {
+    color: "#767676",
+    fontSize: "0.8rem",
+    fontWeight: "400",
+    paddingLeft: 0,
+  },
+}));
+
+export default function UserMenu(props) {
+  const [open, setOpen] = useState(false);
+  const classes = useStyles();
+  const handleClick = () => {
+    setOpen(!open);
+  };
+
+  return (
+    <List
+      className={classes.root}
+      subheader={
+        <ListSubheader className={classes.subheader}>
+          Menu użytkownika
+        </ListSubheader>
+      }
+    >
+      <ListItem button disableGutters>
+        <ListItemIcon>
+          <SettingsIcon />
+        </ListItemIcon>
+        <ListItemText primary="Moje konto" />
+      </ListItem>
+      <ListItem button onClick={handleClick} disableGutters>
+        <ListItemIcon>
+          <FastfoodIcon />
+        </ListItemIcon>
+        <ListItemText primary="Moje lokale" />
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <List component="div" disablePadding>
+          <ListItem>
+            <ListItemIcon>
+              <AddIcon />
+            </ListItemIcon>
+            <ListItemText primary="Dodaj lokal" />
+          </ListItem>
+        </List>
+      </Collapse>
+    </List>
+  );
+}