Added: 'hide' unnecessary navbar items

src/components/Sidenav/index.js

@@ -60,7 +60,6 @@ function Sidenav({ color, brandName, routes, ...rest }) {
   const itemParentName = items[1];
   const itemName = items[items.length - 1];
 
-
   let textColor = 'white';
 
   if (transparentSidenav || (whiteSidenav && !darkMode)) {
@@ -120,9 +119,11 @@ function Sidenav({ color, brandName, routes, ...rest }) {
   };
   // Render the all the collpases from the routes.js
   const renderCollapse = (collapses) =>
-    collapses.map(({ name, collapse, route, href, key }) => {
+    collapses.map(({ name, collapse, route, href, key, hide }) => {
       let returnValue;
 
+      if (hide) return null;
+
       if (collapse) {
         returnValue = (
           <SidenavItem
@@ -162,9 +163,11 @@ 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 }) => {
+    ({ type, name, icon, title, collapse, noCollapse, key, href, hide }) => {
       let returnValue;
 
+      if (hide) return null;
+
       if (type === 'collapse') {
         returnValue = href ? (
           <Link
@@ -251,7 +254,13 @@ function Sidenav({ color, brandName, routes, ...rest }) {
             width={!brandName && '100%'}
             sx={(theme) => sidenavLogoLabel(theme, { miniSidenav })}
           >
-            <MDTypography fontSize="2rem"  component="h1" variant="button" fontWeight="bold"  color={textColor}>
+            <MDTypography
+              fontSize="2rem"
+              component="h1"
+              variant="button"
+              fontWeight="bold"
+              color={textColor}
+            >
               {brandName}
             </MDTypography>
           </MDBox>

src/routes/index.js

@@ -99,12 +99,14 @@ const protectedRoutes = [
     type: 'collapse',
     name: 'Test',
     key: 'Test',
+    hide: true,
     icon: <Icon fontSize="medium">dashboard</Icon>,
     collapse: [
       {
         name: 'Dashboard',
         key: 'dashboard',
         route: '/dashboard',
+        hide: true,
         component: <DashboardScreen />
       }
     ]