update nav drawer design to improve hierarchy

src/layouts/Navigation/NavDrawer.tsx

@@ -9,6 +9,7 @@ import {
   List,
   ListItemIcon,
   ListItemText,
+  // ListSubheader,
   Divider,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/MenuOpen";
@@ -224,6 +225,8 @@ export default function NavDrawer({
 
           <Divider variant="middle" sx={{ my: 1 }} />
 
+          {/* <ListSubheader>Your tables</ListSubheader> */}
+
           <li>
             <NavItem
               {...({ component: "button" } as any)}
@@ -240,8 +243,6 @@ export default function NavDrawer({
             </NavItem>
           </li>
 
-          <Divider variant="middle" sx={{ my: 1 }} />
-
           {sections &&
             Object.entries(sections)
               .filter(([, tables]) => tables.length > 0)

src/layouts/Navigation/NavItem.tsx

@@ -10,11 +10,19 @@ export default function NavItem(props: MenuItemProps<typeof Link>) {
       selected={pathname === props.to}
       {...props}
       sx={{
-        ...props.sx,
-        "&&::before": {
-          left: "auto",
-          right: 0,
+        "& .MuiListItemText-primary": {
+          typography: "button",
+          color: "text.secondary",
         },
+        "& .MuiListItemIcon-root": { opacity: 0.87 },
+
+        "&:hover, &.Mui-selected": {
+          "& .MuiListItemText-primary": { color: "text.primary" },
+          "& .MuiSvgIcon-root": { color: "text.primary" },
+        },
+
+        ...props.sx,
+        "&&::before": { left: "auto", right: 0 },
       }}
     />
   );

src/layouts/Navigation/NavTableSection.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
 
-import { List, ListItemText, Collapse } from "@mui/material";
+import { List, ListItemIcon, ListItemText, Collapse } from "@mui/material";
+import FolderIcon from "@mui/icons-material/FolderOutlined";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import NavItem from "./NavItem";
 
@@ -34,6 +35,10 @@ export default function NavTableSection({
         selected={hasMatch && !open}
         onClick={() => setOpen((o) => !o)}
       >
+        <ListItemIcon>
+          <FolderIcon />
+        </ListItemIcon>
+
         <ListItemText primary={section} style={{ textAlign: "left" }} />
 
         <ArrowDropDownIcon
@@ -56,12 +61,17 @@ export default function NavTableSection({
                   to={route}
                   selected={pathname.split("%2F")[0] === route}
                   onClick={closeDrawer}
-                  sx={{
-                    ml: 2,
-                    width: (theme) => `calc(100% - ${theme.spacing(2 + 0.5)})`,
-                  }}
                 >
-                  <ListItemText primary={table.name} />
+                  <ListItemIcon />
+                  <ListItemText
+                    primary={table.name}
+                    sx={{
+                      "& .MuiListItemText-primary": {
+                        fontWeight: "normal",
+                        fontSize: ".8125rem",
+                      },
+                    }}
+                  />
                 </NavItem>
               </li>
             );