Commit e9153812 authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

update menu navbar

parent e306a483
......@@ -25,6 +25,7 @@ import CssBaseline from "@mui/material/CssBaseline";
import Drawer from "@mui/material/Drawer";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import ListItemText from "@mui/material/ListItemText";
import ShoppingCart from "@mui/icons-material/ShoppingCart";
const Search = styled("div")(({ theme }) => ({
position: "relative",
......@@ -82,19 +83,7 @@ const drawer = (
</ListItem>
))}
</List>
<Divider />
<List>
{["All mail", "Trash", "Spam"].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
))}
</List>
{/* <Divider /> */}
</div>
);
......@@ -153,6 +142,38 @@ function Navbar(props) {
</Menu>
);
const MenuList = [
{
id: 0,
label: "ตระกร้า",
link: '/cart',
element: (
<IconButton size="large" aria-label="show 4 new mails" color="inherit">
<Badge badgeContent={4} color="error">
<ShoppingCart />
</Badge>
</IconButton>
),
},
{
id: 1,
label: "โปรไฟล์",
link: "/profile",
element: (
<IconButton
size="large"
edge="end"
aria-label="account of current user"
aria-controls={menuId}
aria-haspopup="true"
color="inherit"
>
<AccountCircle />
</IconButton>
),
},
];
const mobileMenuId = "primary-search-account-menu-mobile";
const renderMobileMenu = (
<Menu
......@@ -170,38 +191,14 @@ function Navbar(props) {
open={isMobileMenuOpen}
onClose={handleMobileMenuClose}
>
{MenuList.map((menu) => (
<>
<MenuItem>
<IconButton size="large" aria-label="show 4 new mails" color="inherit">
<Badge badgeContent={4} color="error">
<MailIcon />
</Badge>
</IconButton>
<p>Messages</p>
</MenuItem>
<MenuItem>
<IconButton
size="large"
aria-label="show 17 new notifications"
color="inherit"
>
<Badge badgeContent={17} color="error">
<NotificationsIcon />
</Badge>
</IconButton>
<p>Notifications</p>
</MenuItem>
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit"
>
<AccountCircle />
</IconButton>
<p>Profile</p>
{menu.element}
<p>{menu.label}</p>
</MenuItem>
</>
))}
</Menu>
);
......@@ -243,35 +240,7 @@ function Navbar(props) {
</Search>
<Box sx={{ flexGrow: 1 }} />
<Box sx={{ display: { xs: "none", md: "flex" } }}>
<IconButton
size="large"
aria-label="show 4 new mails"
color="inherit"
>
<Badge badgeContent={4} color="error">
<MailIcon />
</Badge>
</IconButton>
<IconButton
size="large"
aria-label="show 17 new notifications"
color="inherit"
>
<Badge badgeContent={17} color="error">
<NotificationsIcon />
</Badge>
</IconButton>
<IconButton
size="large"
edge="end"
aria-label="account of current user"
aria-controls={menuId}
aria-haspopup="true"
onClick={handleProfileMenuOpen}
color="inherit"
>
<AccountCircle />
</IconButton>
{MenuList.map((menu) => menu.element)}
</Box>
<Box sx={{ display: { xs: "flex", md: "none" } }}>
<IconButton
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment