feat: rework sidebar menu item layout (#76)

pbasiak · Jun 15, 2024 · 8ee9231 · 8ee9231
1 parent 81efba3
commit 8ee9231
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/...nts/navigation/components/navigation-item/navigation-item-nested/NavigationItemNested.tsx b/...nts/navigation/components/navigation-item/navigation-item-nested/NavigationItemNested.tsx
@@ -24,7 +24,7 @@ export const NavigationItemNested = ({ item }: Props) => {
   }, [item.label, toggleNavigationId]);
 
   const nestedItems = item.items.map((item) => {
-    return <NavigationItemSimple key={item.path} item={item} nested />;
+    return <NavigationItemSimple key={item.path} item={item} nested animateOn={isOpen} />;
   });
 
   return (
@@ -42,9 +42,7 @@ export const NavigationItemNested = ({ item }: Props) => {
         {isOpen ? <ExpandLess /> : <ExpandMore />}
       </NavigationListItemButton>
       <Collapse in={isOpen} timeout='auto' unmountOnExit>
-        <List component='div' disablePadding sx={{ marginLeft: 2 }}>
-          {nestedItems}
-        </List>
+        <List component='div'>{nestedItems}</List>
       </Collapse>
     </>
   );

diff --git a/...nts/navigation/components/navigation-item/navigation-item-simple/NavigationItemSimple.tsx b/...nts/navigation/components/navigation-item/navigation-item-simple/NavigationItemSimple.tsx
@@ -4,16 +4,17 @@ import { listItemPrimaryTypographyProps } from '../../../constants/listItemProps
 import { NavigationListItemButton, NavigationListItemIcon, NavigationListItemNestedIcon } from '../styled';
 import { useNavigate } from 'react-router-dom';
 import { NavigationItemBadge } from './styled';
-import { Stack, ListItemText, Typography } from '@mui/material';
+import { Stack, ListItemText, Typography, Zoom } from '@mui/material';
 import { Launch, Circle } from '@mui/icons-material';
 
 interface Props {
   iconColor?: NavigationItemIconProps['color'];
   nested?: boolean;
   item: NavigationItemSimpleType | NavigationItemSimpleTypeWithoutIcon;
+  animateOn?: boolean;
 }
 
-export const NavigationItemSimple = ({ item, nested = false }: Props) => {
+export const NavigationItemSimple = ({ item, nested = false, animateOn }: Props) => {
   const location = window.location.pathname;
   const navigate = useNavigate();
   const isActive = location === item.path;
@@ -34,7 +35,9 @@ export const NavigationItemSimple = ({ item, nested = false }: Props) => {
         <NavigationListItemIcon>{item.icon(iconProps)}</NavigationListItemIcon>
       ) : (
         <NavigationListItemNestedIcon>
-          <Circle fontSize={'inherit'} />
+          <Zoom in={animateOn}>
+            <Circle color={'inherit'} fontSize={'inherit'} />
+          </Zoom>
         </NavigationListItemNestedIcon>
       )}
       <Stack

diff --git a/src/layouts/sidebar-layout/components/navigation/components/navigation-item/styled.ts b/src/layouts/sidebar-layout/components/navigation/components/navigation-item/styled.ts
@@ -9,7 +9,7 @@ export const NavigationListItemButton = styled(ListItemButton, {
   shouldForwardProp: (prop) => prop !== 'active' && prop !== 'nested',
 })<NavigationListItemButtonProps>(({ theme, active, nested }) => ({
   borderRadius: theme.shape.borderRadius,
-  paddingLeft: nested ? theme.spacing(3) : theme.spacing(2),
+  paddingLeft: nested ? theme.spacing(2) : theme.spacing(2),
   paddingTop: nested ? theme.spacing(0.5) : theme.spacing(1),
   paddingBottom: nested ? theme.spacing(0.5) : theme.spacing(1),
   marginBottom: theme.spacing(1),
@@ -46,7 +46,7 @@ export const NavigationListItemIcon = styled(ListItemIcon)(({ theme }) => ({
 }));
 
 export const NavigationListItemNestedIcon = styled(ListItemIcon)(({ theme }) => ({
-  minWidth: '24px',
+  minWidth: '36px',
   fontSize: '0.5rem',
-  color: theme.palette.text.primary,
+  paddingLeft: theme.spacing(1),
 }));