Navbar popovers

src/components/MUI/NavbarComponent.js

@@ -12,6 +12,7 @@ import {
   ListItemText,
   useMediaQuery,
   SvgIcon,
+  Typography,
 } from "@mui/material";
 import { useTheme } from "@mui/system";
 import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
@@ -24,6 +25,7 @@ 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";
 
 const NavbarComponent = () => {
   const [openDrawer, setOpenDrawer] = useState(false);
@@ -35,6 +37,15 @@ const NavbarComponent = () => {
     setOpenDrawer(!openDrawer);
   };
 
+  const [postsPopoverOpen, setPostsPopoverOpen] = useState(false);
+  const [postsAnchorEl, setPostsAnchorEl] = useState(null);
+
+  const [msgPopoverOpen, setMsgPopoverOpen] = useState(false);
+  const [msgAnchorEl, setMsgAnchorEl] = useState(null);
+
+  const [userPopoverOpen, setUserPopoverOpen] = useState(false);
+  const [userAnchorEl, setUserAnchorEl] = useState(null);
+
   const drawerContent = useMemo(
     () => (
       <List>
@@ -92,7 +103,7 @@ const NavbarComponent = () => {
               sx={{
                 display: "flex",
                 justifyContent: "center",
-                alignItems: "center"
+                alignItems: "center",
               }}
             >
               <SvgIcon sx={{ overflow: "visible", width: "81%", mb: 2.7 }}>
@@ -177,15 +188,32 @@ const NavbarComponent = () => {
                 >
                   DODAJ PROIZVOD
                 </PrimaryButton>
-                <IconButton sx={{ ml: 4, mr: 2 }}>
+                <IconButton
+                  onClick={(e) => {
+                    setPostsPopoverOpen(true);
+                    setPostsAnchorEl(e.currentTarget);
+                  }}
+                  sx={{ ml: 4, mr: 2 }}
+                >
                   <Autorenew />
                 </IconButton>
-                <IconButton sx={{ mr: 2 }}>
+                <IconButton
+                  onClick={(e) => {
+                    setMsgPopoverOpen(true);
+                    setMsgAnchorEl(e.currentTarget);
+                  }}
+                  sx={{ mr: 2 }}
+                >
                   <Badge badgeContent={3} color="primary">
                     <MailIcon color="action" />
                   </Badge>
                 </IconButton>
-                <IconButton>
+                <IconButton
+                  onClick={(e) => {
+                    setUserPopoverOpen(true);
+                    setUserAnchorEl(e.currentTarget);
+                  }}
+                >
                   <AccountCircle />
                 </IconButton>
               </Box>
@@ -193,6 +221,33 @@ const NavbarComponent = () => {
           </Box>
         </Box>
       </Toolbar>
+      <PopoverComponent
+        anchorEl={postsAnchorEl}
+        open={postsPopoverOpen}
+        onClose={() => {
+          setPostsPopoverOpen(false);
+          setPostsAnchorEl(null);
+        }}
+        content={<Typography sx={{ p: 2 }}>Moje objave</Typography>}
+      />
+      <PopoverComponent
+        anchorEl={msgAnchorEl}
+        open={msgPopoverOpen}
+        onClose={() => {
+          setMsgPopoverOpen(false);
+          setMsgAnchorEl(null);
+        }}
+        content={<Typography sx={{ p: 2 }}>Moje poruke</Typography>}
+      />
+      <PopoverComponent
+        anchorEl={userAnchorEl}
+        open={userPopoverOpen}
+        onClose={() => {
+          setUserPopoverOpen(false);
+          setUserAnchorEl(null);
+        }}
+        content={<Typography sx={{ p: 2 }}>Moj profil</Typography>}
+      />
     </AppBar>
   );
 };