Responsiveness

src/components/MUI/NavbarComponent.js

@@ -1,15 +1,10 @@
-import React, { useState, useMemo, useContext } from "react";
+import React, { useState, useMemo } from "react";
 import {
   AppBar,
   Badge,
   Box,
   IconButton,
   Toolbar,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
   useMediaQuery,
   SvgIcon,
   Typography,
@@ -19,10 +14,7 @@ import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
 import Autorenew from "@mui/icons-material/Autorenew";
 import MailIcon from "@mui/icons-material/Mail";
 import AccountCircle from "@mui/icons-material/AccountCircle";
-import Brightness4Icon from "@mui/icons-material/Brightness4";
-import Brightness7Icon from "@mui/icons-material/Brightness7";
 import Drawer from "./DrawerComponent";
-import { ColorModeContext } from "../../context/ColorModeContext";
 import { PrimaryButton } from "../Buttons/PrimaryButton/PrimaryButton";
 import { PRIMARY_YELLOW_COLOR } from "../../constants/stylesConstants";
 import PopoverComponent from "./PopoverComponent";
@@ -31,7 +23,6 @@ const NavbarComponent = () => {
   const [openDrawer, setOpenDrawer] = useState(false);
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("sm"));
-  const toggleColorMode = useContext(ColorModeContext);
 
   const handleToggleDrawer = () => {
     setOpenDrawer(!openDrawer);
@@ -48,31 +39,66 @@ const NavbarComponent = () => {
 
   const drawerContent = useMemo(
     () => (
-      <List>
-        <ListItemButton divider onClick={handleToggleDrawer}>
-          <ListItemIcon>
-            <ListItemText>Link 1</ListItemText>
-          </ListItemIcon>
-        </ListItemButton>
-        <ListItem divider onClick={handleToggleDrawer}>
-          <ListItemIcon>
-            <ListItemText>Link 2</ListItemText>
-          </ListItemIcon>
-        </ListItem>
-        <ListItem divider onClick={handleToggleDrawer}>
-          <ListItemText>Link 3</ListItemText>
-        </ListItem>
-        <ListItem divider>
-          <IconButton onClick={toggleColorMode}>
-            <ListItemText>Toggle {theme.palette.mode} mode</ListItemText>
-            {theme.palette.mode === "dark" ? (
-              <Brightness7Icon />
-            ) : (
-              <Brightness4Icon />
-            )}
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          mt: 4
+        }}
+      >
+        <PrimaryButton
+          type="submit"
+          variant="contained"
+          height="36px"
+          sx={{ mt: 3, mb: 3 }}
+          fullWidth
+          buttonColor={PRIMARY_YELLOW_COLOR}
+          textColor="black"
+        >
+          DODAJ PROIZVOD
+        </PrimaryButton>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "start",
+            mt: 3,
+          }}
+        >
+          <IconButton
+            onClick={(e) => {
+              setPostsPopoverOpen(true);
+              setPostsAnchorEl(e.currentTarget);
+            }}
+          >
+            <Autorenew />
+            <Typography sx={{ ml: 2 }}>Moje objave</Typography>
+          </IconButton>
+          <IconButton
+            onClick={(e) => {
+              setMsgPopoverOpen(true);
+              setMsgAnchorEl(e.currentTarget);
+            }}
+          >
+            <Badge badgeContent={3} color="primary">
+              <MailIcon color="action" />
+            </Badge>
+            <Typography sx={{ ml: 2 }}>Moje poruke</Typography>
+          </IconButton>
+          <IconButton
+            onClick={(e) => {
+              setUserPopoverOpen(true);
+              setUserAnchorEl(e.currentTarget);
+            }}
+          >
+            <AccountCircle />
+            <Typography sx={{ ml: 2 }}>Moje profil</Typography>
           </IconButton>
-        </ListItem>
-      </List>
+        </Box>
+      </Box>
     ),
     [handleToggleDrawer]
   );
@@ -92,14 +118,7 @@ const NavbarComponent = () => {
             width: "100%",
           }}
         >
-          {matches ? (
-            <Drawer
-              open={openDrawer}
-              toggleOpen={handleToggleDrawer}
-              content={drawerContent}
-            />
-          ) : (
-            <Box
+                      <Box
               sx={{
                 display: "flex",
                 justifyContent: "center",
@@ -152,6 +171,15 @@ const NavbarComponent = () => {
                 </svg>
               </SvgIcon>
             </Box>
+          {matches ? (
+            <Drawer
+              open={openDrawer}
+              toggleOpen={handleToggleDrawer}
+              content={drawerContent}
+            />
+          ) : (
+            <>
+            </>
           )}
           <Box>
             <p>Search</p>