update nav style

www-v1/src/Theme/components.tsx

@@ -184,7 +184,7 @@ export const components = (theme: Theme): ThemeOptions => {
           root: {
             width: `calc(100% - ${theme.spacing(1)})`,
             margin: theme.spacing(0, 0.5),
-            padding: theme.spacing(0.75, 1.5),
+            padding: theme.spacing(0.75, 0.75, 0.75, 1.5),
             minHeight: 32,
             borderRadius: theme.shape.borderRadius,
 
@@ -230,6 +230,11 @@ export const components = (theme: Theme): ThemeOptions => {
           },
         },
       },
+      MuiListItemSecondaryAction: {
+        styleOverrides: {
+          root: { right: theme.spacing(0.75) },
+        },
+      },
 
       MuiButton: {
         styleOverrides: {

www-v1/src/components/Navigation/NavDrawerItem.tsx

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { makeStyles, createStyles } from "@material-ui/styles";
 import {
   List,
-  ListItem,
+  MenuItem,
   // ListItemIcon,
   ListItemText,
   Collapse,
@@ -19,28 +19,37 @@ import { routes } from "constants/routes";
 const useStyles = makeStyles((theme) =>
   createStyles({
     listItem: {
-      color: theme.palette.text.secondary,
+      color: theme.palette.text.primary,
       // minHeight: 48,
+      // margin: theme.spacing(0, 1),
     },
     listItemSelected: {
       "&&, &&:hover": {
-        color: theme.palette.primary.main,
-        backgroundColor: alpha(
-          theme.palette.primary.main,
-          theme.palette.action.selectedOpacity
-        ),
+        backgroundColor: theme.palette.action.selected,
+        //   color: theme.palette.primary.main,
+        //   backgroundColor: alpha(
+        //     theme.palette.primary.main,
+        //     theme.palette.action.selectedOpacity
+        //   ),
+      },
+      "$listItem&:before": {
+        top: (36 - 16) / 2,
+        // right: 0,
+        // left: "auto",
       },
     },
     listItemIcon: {},
     listItemText: {
       ...theme.typography.body2,
-      fontWeight: theme.typography.fontWeightMedium,
       // ...theme.typography.button,
       display: "block",
       color: "inherit",
     },
 
-    dropdownIcon: { transition: theme.transitions.create("transform") },
+    dropdownIcon: {
+      color: theme.palette.action.active,
+      transition: theme.transitions.create("transform"),
+    },
     dropdownIconOpen: { transform: "rotate(180deg)" },
 
     childListItem: {
@@ -49,7 +58,7 @@ const useStyles = makeStyles((theme) =>
     },
     childListItemText: {
       ...theme.typography.body2,
-      fontWeight: theme.typography.fontWeightMedium,
+      // fontWeight: theme.typography.fontWeightMedium,
       display: "block",
       color: "inherit",
     },
@@ -76,8 +85,8 @@ export default function NavDrawerItem({
 
   return (
     <li>
-      <ListItem
-        button
+      <MenuItem
+        // button
         classes={{
           root: clsx(
             classes.listItem,
@@ -98,14 +107,14 @@ export default function NavDrawerItem({
             open && classes.dropdownIconOpen
           )}
         />
-      </ListItem>
+      </MenuItem>
 
       <Collapse in={open}>
-        <List>
+        <List disablePadding>
           {tables.map((table) => (
             <li key={table.collection}>
-              <ListItem
-                button
+              <MenuItem
+                // button
                 selected={table.collection === currentTable}
                 classes={{
                   root: clsx(classes.listItem, classes.childListItem),
@@ -125,7 +134,7 @@ export default function NavDrawerItem({
                   primary={table.name}
                   classes={{ primary: classes.childListItemText }}
                 />
-              </ListItem>
+              </MenuItem>
             </li>
           ))}
         </List>