subnav

src/components/AppShell.jsx

@@ -4,7 +4,8 @@ import List from '@mui/material/List';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import IconButton from '@mui/material/IconButton';
+import ButtonBase from '@mui/material/ButtonBase';
+import Typography from '@mui/material/Typography';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import UserMenu from './UserMenu';
 import { NAV_ITEMS, SUB_NAV, resolveActiveNav, resolveActiveSub } from '../nav';
@@ -12,7 +13,7 @@ import { artikelQueryPath } from '../pages/artikel/artikelQuery';
 import { defaultCategoryPath } from '../pages/artikel/categoryRoute';
 
 const SIDEBAR_WIDTH = 144;
-const SUB_NAV_WIDTH = 80;
+const SUB_NAV_WIDTH = 88;
 
 class AppSidebar extends PureComponent {
   render() {
@@ -110,7 +111,7 @@ class AppSubNav extends PureComponent {
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
-          gap: 1,
+          gap: 1.5,
           position: 'sticky',
           top: 0,
           alignSelf: 'flex-start',
@@ -121,7 +122,7 @@ class AppSubNav extends PureComponent {
           const active = segment === activeSub;
 
           return (
-            <IconButton
+            <ButtonBase
               key={segment || 'index'}
               type="button"
               aria-label={label}
@@ -140,21 +141,42 @@ class AppSubNav extends PureComponent {
                 navigate(segment ? `${activeNav}/${segment}` : activeNav);
               }}
               sx={(theme) => ({
-                width: 80,
-                height: 80,
-                borderRadius: '50%',
+                width: SUB_NAV_WIDTH,
+                py: 1,
+                px: 0.5,
+                borderRadius: 2,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 0.5,
                 color: active
                   ? theme.palette.primary.main
                   : theme.palette.text.secondary,
-                bgcolor: 'transparent',
+                bgcolor: active ? theme.palette.action.selected : 'transparent',
                 '&:hover': {
                   bgcolor: theme.palette.action.hover,
                   color: theme.palette.primary.main,
                 },
               })}
             >
-              <Icon sx={{ fontSize: 40 }} />
-            </IconButton>
+              <Icon sx={{ fontSize: 32 }} />
+              {label ? (
+                <Typography
+                  variant="caption"
+                  noWrap
+                  sx={{
+                    fontSize: '0.68rem',
+                    fontWeight: 500,
+                    lineHeight: 1.2,
+                    textAlign: 'center',
+                    maxWidth: '100%',
+                  }}
+                >
+                  {label}
+                </Typography>
+              ) : null}
+            </ButtonBase>
           );
         })}
       </Box>