|
|
|
@ -1,12 +1,12 @@ |
|
|
|
"use client"; // This ensures the file is a client component
|
|
|
|
|
|
|
|
import * as React from "react"; |
|
|
|
import AppBar from "@mui/material/AppBar"; |
|
|
|
import AppBar, { AppBarProps } from "@mui/material/AppBar"; |
|
|
|
import Box from "@mui/material/Box"; |
|
|
|
import CssBaseline from "@mui/material/CssBaseline"; |
|
|
|
import Drawer from "@mui/material/Drawer"; |
|
|
|
import IconButton from "@mui/material/IconButton"; |
|
|
|
import InboxIcon from "@mui/icons-material/MoveToInbox"; |
|
|
|
import Avatar from "@mui/material/Avatar"; |
|
|
|
import List from "@mui/material/List"; |
|
|
|
import ListItem from "@mui/material/ListItem"; |
|
|
|
import ListItemButton from "@mui/material/ListItemButton"; |
|
|
|
@ -20,6 +20,7 @@ import { useState } from "react"; |
|
|
|
import { UTILITY_CONSTANT } from "@/utilities/utilityConstant"; |
|
|
|
import styles from "./DashboardWrapper.module.scss"; |
|
|
|
import styled from "@emotion/styled"; |
|
|
|
import { BUILDING, GEAR } from "@/utilities/svgConstant"; |
|
|
|
|
|
|
|
const drawerWidth = 260; |
|
|
|
|
|
|
|
@ -32,10 +33,37 @@ const CssList = styled(List)({ |
|
|
|
"& .MuiListItemIcon-root": { |
|
|
|
minWidth: "34px", |
|
|
|
}, |
|
|
|
"&:hover": { |
|
|
|
backgroundColor: "var(--primary_light)", |
|
|
|
color: "var(--primary_Active_text)", |
|
|
|
|
|
|
|
"& .MuiListItemIcon-root": { |
|
|
|
color: "var(--primary_Active_text)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
"&.Mui-selected": { |
|
|
|
backgroundColor: "transparent", |
|
|
|
"& .MuiButtonBase-root": { |
|
|
|
backgroundColor: "var(--primary_light)", |
|
|
|
color: "var(--primary_Active_text)", |
|
|
|
"& .MuiListItemIcon-root": { |
|
|
|
color: "var(--primary_Active_text)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
const CssAppBar = styled(AppBar)<AppBarProps>({ |
|
|
|
boxShadow: "none", |
|
|
|
backgroundColor: "var(--bg_white)", |
|
|
|
color: "var(--primary_text_clr)", |
|
|
|
"& .MuiToolbar-root": { |
|
|
|
minHeight: "72px", |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
interface Props { |
|
|
|
window?: () => Window; |
|
|
|
children: React.ReactNode; |
|
|
|
@ -61,10 +89,11 @@ export default function DashboardWrapper(props: Props) { |
|
|
|
setMobileOpen(!mobileOpen); |
|
|
|
} |
|
|
|
}; |
|
|
|
const [activeIndex, setActiveIndex] = useState<number | null>(null); |
|
|
|
|
|
|
|
const drawer = ( |
|
|
|
<> |
|
|
|
<Toolbar> |
|
|
|
<Toolbar sx={{ minHeight: "72px !important" }}> |
|
|
|
<img |
|
|
|
src={UTILITY_CONSTANT.IMAGES.AUTH.HEADER_LOG} |
|
|
|
alt="Logo" |
|
|
|
@ -74,10 +103,15 @@ export default function DashboardWrapper(props: Props) { |
|
|
|
{/* <Divider /> */} |
|
|
|
<CssList sx={{ padding: "0", paddingInline: "18px" }}> |
|
|
|
{["Project Table"].map((text, index) => ( |
|
|
|
<ListItem key={text} disablePadding> |
|
|
|
<ListItem |
|
|
|
key={text} |
|
|
|
disablePadding |
|
|
|
selected={activeIndex === index} // Add this line to make the item "active"
|
|
|
|
onClick={() => setActiveIndex(index)} // Add this line to handle click events
|
|
|
|
> |
|
|
|
<ListItemButton> |
|
|
|
<ListItemIcon> |
|
|
|
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />} |
|
|
|
{index % 2 === 0 ? <BUILDING /> : <BUILDING />} |
|
|
|
</ListItemIcon> |
|
|
|
<ListItemText primary={text} /> |
|
|
|
</ListItemButton> |
|
|
|
@ -98,28 +132,56 @@ export default function DashboardWrapper(props: Props) { |
|
|
|
className={styles.dashboard_main} |
|
|
|
> |
|
|
|
<CssBaseline /> |
|
|
|
<AppBar |
|
|
|
<CssAppBar |
|
|
|
position="fixed" |
|
|
|
sx={{ |
|
|
|
width: { md: `calc(100% - ${drawerWidth}px)` }, |
|
|
|
ml: { md: `${drawerWidth}px` }, |
|
|
|
}} |
|
|
|
> |
|
|
|
<Toolbar> |
|
|
|
<IconButton |
|
|
|
color="inherit" |
|
|
|
aria-label="open drawer" |
|
|
|
edge="start" |
|
|
|
onClick={handleDrawerToggle} |
|
|
|
sx={{ mr: 2 }} |
|
|
|
<Toolbar sx={{ width: "100%", justifyContent: "space-between" }}> |
|
|
|
<Box display={"flex"} alignItems={"center"}> |
|
|
|
<IconButton |
|
|
|
color="inherit" |
|
|
|
aria-label="open drawer" |
|
|
|
edge="start" |
|
|
|
onClick={handleDrawerToggle} |
|
|
|
sx={{ mr: 2, display: { md: "none" } }} |
|
|
|
> |
|
|
|
<MenuIcon /> |
|
|
|
</IconButton> |
|
|
|
<Typography variant="h6" noWrap component="div"> |
|
|
|
Responsive drawer |
|
|
|
</Typography> |
|
|
|
</Box> |
|
|
|
<Box |
|
|
|
display={"flex"} |
|
|
|
alignItems={"center"} |
|
|
|
gap={1} |
|
|
|
sx={{ |
|
|
|
background: "var(--clr_gray_100)", |
|
|
|
padding: "8px", |
|
|
|
borderRadius: "30px", |
|
|
|
}} |
|
|
|
> |
|
|
|
<MenuIcon /> |
|
|
|
</IconButton> |
|
|
|
<Typography variant="h6" noWrap component="div"> |
|
|
|
Responsive drawer |
|
|
|
</Typography> |
|
|
|
<Avatar |
|
|
|
sx={{ |
|
|
|
width: 34, |
|
|
|
height: 34, |
|
|
|
cursor: "pointer", |
|
|
|
background: "var(--primary_light)", |
|
|
|
color: "var(--primary_Active_text)", |
|
|
|
fontSize: "0.8rem", |
|
|
|
}} |
|
|
|
alt="Remy Sharp" |
|
|
|
src="/static/images/avatar/1.jpg" |
|
|
|
/> |
|
|
|
<GEAR |
|
|
|
sx={{ color: "var(--primary_Active_text)", fontSize: "1.8rem" }} |
|
|
|
/> |
|
|
|
</Box> |
|
|
|
</Toolbar> |
|
|
|
</AppBar> |
|
|
|
</CssAppBar> |
|
|
|
|
|
|
|
<Box |
|
|
|
component="nav" |
|
|
|
|
