Update: Sidebar standalone item

src/components/Sidenav/SidenavItem.js

@@ -31,7 +31,7 @@ import { item, itemContent, itemArrow } from 'components/Sidenav/styles/sidenavI
 // Material Dashboard 2 PRO React contexts
 import { useMaterialUIController } from 'context';
 
-function SidenavItem({ color, name, active, nested, children, open, ...rest }) {
+function SidenavItem({ color, name, active, nested, children, open, icon, ...rest }) {
   const [controller] = useMaterialUIController();
   const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller;
 
@@ -56,6 +56,7 @@ function SidenavItem({ color, name, active, nested, children, open, ...rest }) {
             })
           }
         >
+          {icon && <MDBox sx={{ marginLeft: '-1.8em', marginRight: '0.6em' }}>{icon}</MDBox>}
           <ListItemText primary={name} />
           {children && (
             <Icon
@@ -94,7 +95,8 @@ SidenavItem.propTypes = {
   active: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   nested: PropTypes.bool,
   children: PropTypes.node,
-  open: PropTypes.bool
+  open: PropTypes.bool,
+  icon: PropTypes.any
 };
 
 export default SidenavItem;

src/components/Sidenav/index.js

@@ -163,7 +163,7 @@ function Sidenav({ color, brandName, routes, ...rest }) {
 
   // Render all the routes from the routes.js (All the visible items on the Sidenav)
   const renderRoutes = routes.map(
-    ({ type, name, icon, title, collapse, noCollapse, key, href, hide }) => {
+    ({ type, name, icon, title, collapse, noCollapse, key, href, hide, route }) => {
       let returnValue;
 
       if (hide) return null;
@@ -223,6 +223,12 @@ function Sidenav({ color, brandName, routes, ...rest }) {
             }
           />
         );
+      } else if (type === 'single') {
+        returnValue = (
+          <NavLink to={route} key={key} sx={{ textDecoration: 'none' }}>
+            <SidenavItem color={color} name={name} active={key === itemName} icon={icon} />
+          </NavLink>
+        );
       }
 
       return returnValue;

src/routes/index.js

@@ -90,18 +90,12 @@ const protectedRoutes = [
   // },
   // { type: 'divider', key: 'divider-0' },
   {
-    type: 'collapse',
     name: 'Home',
-    key: 'Home',
+    key: 'home',
     icon: <HomeIcon width={24} height={24} color="white" />,
-    collapse: [
+    route: '/home',
-      {
+    type: 'single',
-        name: 'Home',
+    component: <HomepageScreen />
-        key: 'home',
-        route: '/home',
-        component: <HomepageScreen />
-      }
-    ]
   },
   {
     type: 'collapse',