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"; ...@@ -25,6 +25,7 @@ import CssBaseline from "@mui/material/CssBaseline";
import Drawer from "@mui/material/Drawer"; import Drawer from "@mui/material/Drawer";
import InboxIcon from "@mui/icons-material/MoveToInbox"; import InboxIcon from "@mui/icons-material/MoveToInbox";
import ListItemText from "@mui/material/ListItemText"; import ListItemText from "@mui/material/ListItemText";
import ShoppingCart from "@mui/icons-material/ShoppingCart";
const Search = styled("div")(({ theme }) => ({ const Search = styled("div")(({ theme }) => ({
position: "relative", position: "relative",
...@@ -82,19 +83,7 @@ const drawer = ( ...@@ -82,19 +83,7 @@ const drawer = (
</ListItem> </ListItem>
))} ))}
</List> </List>
<Divider /> {/* <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>
</div> </div>
); );
...@@ -153,6 +142,38 @@ function Navbar(props) { ...@@ -153,6 +142,38 @@ function Navbar(props) {
</Menu> </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 mobileMenuId = "primary-search-account-menu-mobile";
const renderMobileMenu = ( const renderMobileMenu = (
<Menu <Menu
...@@ -170,38 +191,14 @@ function Navbar(props) { ...@@ -170,38 +191,14 @@ function Navbar(props) {
open={isMobileMenuOpen} open={isMobileMenuOpen}
onClose={handleMobileMenuClose} onClose={handleMobileMenuClose}
> >
<MenuItem> {MenuList.map((menu) => (
<IconButton size="large" aria-label="show 4 new mails" color="inherit"> <>
<Badge badgeContent={4} color="error"> <MenuItem>
<MailIcon /> {menu.element}
</Badge> <p>{menu.label}</p>
</IconButton> </MenuItem>
<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>
</MenuItem>
</Menu> </Menu>
); );
...@@ -243,35 +240,7 @@ function Navbar(props) { ...@@ -243,35 +240,7 @@ function Navbar(props) {
</Search> </Search>
<Box sx={{ flexGrow: 1 }} /> <Box sx={{ flexGrow: 1 }} />
<Box sx={{ display: { xs: "none", md: "flex" } }}> <Box sx={{ display: { xs: "none", md: "flex" } }}>
<IconButton {MenuList.map((menu) => menu.element)}
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>
</Box> </Box>
<Box sx={{ display: { xs: "flex", md: "none" } }}> <Box sx={{ display: { xs: "flex", md: "none" } }}>
<IconButton <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