nav

src/components/AppShell.jsx

@@ -7,7 +7,7 @@ import { NavLink, Outlet } from 'react-router-dom';
 import UserMenu from './UserMenu';
 import { NAV_ITEMS } from '../nav';
 
-const SIDEBAR_WIDTH = 240;
+const SIDEBAR_WIDTH = 144;
 
 export default function AppShell() {
   return (
@@ -31,8 +31,9 @@ export default function AppShell() {
               end={path === '/'}
               sx={(theme) => ({
                 borderRadius: 0,
-                px: 2,
+                px: 1.5,
                 py: 1.25,
+                borderLeft: '3px solid transparent',
                 color: theme.nav.item,
                 '& .MuiListItemIcon-root': { color: 'inherit' },
                 '&:hover': {
@@ -43,12 +44,11 @@ export default function AppShell() {
                   bgcolor: theme.nav.itemActive,
                   color: theme.nav.itemActiveText,
                   fontWeight: 600,
-                  borderLeft: `3px solid ${theme.nav.itemActiveAccent}`,
-                  pl: '13px',
+                  borderLeftColor: theme.nav.itemActiveAccent,
                 },
               })}
             >
-              <ListItemIcon sx={{ minWidth: 40 }}>
+              <ListItemIcon sx={{ minWidth: 36 }}>
                 <Icon />
               </ListItemIcon>
               <ListItemText primary={label} />