Initial Commit

frontend/src/components/Layout.tsx

@@ -11,6 +11,7 @@ import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
 import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
 import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
 import PlaceRoundedIcon from '@mui/icons-material/PlaceRounded';
+import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
 import { useAppStore } from '../core/store';
@@ -32,6 +33,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
     { name: 'Fuel Logs', href: '/fuel-logs', icon: <LocalGasStationRoundedIcon sx={{ fontSize: 20 }} /> },
     { name: 'Maintenance', href: '/maintenance', icon: <BuildRoundedIcon sx={{ fontSize: 20 }} /> },
     { name: 'Gas Stations', href: '/stations', icon: <PlaceRoundedIcon sx={{ fontSize: 20 }} /> },
+    { name: 'Settings', href: '/settings', icon: <SettingsRoundedIcon sx={{ fontSize: 20 }} /> },
   ];
 
   // Mobile layout
@@ -83,21 +85,29 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
           height: '100vh',
           width: 256,
           zIndex: 1000,
+          borderRadius: 0,
+          borderRight: 1,
+          borderColor: 'divider',
           transform: sidebarOpen ? 'translateX(0)' : 'translateX(-100%)',
           transition: 'transform 0.2s ease-in-out',
           display: 'flex',
           flexDirection: 'column'
         }}
       >
-        <Box sx={{ 
-          display: 'flex', 
-          alignItems: 'center', 
-          justifyContent: 'space-between', 
-          height: 64, 
-          px: 3, 
-          borderBottom: 1, 
-          borderColor: 'divider' 
-        }}>
+        <Paper
+          elevation={0}
+          square
+          sx={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            justifyContent: 'space-between', 
+            height: 64, 
+            px: 3, 
+            borderBottom: 1, 
+            borderColor: 'divider',
+            borderRadius: 0
+          }}
+        >
           <Typography variant="h6" sx={{ fontWeight: 700, color: 'primary.main' }}>
             MotoVaultPro
           </Typography>
@@ -108,7 +118,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
           >
             <CloseIcon />
           </IconButton>
-        </Box>
+        </Paper>
 
         <Box sx={{ mt: 3, px: 2, flex: 1 }}>
           {navigation.map((item) => {
@@ -241,4 +251,4 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
       )}
     </Box>
   );
-};
+};