feat:(frontend): side-nav enterprise items

frontend/src/layouts/dashboard/config.js

@@ -2,6 +2,8 @@ import ChartBarIcon from '@heroicons/react/24/solid/ChartBarIcon';
 import CogIcon from '@heroicons/react/24/solid/CogIcon';
 import ChatBubbleLeftRightIcon from '@heroicons/react/24/solid/ChatBubbleLeftRightIcon'
 import MapIcon from '@heroicons/react/24/solid/MapIcon'
+import RectangleGroupIcon from '@heroicons/react/24/solid/RectangleGroupIcon'
+import ArrowDownOnSquareStackIcon from '@heroicons/react/24/solid/ArrowDownOnSquareStackIcon'
 import UserGroupIcon from '@heroicons/react/24/solid/UserGroupIcon'
 import KeyIcon from '@heroicons/react/24/solid/KeyIcon'
 import CpuChip from '@heroicons/react/24/solid/CpuChipIcon';
@@ -22,34 +24,45 @@ export const items = [
     path: '/devices',
     icon: (
       <SvgIcon fontSize="small">
-       <CpuChip/>
+        <CpuChip />
       </SvgIcon>
     )
   },
-  // {
-  //   title: 'Chat (beta)',
-  //   path: '/chat',
-  //   icon: (
-  //     <SvgIcon fontSize="small">
-  //      <ChatBubbleLeftRightIcon/>
-  //     </SvgIcon>
-  //   )
-  // },
-   {
-     title: 'Map',
-     path: '/map',
-     icon: (
-       <SvgIcon fontSize="small">
-        <MapIcon/>
-       </SvgIcon>
-     ),
-   },
+  {
+    title: 'Mass Actions',
+    icon: (
+      <SvgIcon fontSize="small">
+        <RectangleGroupIcon color='gray'/>
+      </SvgIcon>
+    ),
+    disabled: true,
+    children: [
+      {
+        title: 'Firmware Update',
+        icon: (
+          <SvgIcon fontSize="small">
+            <ArrowDownOnSquareStackIcon color='gray'/>
+          </SvgIcon>
+        ),
+        disabled: true
+      }
+    ]
+  },
+  {
+    title: 'Map',
+    icon: (
+      <SvgIcon fontSize="small">
+        <MapIcon color='gray'/>
+      </SvgIcon>
+    ),
+    disabled: true
+  },
   {
     title: 'Credentials',
     path: '/credentials',
     icon: (
       <SvgIcon fontSize="small">
-      <KeyIcon/>
+        <KeyIcon />
       </SvgIcon>
     )
   },
@@ -58,10 +71,10 @@ export const items = [
     path: '/users',
     icon: (
       <SvgIcon fontSize="small">
-      <UserGroupIcon/>
+        <UserGroupIcon />
       </SvgIcon>
     )
-   },
+  },
   {
     title: 'Settings',
     path: '/settings',

frontend/src/layouts/dashboard/side-nav-item.js

@@ -1,9 +1,28 @@
+import { useState } from 'react';
 import NextLink from 'next/link';
 import PropTypes from 'prop-types';
-import { Box, ButtonBase } from '@mui/material';
+import { Box, ButtonBase, Collapse, SvgIcon } from '@mui/material';
+import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon';
+import ChevronUpIcon from '@heroicons/react/24/outline/ChevronUpIcon';
+import { usePathname } from 'next/navigation';
 
 export const SideNavItem = (props) => {
-  const { active = false, disabled, external, icon, path, title } = props;
+  const { active = false, disabled, external, icon, path, title, children, padleft } = props;
+
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+
+  const isItemActive = (currentPath, itemPath) => {
+    if (currentPath === itemPath) {
+      return true;
+    }
+
+    if (currentPath.includes(itemPath) && itemPath !== '/' && itemPath !== '/mass-actions') {
+      return true;
+    }
+
+    return false;
+  }
 
   const linkProps = path
     ? external
@@ -18,6 +37,10 @@ export const SideNavItem = (props) => {
       }
     : {};
 
+    // console.log('padleft', padleft);
+    // console.log('path', path);
+    // console.log('title', title);
+
   return (
     <li>
       <ButtonBase
@@ -25,8 +48,9 @@ export const SideNavItem = (props) => {
           alignItems: 'center',
           borderRadius: 1,
           display: 'flex',
+          ...(disabled ? {cursor: 'default'}: {cursor: 'pointer'}),
           justifyContent: 'flex-start',
-          pl: '16px',
+          pl: padleft,
           pr: '16px',
           py: '6px',
           textAlign: 'left',
@@ -38,7 +62,6 @@ export const SideNavItem = (props) => {
             backgroundColor: 'rgba(255, 255, 255, 0.04)'
           }
         }}
-        {...linkProps}
       >
         {icon && (
           <Box
@@ -53,6 +76,7 @@ export const SideNavItem = (props) => {
                 color: '#FFFFFF'
               })
             }}
+            {...linkProps}
           >
             {icon}
           </Box>
@@ -66,6 +90,7 @@ export const SideNavItem = (props) => {
             fontSize: 14,
             fontWeight: 600,
             lineHeight: '24px',
+            textDecoration: 'none',
             whiteSpace: 'nowrap',
             ...(active && {
               color: 'common.white'
@@ -74,10 +99,66 @@ export const SideNavItem = (props) => {
               color: 'neutral.500'
             })
           }}
+          {...linkProps}
         >
           {title}
         </Box>
+        { children &&
+            <Box
+            onClick={()=>setOpen(!open)}
+            component="span"
+            sx={{
+              color: 'neutral.400',
+              flexGrow: 1,
+              display: 'flex',
+              justifyContent: 'flex-end',
+              fontFamily: (theme) => theme.typography.fontFamily,
+              fontSize: 14,
+              fontWeight: 600,
+              lineHeight: '24px',
+              whiteSpace: 'nowrap',
+              ...(active && {
+                color: 'common.white'
+              }),
+              ...(disabled && {
+                color: 'neutral.500'
+              })
+            }}
+          >
+          {
+            open ? 
+          <SvgIcon fontSize='8px'>
+            <ChevronDownIcon/>
+          </SvgIcon>:
+          <SvgIcon fontSize='8px'>
+            <ChevronUpIcon />
+          </SvgIcon>
+    }
+          </Box>
+        }
       </ButtonBase>
+      <Collapse in={open}>
+        {
+            children &&
+              (
+                children.map((child) => {
+                  return (
+                    <SideNavItem
+                      active={isItemActive(pathname, child.path)}
+                      disabled={child.disabled}
+                      external={false}
+                      icon={child.icon}
+                      key={child.title}
+                      path={child.path}
+                      title={child.title}
+                      children={child?.children}
+                      padleft={padleft + 2}
+                    />
+                  );
+                })
+              )
+          }
+        </Collapse>
     </li>
   );
 };

frontend/src/layouts/dashboard/side-nav.js

@@ -5,8 +5,12 @@ import Link from 'next/link'
 import {
   Box,
   Button,
+  Collapse,
   Divider,
   Drawer,
+  List,
+  ListItemButton,
+  ListItemText,
   Stack,
   SvgIcon,
   Typography,
@@ -30,7 +34,7 @@ export const SideNav = (props) => {
       return true;
     }
 
-    if (currentPath.includes(itemPath) && itemPath !== '/') {
+    if (currentPath.includes(itemPath) && itemPath !== '/' && itemPath !== '/mass-actions') {
       return true;
     }
 
@@ -82,7 +86,7 @@ export const SideNav = (props) => {
           >
          <Link href="http://localhost/companylink" target="_blank">
             <div style={{display:'flex',justifyContent:'center'}}>
-              <img src="/images/logo.png" 
+              <img src={`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/images/logo.png`} 
               width={'60%'}
               />
             </div>
@@ -113,6 +117,9 @@ export const SideNav = (props) => {
             }}
           >
             {items.map((item) => {
+              if (item.title == "Map" && process.env.NEXT_PUBLIC_ENTERPRISE_VERSION != "true"){
+                return
+              }
               const active = isItemActive(pathname, item.path);
 
               return (
@@ -124,9 +131,43 @@ export const SideNav = (props) => {
                   key={item.title}
                   path={item.path}
                   title={item.title}
+                  children={item?.children}
+                  padleft={2}
                 />
               );
             })}
+            <Collapse in={open} timeout="auto" unmountOnExit> 
+              <Box
+                component="span"
+                sx={{
+                  color: 'neutral.400',
+                  flexGrow: 1,
+                  fontFamily: (theme) => theme.typography.fontFamily,
+                  fontSize: 14,
+                  fontWeight: 600,
+                  lineHeight: '24px',
+                  whiteSpace: 'nowrap',
+                  ...(true && {
+                    color: 'common.white'
+                  }),
+                  ...(false && {
+                    color: 'neutral.500'
+                  })
+                }}
+              >
+                {""}
+              </Box>
+            </Collapse>
+            {/* <List>
+              <Collapse in={true}>
+                <List disablePadding>
+                <ListItemButton sx={{ pl: 4 }}>
+                  <ListItemText primary="Starred" />
+                  oi
+                </ListItemButton>
+                </List>
+              </Collapse>
+            </List> */}
           </Stack>
         </Box>
         <Stack style={{position:"absolute", bottom:"2px", left:"2px"}} direction={"row"} spacing={"1"} zIndex={9999}>  
@@ -158,8 +199,7 @@ export const SideNav = (props) => {
         open
         PaperProps={{
           sx: {
-            background: `linear-gradient(0deg, ${theme.palette.neutral["800"]} 0%, ${theme.palette.primary.dark} 90%);`,
-            color: 'common.white',
+            background: `linear-gradient(120deg, ${theme.palette.neutral["800"]} 0%, ${theme.palette.primary.dark} 90%);`,
             width: 280
           }
         }}
@@ -177,7 +217,7 @@ export const SideNav = (props) => {
       open={open}
       PaperProps={{
         sx: {
-          background: `linear-gradient(0deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 90%);`,
+          background: `linear-gradient(120deg, ${theme.palette.neutral["800"]} 0%, ${theme.palette.primary.dark}  90%);`,
           color: 'common.white',
           width: 280
         }