robobyte-front-builder 1.0.0

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

@@ -0,0 +1,180 @@
+// ** Next Import
+import Link from 'next/link'
+
+// ** MUI Imports
+import IconButton from '@mui/material/IconButton'
+import Box from '@mui/material/Box'
+import { styled, useTheme } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+
+// ** Icons
+import Close from 'mdi-material-ui/Close'
+
+// ** Configs
+import themeConfig from 'src/configs/themeConfig'
+
+// ** Styled Components
+const MenuHeaderWrapper = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  paddingRight: theme.spacing(4),
+  justifyContent: 'space-between',
+  transition: 'padding .25s ease-in-out',
+  minHeight: theme.mixins.toolbar.minHeight
+}))
+
+const HeaderTitle = styled(Typography)({
+  fontWeight: 700,
+  lineHeight: 1.2,
+  transition: 'opacity .25s ease-in-out, margin .25s ease-in-out'
+})
+
+const StyledLink = styled('a')({
+  display: 'flex',
+  alignItems: 'center',
+  textDecoration: 'none'
+})
+
+const VerticalNavHeader = props => {
+  // ** Props
+  const {
+    hidden,
+    navHover,
+    settings,
+    saveSettings,
+    collapsedNavWidth,
+    toggleNavVisibility,
+    navigationBorderWidth,
+    menuLockedIcon: userMenuLockedIcon,
+    menuUnlockedIcon: userMenuUnlockedIcon,
+    verticalNavMenuBranding: userVerticalNavMenuBranding
+  } = props
+
+  // ** Hooks & Vars
+  const theme = useTheme()
+  const { skin, direction, navCollapsed } = settings
+  const menuCollapsedStyles = navCollapsed && !navHover ? { opacity: 0 } : { opacity: 1 }
+
+  const svgFillSecondary = () => {
+    if (skin === 'semi-dark' && theme.palette.mode === 'light') {
+      return `rgba(${theme.palette.customColors.dark}, 0.68)`
+    } else if (skin === 'semi-dark' && theme.palette.mode === 'dark') {
+      return `rgba(${theme.palette.customColors.light}, 0.68)`
+    } else {
+      return theme.palette.text.secondary
+    }
+  }
+
+  const svgFillDisabled = () => {
+    if (skin === 'semi-dark' && theme.palette.mode === 'light') {
+      return `rgba(${theme.palette.customColors.dark}, 0.38)`
+    } else if (skin === 'semi-dark' && theme.palette.mode === 'dark') {
+      return `rgba(${theme.palette.customColors.light}, 0.38)`
+    } else {
+      return theme.palette.text.disabled
+    }
+  }
+
+  const menuHeaderPaddingLeft = () => {
+    if (navCollapsed && !navHover) {
+      if (userVerticalNavMenuBranding) {
+        return 0
+      } else {
+        return (collapsedNavWidth - navigationBorderWidth - 40) / 8
+      }
+    } else {
+      return 5.5
+    }
+  }
+
+  const svgRotationDeg = () => {
+    if (navCollapsed) {
+      if (direction === 'rtl') {
+        if (navHover) {
+          return 0
+        } else {
+          return 180
+        }
+      } else {
+        if (navHover) {
+          return 180
+        } else {
+          return 0
+        }
+      }
+    } else {
+      if (direction === 'rtl') {
+        return 180
+      } else {
+        return 0
+      }
+    }
+  }
+
+  return (
+    <MenuHeaderWrapper className='nav-header' sx={{ pl: menuHeaderPaddingLeft() }}>
+      {userVerticalNavMenuBranding ? (
+        userVerticalNavMenuBranding(props)
+      ) : (
+        <Link href='/' passHref>
+          <StyledLink>
+            {/*<img src={'/images/appicon.png'} width={40} />*/}
+            <HeaderTitle variant='h6' sx={{ ...menuCollapsedStyles, ...(navCollapsed && !navHover ? {} : { ml: 2 }) }}>
+                {themeConfig.templateName}
+            </HeaderTitle>
+          </StyledLink>
+        </Link>
+      )}
+
+      {hidden ? (
+        <IconButton
+          disableRipple
+          disableFocusRipple
+          onClick={toggleNavVisibility}
+          sx={{ p: 0, backgroundColor: 'transparent !important' }}
+        >
+          <Close fontSize='small' />
+        </IconButton>
+      ) : (
+        <IconButton
+          disableRipple
+          disableFocusRipple
+          onClick={() => saveSettings({ ...settings, navCollapsed: !navCollapsed })}
+          sx={{ p: 0, color: 'text.primary', backgroundColor: 'transparent !important' }}
+        >
+          {userMenuLockedIcon && userMenuUnlockedIcon ? (
+            navCollapsed ? (
+              userMenuUnlockedIcon
+            ) : (
+              userMenuLockedIcon
+            )
+          ) : (
+            <Box
+              width={22}
+              fill='none'
+              height={22}
+              component='svg'
+              viewBox='0 0 22 22'
+              xmlns='http://www.w3.org/2000/svg'
+              sx={{
+                transform: `rotate(${svgRotationDeg()}deg)`,
+                transition: 'transform .25s ease-in-out .35s'
+              }}
+            >
+              <path
+                fill={svgFillSecondary()}
+                d='M11.4854 4.88844C11.0082 4.41121 10.2344 4.41121 9.75716 4.88844L4.51029 10.1353C4.03299 10.6126 4.03299 11.3865 4.51029 11.8638L9.75716 17.1107C10.2344 17.5879 11.0082 17.5879 11.4854 17.1107C11.9626 16.6334 11.9626 15.8597 11.4854 15.3824L7.96674 11.8638C7.48943 11.3865 7.48943 10.6126 7.96674 10.1353L11.4854 6.61667C11.9626 6.13943 11.9626 5.36568 11.4854 4.88844Z'
+              />
+              <path
+                fill={svgFillDisabled()}
+                d='M15.8683 4.88844L10.6214 10.1353C10.1441 10.6126 10.1441 11.3865 10.6214 11.8638L15.8683 17.1107C16.3455 17.5879 17.1193 17.5879 17.5965 17.1107C18.0737 16.6334 18.0737 15.8597 17.5965 15.3824L14.0779 11.8638C13.6005 11.3865 13.6005 10.6126 14.0779 10.1353L17.5965 6.61667C18.0737 6.13943 18.0737 5.36568 17.5965 4.88844C17.1193 4.41121 16.3455 4.41121 15.8683 4.88844Z'
+              />
+            </Box>
+          )}
+        </IconButton>
+      )}
+    </MenuHeaderWrapper>
+  )
+}
+
+export default VerticalNavHeader

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

@@ -0,0 +1,26 @@
+// ** Custom Menu Components
+import VerticalNavLink from './VerticalNavLink'
+import VerticalNavGroup from './VerticalNavGroup'
+import VerticalNavSectionTitle from './VerticalNavSectionTitle'
+
+const resolveNavItemComponent = item => {
+  if (item.sectionTitle) return VerticalNavSectionTitle
+  if (item.children) return VerticalNavGroup
+
+  return VerticalNavLink
+}
+
+const VerticalNavItems = props => {
+  // ** Props
+  const { verticalNavItems } = props
+
+  const RenderMenuItems = verticalNavItems?.map((item, index) => {
+    const TagName = resolveNavItemComponent(item)
+
+    return <TagName {...props} key={index} item={item} />
+  })
+
+  return <>{RenderMenuItems}</>
+}
+
+export default VerticalNavItems

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

@@ -0,0 +1,258 @@
+// ** Next Imports
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+// ** React Imports
+import { useContext } from 'react'
+
+// ** MUI Imports
+import Chip from '@mui/material/Chip'
+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'
+
+// ** Configs Import
+import themeConfig from 'src/configs/themeConfig'
+
+// ** Custom Components Imports
+import UserIcon from 'src/layouts/components/UserIcon'
+import Translations from 'src/layouts/components/Translations'
+import CanViewNavLink from 'src/layouts/components/acl/CanViewNavLink'
+
+// ** Context Import
+import { SystemContext } from 'src/context/SystemContext'
+
+// ** Utils
+import { handleURLQueries } from 'src/@core/layouts/utils'
+
+// ** Styled Components
+const MenuNavLink = styled(ListItemButton)(({ theme }) => ({
+  width: '100%',
+  borderRadius: 8,
+  transition: 'padding-left .25s ease-in-out',
+  '&.active': {
+    '&, &:hover': {
+      backgroundColor: theme.palette.primary.light
+    },
+    '& .MuiTypography-root': {
+      fontWeight: 500,
+      color: `${theme.palette.common.white} !important`
+    },
+    '& .MuiListItemIcon-root': {
+      color: `${theme.palette.common.white} !important`
+    }
+  }
+}))
+
+const MenuItemTextMetaWrapper = styled(Box)({
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  transition: 'opacity .25s ease-in-out',
+  ...(themeConfig.menuTextTruncate && { overflow: 'hidden' })
+})
+
+const VerticalNavLink = ({
+  item,
+  parent,
+  navHover,
+  settings,
+  navVisible,
+  isSubToSub,
+  collapsedNavWidth,
+  toggleNavVisibility,
+  navigationBorderWidth
+}) => {
+  // ** Hooks
+  const theme = useTheme()
+  const router = useRouter()
+  const systemContext = useContext(SystemContext)
+
+  // ** Vars
+  const { skin, navCollapsed } = settings
+  const IconTag = parent && !item.icon ? themeConfig.navSubItemIcon : item.icon
+
+  // ** 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 || '/'
+  }
+
+  const conditionalIconColor = () => {
+    if (skin === 'semi-dark' && theme.palette.mode === 'light') {
+      return {
+        color: `rgba(${theme.palette.customColors.dark}, ${parent ? 0.68 : 0.87})`
+      }
+    } else if (skin === 'semi-dark' && theme.palette.mode === 'dark') {
+      return {
+        color: `rgba(${theme.palette.customColors.light}, ${parent ? 0.68 : 0.87})`
+      }
+    } else
+      return {
+        color: parent ? theme.palette.text.secondary : theme.palette.text.primary
+      }
+  }
+
+  const conditionalBgColor = () => {
+    if (skin === 'semi-dark' && theme.palette.mode === 'light') {
+      return {
+        '&:hover': {
+          backgroundColor: `rgba(${theme.palette.customColors.dark}, 0.05)`
+        }
+      }
+    } else if (skin === 'semi-dark' && theme.palette.mode === 'dark') {
+      return {
+        '&:hover': {
+          backgroundColor: `rgba(${theme.palette.customColors.light}, 0.05)`
+        }
+      }
+    } else return {}
+  }
+
+  const isNavLinkActive = () => {
+    const href = getItemHref()
+    if (router.pathname === item.path || router.asPath === href || handleURLQueries(router, item.path)) {
+      return true
+    } else {
+      return false
+    }
+  }
+
+  const handleClick = (e) => {
+    if (item.path === undefined && !item.viewId) {
+      e.preventDefault()
+      e.stopPropagation()
+      return
+    }
+
+    // Handle external links
+    if (item.type === 'external' && item.externalUrl) {
+      e.preventDefault()
+      window.open(item.externalUrl, item.openInNewTab !== false ? '_blank' : '_self')
+      return
+    }
+
+    if (navVisible) {
+      toggleNavVisibility()
+    }
+  }
+
+  return (
+    <CanViewNavLink navLink={item}>
+      <ListItem
+        disablePadding
+        className='nav-link'
+        disabled={item.disabled || false}
+        sx={{
+          mt: 1.5,
+          transition: 'padding .25s ease-in-out',
+          px: parent ? '0 !important' : `${theme.spacing(navCollapsed && !navHover ? 2 : 3)} !important`
+        }}
+      >
+        <Link passHref href={getItemHref()}>
+          <MenuNavLink
+            component={'a'}
+            className={isNavLinkActive() ? 'active' : ''}
+            {...(item.openInNewTab ? { target: '_blank' } : null)}
+            onClick={handleClick}
+            sx={{
+              py: 2.25,
+              ...conditionalBgColor(),
+              ...(item.disabled ? { pointerEvents: 'none' } : { cursor: 'pointer' }),
+              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',
+                  ...(navCollapsed && !navHover ? { mr: 0 } : { mr: 2 }),
+                  ...(parent ? { ml: 2, mr: 4 } : {}) // This line should be after (navCollapsed && !navHover) condition for proper styling
+                }}
+              >
+                <UserIcon
+                  icon={IconTag}
+                  componentType='vertical-menu'
+                  iconProps={{
+                    sx: {
+                      ...(!parent ? { fontSize: '1.5rem' } : { fontSize: '0.5rem' }),
+                      ...(parent && item.icon ? { fontSize: '0.875rem' } : {})
+                    }
+                  }}
+                />
+              </ListItemIcon>
+            )}
+
+            <MenuItemTextMetaWrapper
+              sx={{
+                ...(isSubToSub ? { ml: 8 } : {}),
+                ...(navCollapsed && !navHover ? { opacity: 0 } : { opacity: 1 })
+              }}
+            >
+              <Typography
+                {...((themeConfig.menuTextTruncate || (!themeConfig.menuTextTruncate && navCollapsed && !navHover)) && {
+                  noWrap: true
+                })}
+              >
+                <Translations text={item.title} />
+              </Typography>
+              {item.badgeContent ? (
+                <Chip
+                  size='small'
+                  label={item.badgeContent}
+                  color={item.badgeColor || 'primary'}
+                  sx={{ ml: 1.5, '& .MuiChip-label': { px: 2.5, lineHeight: 1.385, textTransform: 'capitalize' } }}
+                />
+              ) : null}
+            </MenuItemTextMetaWrapper>
+          </MenuNavLink>
+        </Link>
+      </ListItem>
+    </CanViewNavLink>
+  )
+}
+
+export default VerticalNavLink

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

@@ -0,0 +1,102 @@
+// ** MUI Imports
+import Divider from '@mui/material/Divider'
+import Typography from '@mui/material/Typography'
+import { styled, useTheme } from '@mui/material/styles'
+import MuiListSubheader from '@mui/material/ListSubheader'
+
+// ** Custom Components Imports
+import Translations from 'src/layouts/components/Translations'
+import CanViewNavSectionTitle from 'src/layouts/components/acl/CanViewNavSectionTitle'
+
+// ** Styled Components
+const ListSubheader = styled(props => <MuiListSubheader component='li' {...props} />)(({ theme }) => ({
+  lineHeight: 1,
+  display: 'flex',
+  position: 'static',
+  padding: theme.spacing(3),
+  marginTop: theme.spacing(6.25),
+  backgroundColor: 'transparent',
+  color: theme.palette.text.disabled,
+  transition: 'padding-left .25s ease-in-out'
+}))
+
+const VerticalNavSectionTitle = props => {
+  // ** Props
+  const { item, navHover, settings, collapsedNavWidth, navigationBorderWidth } = props
+
+  // ** Hook
+  const theme = useTheme()
+
+  // ** Vars
+  const { skin, navCollapsed } = settings
+
+  const conditionalBorderColor = () => {
+    if (skin === 'semi-dark' && theme.palette.mode === 'light') {
+      return {
+        '&, &:before': {
+          borderColor: `rgba(${theme.palette.customColors.dark}, 0.12)`
+        }
+      }
+    } else if (skin === 'semi-dark' && theme.palette.mode === 'dark') {
+      return {
+        '&, &:before': {
+          borderColor: `rgba(${theme.palette.customColors.light}, 0.12)`
+        }
+      }
+    } else return {}
+  }
+
+  const conditionalColor = () => {
+    if (skin === 'semi-dark' && theme.palette.mode === 'light') {
+      return {
+        color: `rgba(${theme.palette.customColors.dark}, 0.38) !important`
+      }
+    } else if (skin === 'semi-dark' && theme.palette.mode === 'dark') {
+      return {
+        color: `rgba(${theme.palette.customColors.light}, 0.38) !important`
+      }
+    } else {
+      return {
+        color: theme.palette.text.disabled
+      }
+    }
+  }
+
+  return (
+    <CanViewNavSectionTitle navTitle={item}>
+      <ListSubheader
+        className='nav-section-title'
+        sx={{
+          ...(navCollapsed && !navHover
+            ? { py: 4.75, px: (collapsedNavWidth - navigationBorderWidth - 22) / 8 }
+            : { pl: 0 })
+        }}
+      >
+        <Divider
+          textAlign='left'
+          sx={{
+            m: 0,
+            lineHeight: 'normal',
+            ...conditionalBorderColor(),
+            '&:after': { display: 'none' },
+            ...(navCollapsed && !navHover
+              ? { width: 22 }
+              : {
+                  width: '100%',
+                  '&:before': { top: 7, transform: 'none', width: theme.spacing(4) },
+                  '& .MuiDivider-wrapper': { px: 4, fontSize: '0.75rem', letterSpacing: '0.21px' }
+                })
+          }}
+        >
+          {navCollapsed && !navHover ? null : (
+            <Typography noWrap variant='caption' sx={{ ...conditionalColor() }}>
+              <Translations text={item.sectionTitle} />
+            </Typography>
+          )}
+        </Divider>
+      </ListSubheader>
+    </CanViewNavSectionTitle>
+  )
+}
+
+export default VerticalNavSectionTitle