From 636f034666f55fceb6cba2068901a398cd3b64cc Mon Sep 17 00:00:00 2001 From: leandrofars Date: Thu, 5 Sep 2024 12:11:03 -0300 Subject: [PATCH] feat:(frontend): side-nav enterprise items --- frontend/src/layouts/dashboard/config.js | 57 +++++++----- .../src/layouts/dashboard/side-nav-item.js | 89 ++++++++++++++++++- frontend/src/layouts/dashboard/side-nav.js | 50 +++++++++-- 3 files changed, 165 insertions(+), 31 deletions(-) diff --git a/frontend/src/layouts/dashboard/config.js b/frontend/src/layouts/dashboard/config.js index f2e7fff..8c336c0 100644 --- a/frontend/src/layouts/dashboard/config.js +++ b/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: ( - + ) }, - // { - // title: 'Chat (beta)', - // path: '/chat', - // icon: ( - // - // - // - // ) - // }, - { - title: 'Map', - path: '/map', - icon: ( - - - - ), - }, + { + title: 'Mass Actions', + icon: ( + + + + ), + disabled: true, + children: [ + { + title: 'Firmware Update', + icon: ( + + + + ), + disabled: true + } + ] + }, + { + title: 'Map', + icon: ( + + + + ), + disabled: true + }, { title: 'Credentials', path: '/credentials', icon: ( - + ) }, @@ -58,10 +71,10 @@ export const items = [ path: '/users', icon: ( - + ) - }, + }, { title: 'Settings', path: '/settings', diff --git a/frontend/src/layouts/dashboard/side-nav-item.js b/frontend/src/layouts/dashboard/side-nav-item.js index 1b4555e..c2cb376 100644 --- a/frontend/src/layouts/dashboard/side-nav-item.js +++ b/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 (
  • { 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 && ( { color: '#FFFFFF' }) }} + {...linkProps} > {icon} @@ -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} + { children && + 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 ? + + + : + + + + } + + } + + { + children && + ( + children.map((child) => { + return ( + + ); + }) + ) + } +
    • ); }; diff --git a/frontend/src/layouts/dashboard/side-nav.js b/frontend/src/layouts/dashboard/side-nav.js index dbde811..d66d3e4 100644 --- a/frontend/src/layouts/dashboard/side-nav.js +++ b/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) => { >
    -
    @@ -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} /> ); })} + + theme.typography.fontFamily, + fontSize: 14, + fontWeight: 600, + lineHeight: '24px', + whiteSpace: 'nowrap', + ...(true && { + color: 'common.white' + }), + ...(false && { + color: 'neutral.500' + }) + }} + > + {""} + + + {/* + + + + + oi + + + + */} @@ -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 }