From 783870623c4f84dfea9a3a10b62a57c6f4d6405d Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 27 Jun 2023 02:25:37 -0300
Subject: [PATCH 1/6] play with different styles

---
 .../modules/components/AppNavDrawerItem.js    | 59 +++++++++++++++----
 1 file changed, 49 insertions(+), 10 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index ead7c9aac59b28..54841c728a8630 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -30,21 +30,32 @@ const Item = styled(
   return [
     {
       ...theme.typography.body2,
+      position: 'relative',
       display: 'flex',
       alignItems: 'center',
-      borderRadius: 5,
+      borderRadius: 6,
       outline: 0,
       width: '100%',
-      paddingTop: 5,
-      paddingBottom: 5,
+      padding: 6,
       justifyContent: 'flex-start',
-      fontWeight: theme.typography.fontWeightMedium,
+      fontWeight: theme.typography.fontWeightSemiBold,
       transition: theme.transitions.create(['color', 'background-color'], {
         duration: theme.transitions.duration.shortest,
       }),
       fontSize: theme.typography.pxToRem(14),
       textDecoration: 'none',
       paddingLeft: 31 + (depth > 1 ? (depth - 1) * 10 : 0),
+      '&:before': {
+        content: '""',
+        display: 'block',
+        position: 'absolute',
+        zIndex: 1,
+        left: 11.5,
+        height: '100%',
+        width: 1,
+        opacity: depth === 0 ? 0 : 1,
+        background: alpha(theme.palette.primaryDark[700], 0.6),
+      },
       ...color,
       ...(subheader && {
         marginTop: theme.spacing(1),
@@ -52,6 +63,32 @@ const Item = styled(
         letterSpacing: '.08rem',
         fontWeight: theme.typography.fontWeightBold,
         fontSize: theme.typography.pxToRem(11),
+        '&:before': {
+          content: '""',
+          display: 'block',
+          position: 'absolute',
+          zIndex: 1,
+          left: 11.5,
+          height: '55%',
+          top: 16,
+          width: 1,
+          opacity: depth === 0 ? 0 : 1,
+          background: alpha(theme.palette.primaryDark[700], 0.6),
+        },
+        '&:after': {
+          content: '""',
+          display: 'block',
+          position: 'absolute',
+          zIndex: 5,
+          left: 8,
+          height: 8,
+          width: 8,
+          borderRadius: 99,
+          opacity: depth === 0 ? 0 : 1,
+          background: alpha(theme.palette.primaryDark[700], 0.6),
+          border: '1px solid',
+          borderColor: alpha(theme.palette.primaryDark[400], 0.5),
+        },
       }),
       ...(hasIcon && {
         paddingLeft: 2,
@@ -82,6 +119,9 @@ const Item = styled(
                 theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
               ),
         },
+        '&:before': {
+          background: (theme.vars || theme).palette.primary[600],
+        },
       },
       '& .MuiChip-root': {
         marginTop: '2px',
@@ -100,11 +140,10 @@ const Item = styled(
         backgroundColor: (theme.vars || theme).palette.action.focus,
       },
       [theme.breakpoints.up('md')]: {
-        paddingTop: 3,
-        paddingBottom: 3,
+        paddingTop: 4,
+        paddingBottom: 4,
       },
       '& .ItemButtonIcon': {
-        marginLeft: 'auto !important',
         marginRight: '5px',
         color: (theme.vars || theme).palette.primary.main,
       },
@@ -145,7 +184,7 @@ const ItemButtonIcon = styled(KeyboardArrowRightRoundedIcon, {
 const StyledLi = styled('li', { shouldForwardProp: (prop) => prop !== 'depth' })(
   ({ theme, depth }) => ({
     display: 'block',
-    padding: depth === 0 ? theme.spacing(1, '10px', 0, '10px') : '2px 0',
+    padding: depth === 0 ? theme.spacing(1, '10px', 0, '10px') : 0,
   }),
 );
 
@@ -260,14 +299,14 @@ export default function AppNavDrawerItem(props) {
         onClick={handleClick}
         {...linkProps}
       >
-        {iconElement}
+        {/* {iconElement} */}
+        {expandable && !subheader && <ItemButtonIcon className="ItemButtonIcon" open={open} />}
         {title}
         {plan === 'pro' && <span className="plan-pro" title="Pro plan" />}
         {plan === 'premium' && <span className="plan-premium" title="Premium plan" />}
         {legacy && <Chip label="Legacy" sx={sxChip('warning')} />}
         {newFeature && <Chip label="New" sx={sxChip('success')} />}
         {comingSoon && <Chip label="Coming soon" sx={sxChip('grey')} />}
-        {expandable && !subheader && <ItemButtonIcon className="ItemButtonIcon" open={open} />}
       </Item>
       {expandable ? (
         <Collapse in={open} timeout="auto" unmountOnExit>

From bc86a94ee8df888e82a69c8784c8e11e426046ab Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 27 Jun 2023 02:32:43 -0300
Subject: [PATCH 2/6] more playing with styles

---
 .../modules/components/AppNavDrawerItem.js    | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index 54841c728a8630..a4e6cb4d022d78 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -38,7 +38,8 @@ const Item = styled(
       width: '100%',
       padding: 6,
       justifyContent: 'flex-start',
-      fontWeight: theme.typography.fontWeightSemiBold,
+      fontWeight:
+        depth === 0 ? theme.typography.fontWeightSemiBold : theme.typography.fontWeightMedium,
       transition: theme.transitions.create(['color', 'background-color'], {
         duration: theme.transitions.duration.shortest,
       }),
@@ -54,7 +55,7 @@ const Item = styled(
         height: '100%',
         width: 1,
         opacity: depth === 0 ? 0 : 1,
-        background: alpha(theme.palette.primaryDark[700], 0.6),
+        background: (theme.vars || theme).palette.grey[100],
       },
       ...color,
       ...(subheader && {
@@ -73,7 +74,7 @@ const Item = styled(
           top: 16,
           width: 1,
           opacity: depth === 0 ? 0 : 1,
-          background: alpha(theme.palette.primaryDark[700], 0.6),
+          background: (theme.vars || theme).palette.grey[100],
         },
         '&:after': {
           content: '""',
@@ -85,9 +86,9 @@ const Item = styled(
           width: 8,
           borderRadius: 99,
           opacity: depth === 0 ? 0 : 1,
-          background: alpha(theme.palette.primaryDark[700], 0.6),
+          background: (theme.vars || theme).palette.grey[50],
           border: '1px solid',
-          borderColor: alpha(theme.palette.primaryDark[400], 0.5),
+          borderColor: (theme.vars || theme).palette.grey[200],
         },
       }),
       ...(hasIcon && {
@@ -120,7 +121,7 @@ const Item = styled(
               ),
         },
         '&:before': {
-          background: (theme.vars || theme).palette.primary[600],
+          background: (theme.vars || theme).palette.primary[400],
         },
       },
       '& .MuiChip-root': {
@@ -156,10 +157,25 @@ const Item = styled(
     },
     theme.applyDarkStyles({
       ...color,
+      '&:before': {
+        background: alpha(theme.palette.primaryDark[700], 0.6),
+      },
       '&.app-drawer-active': {
         color: (theme.vars || theme).palette.primary[300],
         backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+        '&:before': {
+          background: (theme.vars || theme).palette.primary[600],
+        },
       },
+      ...(subheader && {
+        '&:before': {
+          background: alpha(theme.palette.primaryDark[700], 0.6),
+        },
+        '&:after': {
+          background: alpha(theme.palette.primaryDark[700], 0.6),
+          borderColor: alpha(theme.palette.primaryDark[400], 0.5),
+        },
+      }),
       ...(!subheader && {
         '&:hover': {
           color: '#fff',

From 2273bc8690fd15939dfcdee35087aaca8fb149c0 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Fri, 7 Jul 2023 08:30:51 -0300
Subject: [PATCH 3/6] change circle to squircle

---
 docs/src/modules/components/AppNavDrawerItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index a4e6cb4d022d78..5d155c5d98224c 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -84,7 +84,7 @@ const Item = styled(
           left: 8,
           height: 8,
           width: 8,
-          borderRadius: 99,
+          borderRadius: 2,
           opacity: depth === 0 ? 0 : 1,
           background: (theme.vars || theme).palette.grey[50],
           border: '1px solid',

From ffa2b4b6b318cfc061d1d5e810922e8edb75bec8 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Fri, 7 Jul 2023 08:36:57 -0300
Subject: [PATCH 4/6] color customizations

---
 docs/src/modules/components/AppNavDrawerItem.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index 5d155c5d98224c..21824bf925816b 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -86,7 +86,7 @@ const Item = styled(
           width: 8,
           borderRadius: 2,
           opacity: depth === 0 ? 0 : 1,
-          background: (theme.vars || theme).palette.grey[50],
+          background: alpha(theme.palette.grey[50], 0.5),
           border: '1px solid',
           borderColor: (theme.vars || theme).palette.grey[200],
         },
@@ -173,7 +173,7 @@ const Item = styled(
         },
         '&:after': {
           background: alpha(theme.palette.primaryDark[700], 0.6),
-          borderColor: alpha(theme.palette.primaryDark[400], 0.5),
+          borderColor: alpha(theme.palette.primaryDark[600], 0.5),
         },
       }),
       ...(!subheader && {

From 433cfeb2e137feffda8b9b859780cf8e448da5b1 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 10 Jul 2023 20:41:17 -0300
Subject: [PATCH 5/6] fix lint by removing unused code

---
 docs/src/modules/components/AppNavDrawerItem.js | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index 21824bf925816b..de03c44eb49827 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -283,22 +283,6 @@ export default function AppNavDrawerItem(props) {
   };
 
   const hasIcon = icon && (typeof icon !== 'string' || !!standardNavIcons[icon]);
-  const IconComponent = typeof icon === 'string' ? standardNavIcons[icon] : icon;
-  const iconElement = hasIcon ? (
-    <Box
-      component="span"
-      sx={{
-        '& svg': { fontSize: (theme) => theme.typography.pxToRem(16.5) },
-        display: 'flex',
-        alignItems: 'center',
-        height: '100%',
-        marginRight: 1.5,
-        py: '2px',
-      }}
-    >
-      <IconComponent fontSize="small" color="primary" />
-    </Box>
-  ) : null;
 
   return (
     <StyledLi {...other} depth={depth}>
@@ -315,7 +299,6 @@ export default function AppNavDrawerItem(props) {
         onClick={handleClick}
         {...linkProps}
       >
-        {/* {iconElement} */}
         {expandable && !subheader && <ItemButtonIcon className="ItemButtonIcon" open={open} />}
         {title}
         {plan === 'pro' && <span className="plan-pro" title="Pro plan" />}

From 90da3ffe1692dc4d1c5d8210298dfa1be69016da Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 10 Jul 2023 20:55:35 -0300
Subject: [PATCH 6/6] fix lint again

---
 docs/src/modules/components/AppNavDrawerItem.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index de03c44eb49827..386e95d1f499e2 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
 import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
 import { alpha, styled } from '@mui/material/styles';
 import Collapse from '@mui/material/Collapse';