import React, { useState, useMemo, useContext } from "react";
import {
AppBar,
Badge,
Box,
IconButton,
Toolbar,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
useMediaQuery,
SvgIcon,
Typography,
} from "@mui/material";
import { useTheme } from "@mui/system";
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";
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);
};
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(
() => (
Link 1
Link 2
Link 3
Toggle {theme.palette.mode} mode
{theme.palette.mode === "dark" ? (
) : (
)}
),
[handleToggleDrawer]
);
return (
{matches ? (
) : (
)}
Search
{matches ? (
) : (
DODAJ PROIZVOD
{
setPostsPopoverOpen(true);
setPostsAnchorEl(e.currentTarget);
}}
sx={{ ml: 4, mr: 2 }}
>
{
setMsgPopoverOpen(true);
setMsgAnchorEl(e.currentTarget);
}}
sx={{ mr: 2 }}
>
{
setUserPopoverOpen(true);
setUserAnchorEl(e.currentTarget);
}}
>
)}
{
setPostsPopoverOpen(false);
setPostsAnchorEl(null);
}}
content={Moje objave}
/>
{
setMsgPopoverOpen(false);
setMsgAnchorEl(null);
}}
content={Moje poruke}
/>
{
setUserPopoverOpen(false);
setUserAnchorEl(null);
}}
content={Moj profil}
/>
);
};
export default NavbarComponent;