robobyte-front-builder 1.0.0

package/src/@core/layouts/components/vertical/navigation/Drawer.js

@@ -0,0 +1,122 @@
+// ** MUI Imports
+import { styled, useTheme } from '@mui/material/styles'
+import MuiSwipeableDrawer from '@mui/material/SwipeableDrawer'
+
+const SwipeableDrawer = styled(MuiSwipeableDrawer)({
+  overflowX: 'hidden',
+  transition: 'width .25s ease-in-out',
+  '& ul': {
+    listStyle: 'none'
+  },
+  '& .MuiListItem-gutters': {
+    paddingLeft: 4,
+    paddingRight: 4
+  },
+  '& .MuiDrawer-paper': {
+    left: 'unset',
+    right: 'unset',
+    overflowX: 'hidden',
+    transition: 'width .25s ease-in-out, box-shadow .25s ease-in-out'
+  }
+})
+
+const Drawer = props => {
+  // ** Props
+  const {
+    hidden,
+    children,
+    navHover,
+    navWidth,
+    settings,
+    navVisible,
+    setNavHover,
+    setNavVisible,
+    collapsedNavWidth,
+    navigationBorderWidth
+  } = props
+
+  // ** Hook
+  const theme = useTheme()
+
+  // ** Vars
+  const { skin, navCollapsed } = settings
+
+  const drawerColor = () => {
+    if (skin === 'semi-dark' && theme.palette.mode === 'light') {
+      return {
+        '& .MuiTypography-root': {
+          color: `${theme.palette.customColors.dark}`
+        }
+      }
+    } else if (skin === 'semi-dark' && theme.palette.mode === 'dark') {
+      return {
+        '& .MuiTypography-root': {
+          color: `${theme.palette.customColors.light}`
+        }
+      }
+    } else return {}
+  }
+
+  const drawerBgColor = () => {
+    if (skin === 'semi-dark' && theme.palette.mode === 'light') {
+      return {
+        backgroundColor: theme.palette.customColors.darkBg
+      }
+    } else if (skin === 'semi-dark' && theme.palette.mode === 'dark') {
+      return {
+        backgroundColor: theme.palette.customColors.lightBg
+      }
+    } else {
+      return {
+        backgroundColor: theme.palette.background.default
+      }
+    }
+  }
+
+  // Drawer Props for Mobile & Tablet screens
+  const MobileDrawerProps = {
+    open: navVisible,
+    onOpen: () => setNavVisible(true),
+    onClose: () => setNavVisible(false),
+    ModalProps: {
+      keepMounted: true // Better open performance on mobile.
+    }
+  }
+
+  // Drawer Props for Desktop screens
+  const DesktopDrawerProps = {
+    open: true,
+    onOpen: () => null,
+    onClose: () => null,
+    onMouseEnter: () => {
+      setNavHover(true)
+    },
+    onMouseLeave: () => {
+      setNavHover(false)
+    }
+  }
+
+  return (
+    <SwipeableDrawer
+      className='layout-vertical-nav'
+      variant={hidden ? 'temporary' : 'permanent'}
+      {...(hidden ? { ...MobileDrawerProps } : { ...DesktopDrawerProps })}
+      sx={{
+        width: navCollapsed ? collapsedNavWidth : navWidth
+      }}
+      PaperProps={{
+        sx: {
+          ...drawerColor(),
+          ...drawerBgColor(),
+          width: navCollapsed && !navHover ? collapsedNavWidth : navWidth,
+          ...(!hidden && navCollapsed && navHover ? { boxShadow: 10 } : {}),
+          borderRight: navigationBorderWidth === 0 ? 0 : `${navigationBorderWidth}px solid ${theme.palette.divider}`
+        }
+      }}
+    >
+      {children}
+    </SwipeableDrawer>
+  )
+}
+
+export default Drawer

package/src/@core/layouts/components/vertical/navigation/VerticalNavGroup.js

@@ -0,0 +1,435 @@
+// ** React Imports
+import { useEffect, Fragment, useContext } from 'react'
+
+// ** Next Import
+import { useRouter } from 'next/router'
+
+// ** MUI Imports
+import Chip from '@mui/material/Chip'
+import Collapse from '@mui/material/Collapse'
+import ListItem from '@mui/material/ListItem'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import { styled, useTheme } from '@mui/material/styles'
+import ListItemButton from '@mui/material/ListItemButton'
+
+// ** Third Party Imports
+import clsx from 'clsx'
+
+// ** Icons Imports
+import ChevronLeft from 'mdi-material-ui/ChevronLeft'
+import ChevronRight from 'mdi-material-ui/ChevronRight'
+
+// ** Configs Import
+import themeConfig from 'src/configs/themeConfig'
+
+// ** Context Import
+import { SystemContext } from 'src/context/SystemContext'
+
+// ** Utils
+import { hasActiveChild, removeChildren } from 'src/@core/layouts/utils'
+
+// ** Custom Components Imports
+import VerticalNavItems from './VerticalNavItems'
+import UserIcon from 'src/layouts/components/UserIcon'
+import Translations from 'src/layouts/components/Translations'
+import CanViewNavGroup from 'src/layouts/components/acl/CanViewNavGroup'
+
+const MenuItemTextWrapper = styled(Box)(() => ({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'space-between',
+  transition: 'opacity .25s ease-in-out',
+  ...(themeConfig.menuTextTruncate && { overflow: 'hidden' })
+}))
+
+const MenuGroupToggleRightIcon = styled(ChevronRight)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  transition: 'transform .25s ease-in-out'
+}))
+
+const MenuGroupToggleLeftIcon = styled(ChevronLeft)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  transition: 'transform .25s ease-in-out'
+}))
+
+const VerticalNavGroup = props => {
+  // ** Props
+  const {
+    item,
+    parent,
+    settings,
+    navHover,
+    navVisible,
+    isSubToSub,
+    groupActive,
+    setGroupActive,
+    collapsedNavWidth,
+    currentActiveGroup,
+    setCurrentActiveGroup,
+    navigationBorderWidth
+  } = props
+
+  // ** Hooks & Vars
+  const theme = useTheme()
+  const router = useRouter()
+  const systemContext = useContext(SystemContext)
+  const currentURL = router.pathname
+  const { skin, direction, navCollapsed, verticalNavToggleType } = settings
+
+  // ** Resolve friendly URL based on item type
+  const getItemHref = () => {
+    const navType = item.type || (item.viewId ? 'dynamic' : item.path ? 'static' : null)
+
+    // Static route: use path directly
+    if (navType === 'static' && item.path) {
+      return item.path
+    }
+
+    // Dynamic route: use registry for friendly URL
+    if (navType === 'dynamic' && item.viewId) {
+      const registry = systemContext.nav?.registry || {}
+      const view = registry[item.viewId]
+
+      if (view && view.slug) {
+        return `/${view.slug}`
+      }
+
+      // Fallback to viewer route
+      return `/viewer/${item.viewId}`
+    }
+
+    // External route
+    if (navType === 'external' && item.externalUrl) {
+      return item.externalUrl
+    }
+
+    // Fallback: if only viewId exists, try registry first
+    if (item.viewId) {
+      const registry = systemContext.nav?.registry || {}
+      const view = registry[item.viewId]
+
+      if (view && view.slug) {
+        return `/${view.slug}`
+      }
+
+      return `/viewer/${item.viewId}`
+    }
+
+    // Default fallback
+    return item.path || null
+  }
+
+  // ** Accordion menu group open toggle
+  const toggleActiveGroup = (item, parent) => {
+    let openGroup = groupActive
+
+    // ** If Group is already open and clicked, close the group
+    if (openGroup.includes(item.title)) {
+      openGroup.splice(openGroup.indexOf(item.title), 1)
+
+      // If clicked Group has open group children, Also remove those children to close those groups
+      if (item.children) {
+        removeChildren(item.children, openGroup, currentActiveGroup)
+      }
+    } else if (parent) {
+      // ** If Group clicked is the child of an open group, first remove all the open groups under that parent
+      if (parent.children) {
+        removeChildren(parent.children, openGroup, currentActiveGroup)
+      }
+
+      // ** After removing all the open groups under that parent, add the clicked group to open group array
+      if (!openGroup.includes(item.title)) {
+        openGroup.push(item.title)
+      }
+    } else {
+      // ** If clicked on another group that is not active or open, create openGroup array from scratch
+      // ** Empty Open Group array
+      openGroup = []
+
+      // ** push Current Active Group To Open Group array
+      if (currentActiveGroup.every(elem => groupActive.includes(elem))) {
+        openGroup.push(...currentActiveGroup)
+      }
+
+      // ** Push current clicked group item to Open Group array
+      if (!openGroup.includes(item.title)) {
+        openGroup.push(item.title)
+      }
+    }
+    setGroupActive([...openGroup])
+  }
+
+  // ** Menu Group Click
+  const handleGroupClick = (event) => {
+    // Check if group has a clickable path/viewId
+    const href = getItemHref()
+
+    // If clicking on chevron icon area, toggle menu
+    if (event.target.closest('.chevron-icon')) {
+      const openGroup = groupActive
+      if (verticalNavToggleType === 'collapse') {
+        if (openGroup.includes(item.title)) {
+          openGroup.splice(openGroup.indexOf(item.title), 1)
+        } else {
+          openGroup.push(item.title)
+        }
+        setGroupActive([...openGroup])
+      } else {
+        toggleActiveGroup(item, parent)
+      }
+      return
+    }
+
+    // If group has a path and not an external link, navigate
+    if (href && item.type !== 'external') {
+      router.push(href)
+      return
+    }
+
+    // If external link, open in new tab
+    if (item.type === 'external' && item.externalUrl) {
+      window.open(item.externalUrl, item.openInNewTab !== false ? '_blank' : '_self')
+      return
+    }
+
+    // Otherwise, toggle menu
+    const openGroup = groupActive
+    if (verticalNavToggleType === 'collapse') {
+      if (openGroup.includes(item.title)) {
+        openGroup.splice(openGroup.indexOf(item.title), 1)
+      } else {
+        openGroup.push(item.title)
+      }
+      setGroupActive([...openGroup])
+    } else {
+      toggleActiveGroup(item, parent)
+    }
+  }
+
+  const handleChevronClick = (event) => {
+    event.stopPropagation()
+    const openGroup = groupActive
+    if (verticalNavToggleType === 'collapse') {
+      if (openGroup.includes(item.title)) {
+        openGroup.splice(openGroup.indexOf(item.title), 1)
+      } else {
+        openGroup.push(item.title)
+      }
+      setGroupActive([...openGroup])
+    } else {
+      toggleActiveGroup(item, parent)
+    }
+  }
+  useEffect(() => {
+    if (hasActiveChild(item, currentURL)) {
+      if (!groupActive.includes(item.title)) groupActive.push(item.title)
+    } else {
+      const index = groupActive.indexOf(item.title)
+      if (index > -1) groupActive.splice(index, 1)
+    }
+    setGroupActive([...groupActive])
+    setCurrentActiveGroup([...groupActive])
+
+    // Empty Active Group When Menu is collapsed and not hovered, to fix issue route change
+    if (navCollapsed && !navHover) {
+      setGroupActive([])
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.asPath])
+  useEffect(() => {
+    if (navCollapsed && !navHover) {
+      setGroupActive([])
+    }
+    if ((navCollapsed && navHover) || (groupActive.length === 0 && !navCollapsed)) {
+      setGroupActive([...currentActiveGroup])
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navCollapsed, navHover])
+  useEffect(() => {
+    if (groupActive.length === 0 && !navCollapsed) {
+      setGroupActive([])
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navHover])
+  const IconTag = parent && !item.icon ? themeConfig.navSubItemIcon : item.icon
+  const menuGroupCollapsedStyles = navCollapsed && !navHover ? { opacity: 0 } : { opacity: 1 }
+
+  const conditionalIconColor = () => {
+    if (skin === 'semi-dark' && theme.palette.mode === 'light') {
+      return {
+        color: `rgba(${theme.palette.customColors.dark}, ${parent && item.children ? 0.68 : 0.87})`
+      }
+    } else if (skin === 'semi-dark' && theme.palette.mode === 'dark') {
+      return {
+        color: `rgba(${theme.palette.customColors.light}, ${parent && item.children ? 0.68 : 0.87})`
+      }
+    } else
+      return {
+        color: parent && item.children ? theme.palette.text.secondary : theme.palette.text.primary
+      }
+  }
+
+  const conditionalArrowIconColor = () => {
+    if (skin === 'semi-dark' && theme.palette.mode === 'light') {
+      return {
+        color: `rgba(${theme.palette.customColors.dark}, 0.68)`
+      }
+    } else if (skin === 'semi-dark' && theme.palette.mode === 'dark') {
+      return {
+        color: `rgba(${theme.palette.customColors.light}, 0.68)`
+      }
+    } else return {}
+  }
+
+  const conditionalBgColor = () => {
+    if (skin === 'semi-dark' && theme.palette.mode === 'light') {
+      return {
+        '&:hover': {
+          backgroundColor: `rgba(${theme.palette.customColors.dark}, 0.05)`
+        },
+        '&.Mui-selected': {
+          backgroundColor: `rgba(${theme.palette.customColors.dark}, 0.08)`,
+          '&:hover': {
+            backgroundColor: `rgba(${theme.palette.customColors.dark}, 0.08)`
+          }
+        }
+      }
+    } else if (skin === 'semi-dark' && theme.palette.mode === 'dark') {
+      return {
+        '&:hover': {
+          backgroundColor: `rgba(${theme.palette.customColors.light}, 0.05)`
+        },
+        '&.Mui-selected': {
+          backgroundColor: `rgba(${theme.palette.customColors.light}, 0.08)`,
+          '&:hover': {
+            backgroundColor: `rgba(${theme.palette.customColors.light}, 0.08)`
+          }
+        }
+      }
+    } else {
+      return {
+        '&.Mui-selected': {
+          backgroundColor: theme.palette.action.selected,
+          '&:hover': {
+            backgroundColor: theme.palette.action.selected
+          }
+        }
+      }
+    }
+  }
+
+  return (
+    <CanViewNavGroup navGroup={item}>
+      <Fragment>
+        <ListItem
+          disablePadding
+          className='nav-group'
+          onClick={handleGroupClick}
+          sx={{
+            mt: 1.5,
+            flexDirection: 'column',
+            transition: 'padding .25s ease-in-out',
+            px:
+              parent && item.children
+                ? '0 !important'
+                : `${theme.spacing(navCollapsed && !navHover ? 2 : 3)} !important`
+          }}
+        >
+          <ListItemButton
+            className={clsx({
+              'Mui-selected': groupActive.includes(item.title) || currentActiveGroup.includes(item.title)
+            })}
+            sx={{
+              py: 2.25,
+              width: '100%',
+              borderRadius: '8px',
+              ...conditionalBgColor(),
+              transition: 'padding-left .25s ease-in-out',
+              pr: navCollapsed && !navHover ? (collapsedNavWidth - navigationBorderWidth - 24 - 16) / 8 : 3,
+              pl: navCollapsed && !navHover ? (collapsedNavWidth - navigationBorderWidth - 24 - 16) / 8 : 4
+            }}
+          >
+            {isSubToSub ? null : (
+              <ListItemIcon
+                sx={{
+                  ...conditionalIconColor(),
+                  transition: 'margin .25s ease-in-out',
+                  ...(parent && navCollapsed && !navHover ? {} : { mr: 2 }),
+                  ...(navCollapsed && !navHover ? { mr: 0 } : {}),
+                  ...(parent && item.children ? { ml: 2, mr: 4 } : {})
+                }}
+              >
+                <UserIcon
+                  icon={IconTag}
+                  componentType='vertical-menu'
+                  iconProps={{ sx: { ...(parent ? { fontSize: '0.5rem' } : {}) } }}
+                />
+              </ListItemIcon>
+            )}
+            <MenuItemTextWrapper sx={{ ...menuGroupCollapsedStyles, ...(isSubToSub ? { ml: 8 } : {}) }}>
+              <Typography
+                {...((themeConfig.menuTextTruncate || (!themeConfig.menuTextTruncate && navCollapsed && !navHover)) && {
+                  noWrap: true
+                })}
+              >
+                <Translations text={item.title} />
+              </Typography>
+              <Box className='menu-item-meta' sx={{ ml: 1.5, display: 'flex', alignItems: 'center' }}>
+                {item.badgeContent ? (
+                  <Chip
+                    size='small'
+                    label={item.badgeContent}
+                    color={item.badgeColor || 'primary'}
+                    sx={{ mr: 0.75, '& .MuiChip-label': { px: 2.5, lineHeight: 1.385, textTransform: 'capitalize' } }}
+                  />
+                ) : null}
+                <Box className='chevron-icon' onClick={handleChevronClick}>
+                  {direction === 'ltr' ? (
+                    <MenuGroupToggleRightIcon
+                      sx={{
+                        ...conditionalArrowIconColor(),
+                        cursor: 'pointer',
+                        ...(groupActive.includes(item.title) ? { transform: 'rotate(90deg)' } : {})
+                      }}
+                    />
+                  ) : (
+                    <MenuGroupToggleLeftIcon
+                      sx={{
+                        ...conditionalArrowIconColor(),
+                        cursor: 'pointer',
+                        ...(groupActive.includes(item.title) ? { transform: 'rotate(-90deg)' } : {})
+                      }}
+                    />
+                  )}
+                </Box>
+              </Box>
+            </MenuItemTextWrapper>
+          </ListItemButton>
+          <Collapse
+            component='ul'
+            onClick={e => e.stopPropagation()}
+            in={groupActive.includes(item.title)}
+            sx={{
+              pl: 0,
+              width: '100%',
+              ...menuGroupCollapsedStyles,
+              transition: 'all .25s ease-in-out'
+            }}
+          >
+            <VerticalNavItems
+              {...props}
+              parent={item}
+              navVisible={navVisible}
+              verticalNavItems={item.children}
+              isSubToSub={parent && item.children ? item : undefined}
+            />
+          </Collapse>
+        </ListItem>
+      </Fragment>
+    </CanViewNavGroup>
+  )
+}
+
+export default VerticalNavGroup