From bf44bbc95a462915dbe557c185ed1add1373fbdb Mon Sep 17 00:00:00 2001
From: semon wang <semonwang@163.com>
Date: Thu, 11 Dec 2025 10:52:22 +0800
Subject: [PATCH 1/2] refactor sidemenu

---
 frontend/src/SideMenu.js | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/frontend/src/SideMenu.js b/frontend/src/SideMenu.js
index 1b5791d1..70505de2 100644
--- a/frontend/src/SideMenu.js
+++ b/frontend/src/SideMenu.js
@@ -21,26 +21,39 @@ const drawerWidth = 240;
 export default function SideMenu() {
 
     const context = useContext(PageContext);
+
+    const menuItems = [{
+      text: "Home",
+      href: context.sandboxId ? `/sandbox/${context.sandboxId}` : "/",
+      icon: <HomeIcon />,
+      displayText: "Home",
+    },
+    {
+      text: "Dashboard",
+      href: context.sandboxId ? `/sandbox/dashboard/${context.sandboxId}` : "/dashboard",
+      icon: <CheckIcon />,
+      displayText: "Validation",
+    },];
+
     return (
         <Drawer
             variant="permanent"
             sx={{
                 width: drawerWidth,
                 flexShrink: 0,
-                [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' },
+                [`& .MuiDrawer-paper`]: { position: 'relative', width: drawerWidth, boxSizing: 'border-box' },
                 display: { xs:'none', md: 'flex'},
             }}
         >
-            <Toolbar />
-            <Box sx={{ overflow: 'auto' , paddingTop:'5vh'}}>
+            <Box sx={{ overflow: 'auto'}}>
                 <List>
-                    {['Home', 'Dashboard'].map((text, index) => (
-                        <ListItem key={text} disablePadding style={{ 'borderLeft': context.pageTitle === text.toLowerCase() ? 'thick solid #1976d2' : 'none' }}>
-                            <ListItemButton href={text === "Home" ? context.sandboxId ? `/sandbox/${context.sandboxId}` : "/" : context.sandboxId ? `/sandbox/dashboard/${context.sandboxId}` : "/dashboard"}>
+                    {menuItems.map((item, index) => (
+                        <ListItem key={item.text} disablePadding style={{ 'borderLeft': context.pageTitle === item.text.toLowerCase() ? 'thick solid #1976d2' : 'none' }}>
+                            <ListItemButton href={item.href}>
                                 <ListItemIcon>
-                                    {text === "Home" ? <HomeIcon /> : <CheckIcon />}
+                                    {item.icon}
                                 </ListItemIcon>
-                                <ListItemText primary={text === "Dashboard" ? "Validation" : text} />
+                                <ListItemText primary={item.displayText} />
                             </ListItemButton>
                         </ListItem>
                     ))}

From 579a1b23ce4932ae2b94eca566d5525382f0620e Mon Sep 17 00:00:00 2001
From: Ghesselink <geert.hess@gmail.com>
Date: Mon, 29 Dec 2025 00:12:50 +0000
Subject: [PATCH 2/2] align items left menu

---
 frontend/src/SideMenu.js | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/SideMenu.js b/frontend/src/SideMenu.js
index 70505de2..125b7e6a 100644
--- a/frontend/src/SideMenu.js
+++ b/frontend/src/SideMenu.js
@@ -48,14 +48,29 @@ export default function SideMenu() {
             <Box sx={{ overflow: 'auto'}}>
                 <List>
                     {menuItems.map((item, index) => (
-                        <ListItem key={item.text} disablePadding style={{ 'borderLeft': context.pageTitle === item.text.toLowerCase() ? 'thick solid #1976d2' : 'none' }}>
-                            <ListItemButton href={item.href}>
-                                <ListItemIcon>
-                                    {item.icon}
+                        <ListItem key={item.text} disablePadding>
+                            <ListItemButton
+                                href={item.href}
+                                sx={{
+                                boxShadow:
+                                    context.pageTitle === item.text.toLowerCase()
+                                    ? 'inset 4px 0 0 #1976d2'
+                                    : 'inset 4px 0 0 transparent',
+                                }}
+                            >
+                                <ListItemIcon
+                                sx={{
+                                    minWidth: 40,
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                }}
+                                >
+                                {item.icon}
                                 </ListItemIcon>
+
                                 <ListItemText primary={item.displayText} />
                             </ListItemButton>
-                        </ListItem>
+                            </ListItem>
                     ))}
                 </List>