Skip to content

Commit d74d237

Browse files
hiirrxnnhiirrxnn
committed
sidebar and header improvement
1 parent bad5ca3 commit d74d237

File tree

1 file changed

+117
-50
lines changed

1 file changed

+117
-50
lines changed

‎frontend/src/components/Layout.jsx‎

Lines changed: 117 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,16 @@ import {
1212
Toolbar,
1313
Typography,
1414
Tooltip,
15+
Badge,
16+
Chip,
1517
} from "@mui/material";
1618
import MenuIcon from "@mui/icons-material/Menu";
1719
import CloudIcon from "@mui/icons-material/Cloud";
1820
import HomeIcon from "@mui/icons-material/Home";
1921
import AssignmentIcon from "@mui/icons-material/Assignment";
2022
import WorkspacesIcon from "@mui/icons-material/Workspaces";
2123

24+
2225
// use relative path to load Logo
2326
import volcanoLogo from "../assets/volcano-icon-color.svg";
2427

@@ -50,6 +53,7 @@ const Layout = () => {
5053
sx={{
5154
zIndex: (theme) => theme.zIndex.drawer + 1,
5255
bgcolor: headerGrey,
56+
boxShadow: "0 2px 8px rgba(0,0,0,0.1)", // Enhanced shadow
5357
}}
5458
>
5559
<Toolbar>
@@ -62,17 +66,31 @@ const Layout = () => {
6266
>
6367
<MenuIcon />
6468
</IconButton>
65-
<Typography
66-
variant="h6"
67-
noWrap
68-
component="div"
69-
sx={{
70-
color: "#ffffff",
71-
fontWeight: 500,
72-
}}
73-
>
74-
Volcano Dashboard
75-
</Typography>
69+
70+
{/* Enhanced Logo Section */}
71+
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
72+
<img
73+
src={volcanoLogo}
74+
alt="Volcano Logo"
75+
style={{
76+
width: "32px",
77+
height: "32px",
78+
borderRadius: "6px"
79+
}}
80+
/>
81+
<Typography
82+
variant="h6"
83+
noWrap
84+
component="div"
85+
sx={{
86+
color: "#ffffff",
87+
fontWeight: 600,
88+
letterSpacing: "0.5px"
89+
}}
90+
>
91+
Volcano Dashboard
92+
</Typography>
93+
</Box>
7694
</Toolbar>
7795
</AppBar>
7896

@@ -85,51 +103,95 @@ const Layout = () => {
85103
[`& .MuiDrawer-paper`]: {
86104
width: open ? drawerWidth : 60,
87105
boxSizing: "border-box",
88-
backgroundColor: "#f5f5f5",
106+
backgroundColor: "#fafafa", // Slightly lighter background
89107
transition: "width 0.2s",
90108
overflowX: "hidden",
91109
display: "flex",
92110
flexDirection: "column",
111+
borderRight: "1px solid rgba(0,0,0,0.08)", // Subtle border
112+
boxShadow: "2px 0 8px rgba(0,0,0,0.05)", // Subtle shadow
93113
},
94114
}}
95115
>
96116
<Toolbar />
97-
<Box sx={{ overflow: "hidden auto", flexGrow: 1 }}>
117+
118+
{/* Enhanced Navigation Header */}
119+
{open && (
120+
<Box sx={{ px: 2, pt: 2, pb: 1 }}>
121+
<Typography
122+
variant="overline"
123+
sx={{
124+
color: "text.secondary",
125+
fontWeight: 600,
126+
letterSpacing: "1px",
127+
fontSize: "0.7rem"
128+
}}
129+
>
130+
NAVIGATION
131+
</Typography>
132+
</Box>
133+
)}
134+
135+
<Box sx={{ overflow: "hidden auto", flexGrow: 1, px: 1 }}>
98136
<List>
99137
{menuItems.map((item) => {
138+
const isActive = location.pathname === item.path;
139+
100140
const listItem = (
101141
<ListItem
102142
key={item.text}
103143
component={Link}
104144
to={item.path}
105-
className={
106-
location.pathname === item.path
107-
? "active"
108-
: ""
109-
}
110145
sx={{
111-
"&.active": {
112-
bgcolor: "rgba(0, 0, 0, 0.08)",
113-
"& .MuiListItemIcon-root": {
114-
color: volcanoOrange,
115-
},
116-
"& .MuiListItemText-primary": {
117-
color: volcanoOrange,
118-
fontWeight: 500,
119-
},
120-
},
146+
color: "inherit",
147+
textDecoration: "none",
148+
borderRadius: 2,
149+
mb: 0.5,
150+
position: "relative",
151+
minHeight: 48,
152+
justifyContent: open ? "flex-start" : "center",
153+
px: open ? 2 : 1, // Better padding for centering
154+
bgcolor: isActive ? `${volcanoOrange}15` : "transparent",
155+
border: isActive ? `1px solid ${volcanoOrange}30` : "1px solid transparent",
121156
"&:hover": {
122-
backgroundColor:
123-
"rgba(0, 0, 0, 0.1)",
157+
backgroundColor: isActive ? `${volcanoOrange}20` : "rgba(0, 0, 0, 0.04)",
124158
},
159+
"& .MuiListItemIcon-root": {
160+
color: isActive ? volcanoOrange : "text.secondary",
161+
minWidth: 40,
162+
justifyContent: "center",
163+
mr: open ? 0 : 0 // Center icons when collapsed
164+
},
165+
"& .MuiListItemText-primary": {
166+
fontWeight: isActive ? 600 : 500,
167+
color: isActive ? volcanoOrange : "text.primary",
168+
fontSize: "0.9rem"
169+
}
125170
}}
126171
>
127172
<ListItemIcon>{item.icon}</ListItemIcon>
128173
{open && (
129174
<ListItemText primary={item.text} />
130175
)}
176+
177+
{/* Active indicator line */}
178+
{isActive && (
179+
<Box
180+
sx={{
181+
position: "absolute",
182+
left: 0,
183+
top: "50%",
184+
transform: "translateY(-50%)",
185+
width: 3,
186+
height: 24,
187+
bgcolor: volcanoOrange,
188+
borderRadius: "0 2px 2px 0"
189+
}}
190+
/>
191+
)}
131192
</ListItem>
132193
);
194+
133195
return !open ? (
134196
<Tooltip
135197
key={item.text}
@@ -146,47 +208,52 @@ const Layout = () => {
146208
})}
147209
</List>
148210
</Box>
149-
{/* Logo and text part */}
211+
212+
{/* Enhanced Logo section */}
150213
<Box
151214
sx={{
152-
p: 1,
215+
p: open ? 2 : 1,
153216
display: "flex",
154217
flexDirection: "column",
155218
justifyContent: "center",
156219
alignItems: "center",
157220
mt: "auto",
158221
mb: 1,
159-
// borderTop: "1px solid rgba(0, 0, 0, 0.12)",
222+
borderTop: "1px solid rgba(0, 0, 0, 0.08)", // Subtle divider
160223
}}
161224
>
162225
<img
163226
src={volcanoLogo}
164227
alt="Volcano Logo"
165228
style={{
166-
maxWidth: open ? "150px" : "60px",
229+
maxWidth: open ? "120px" : "40px", // Slightly smaller when expanded
167230
height: "auto",
168231
transition: "max-width 0.2s",
169-
marginBottom: "1px",
232+
marginBottom: open ? "8px" : "4px",
170233
}}
171234
/>
172-
{/* {open && (
173-
<Typography
174-
sx={{
175-
fontWeight: 700,
176-
color: "#000",
177-
fontSize: "1.4rem",
178-
letterSpacing: "0.1em",
179-
mt: -6,
180-
}}
181-
>
182-
VOLCANO
183-
</Typography>
184-
)} */}
235+
{open && (
236+
<Typography
237+
variant="caption"
238+
sx={{
239+
color: "text.secondary",
240+
fontWeight: 500,
241+
textAlign: "center"
242+
}}
243+
>
244+
v1.0.0
245+
</Typography>
246+
)}
185247
</Box>
186248
</Drawer>
249+
187250
<Box
188251
component="main"
189-
sx={{ flexGrow: 1, p: 3, backgroundColor: "white" }}
252+
sx={{
253+
flexGrow: 1,
254+
p: 3,
255+
backgroundColor: "#fafafa" // Consistent background
256+
}}
190257
>
191258
<Toolbar />
192259
<Outlet />
@@ -195,4 +262,4 @@ const Layout = () => {
195262
);
196263
};
197264

198-
export default Layout;
265+
export default Layout;

0 commit comments

Comments
 (0)