robobyte-front-builder 1.0.0

package/src/@core/layouts/components/horizontal/navigation/HorizontalNavGroup.js

@@ -0,0 +1,352 @@
+// ** React Imports
+import { useState, useEffect, Fragment, useContext } from 'react'
+
+// ** Next Import
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+
+// ** MUI Imports
+import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
+import Fade from '@mui/material/Fade'
+import List from '@mui/material/List'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import { styled, useTheme } from '@mui/material/styles'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import MuiListItem from '@mui/material/ListItem'
+
+// ** Third Party Imports
+import clsx from 'clsx'
+import { usePopper } from 'react-popper'
+
+// ** Icons Imports
+import ChevronDown from 'mdi-material-ui/ChevronDown'
+import ChevronLeft from 'mdi-material-ui/ChevronLeft'
+import ChevronRight from 'mdi-material-ui/ChevronRight'
+
+// ** Theme Config Import
+import themeConfig from 'src/configs/themeConfig'
+
+// ** Custom Components Imports
+import HorizontalNavItems from './HorizontalNavItems'
+import UserIcon from 'src/layouts/components/UserIcon'
+import Translations from 'src/layouts/components/Translations'
+import CanViewNavGroup from 'src/layouts/components/acl/CanViewNavGroup'
+
+// ** Context Import
+import { SystemContext } from 'src/context/SystemContext'
+
+// ** Utils
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+import { hasActiveChild } from 'src/@core/layouts/utils'
+
+// ** Styled Components
+const ListItem = styled(MuiListItem)(({ theme }) => ({
+  cursor: 'pointer',
+  paddingTop: theme.spacing(2.25),
+  paddingBottom: theme.spacing(2.25),
+  '&:hover': {
+    background: theme.palette.action.hover
+  }
+}))
+
+const NavigationMenu = styled(Paper)(({ theme }) => ({
+  overflowY: 'auto',
+  padding: theme.spacing(2, 0),
+  backgroundColor: theme.palette.background.paper,
+  ...(themeConfig.menuTextTruncate ? { width: 260 } : { minWidth: 260 }),
+  '&::-webkit-scrollbar': {
+    width: 6
+  },
+  '&::-webkit-scrollbar-thumb': {
+    borderRadius: 20,
+    background: hexToRGBA(theme.palette.mode === 'light' ? '#BFBFD5' : '#57596C', 0.6)
+  },
+  '&::-webkit-scrollbar-track': {
+    borderRadius: 20,
+    background: 'transparent'
+  },
+  '& .MuiList-root': {
+    paddingTop: 0,
+    paddingBottom: 0
+  },
+  '& .menu-group.Mui-selected': {
+    borderRadius: 0,
+    backgroundColor: theme.palette.action.hover
+  }
+}))
+
+const HorizontalNavGroup = props => {
+  // ** Props
+  const { item, hasParent, settings } = props
+
+  // ** Hooks & Vars
+  const theme = useTheme()
+  const router = useRouter()
+  const systemContext = useContext(SystemContext)
+  const currentURL = router.pathname
+  const { skin, direction } = settings
+  const { navSubItemIcon, menuTextTruncate, horizontalMenuToggle, horizontalMenuAnimation } = themeConfig
+  const popperOffsetHorizontal = direction === 'rtl' ? 16 : -16
+  const popperPlacement = direction === 'rtl' ? 'bottom-end' : 'bottom-start'
+  const popperPlacementSubMenu = direction === 'rtl' ? 'left-start' : 'right-start'
+
+  // ** States
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [popperElement, setPopperElement] = useState(null)
+  const [anchorEl, setAnchorEl] = useState(null)
+  const [referenceElement, setReferenceElement] = useState(null)
+
+  // ** 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
+  }
+
+  const { styles, attributes, update } = usePopper(referenceElement, popperElement, {
+    placement: hasParent ? popperPlacementSubMenu : popperPlacement,
+    modifiers: [
+      {
+        enabled: true,
+        name: 'offset',
+        options: {
+          offset: hasParent ? [-8, 15] : [popperOffsetHorizontal, 5]
+        }
+      }
+    ]
+  })
+
+  const handleGroupOpen = event => {
+    setAnchorEl(event.currentTarget)
+    setMenuOpen(true)
+    update ? update() : null
+  }
+
+  const handleGroupClose = () => {
+    setAnchorEl(null)
+    setMenuOpen(false)
+  }
+
+  const handleGroupItemClick = event => {
+    // Check if group has a clickable path/viewId
+    const href = getItemHref()
+
+    // If clicking on chevron icon, toggle menu
+    if (event.target.closest('.chevron-icon')) {
+      if (anchorEl) {
+        handleGroupClose()
+      } else {
+        handleGroupOpen(event)
+      }
+      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 (for click mode)
+    if (horizontalMenuToggle === 'click') {
+      if (anchorEl) {
+        handleGroupClose()
+      } else {
+        handleGroupOpen(event)
+      }
+    }
+  }
+
+  const handleChevronClick = (event) => {
+    event.stopPropagation()
+    if (anchorEl) {
+      handleGroupClose()
+    } else {
+      handleGroupOpen(event)
+    }
+  }
+
+  useEffect(() => {
+    handleGroupClose()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.asPath])
+  const IconTag = item.icon ? item.icon : navSubItemIcon
+  const ToggleIcon = direction === 'rtl' ? ChevronLeft : ChevronRight
+  const WrapperCondition = horizontalMenuToggle === 'click'
+  const MainWrapper = WrapperCondition ? ClickAwayListener : 'div'
+  const ChildWrapper = WrapperCondition ? 'div' : Fragment
+  const AnimationWrapper = horizontalMenuAnimation ? Fade : Fragment
+
+  const childMenuGroupStyles = () => {
+    if (attributes && attributes.popper) {
+      if (direction === 'ltr') {
+        if (attributes.popper['data-popper-placement'] === 'right-start') {
+          return 'left'
+        }
+        if (attributes.popper['data-popper-placement'] === 'left-start') {
+          return 'right'
+        }
+      } else {
+        if (attributes.popper['data-popper-placement'] === 'right-start') {
+          return 'right'
+        }
+        if (attributes.popper['data-popper-placement'] === 'left-start') {
+          return 'left'
+        }
+      }
+    }
+  }
+
+  return (
+    <CanViewNavGroup navGroup={item}>
+      <MainWrapper {...(WrapperCondition ? { onClickAway: handleGroupClose } : { onMouseLeave: handleGroupClose })}>
+        <ChildWrapper>
+          <List component='div' sx={{ py: skin === 'bordered' ? 2.625 : 2.75 }}>
+            <ListItem
+              aria-haspopup='true'
+              {...(WrapperCondition ? {} : { onMouseEnter: handleGroupOpen })}
+              className={clsx('menu-group', { 'Mui-selected': hasActiveChild(item, currentURL) })}
+              onClick={handleGroupItemClick}
+              sx={{
+                ...(menuOpen ? { backgroundColor: theme.palette.action.hover } : {}),
+                ...(!hasParent
+                  ? {
+                    borderRadius: '8px',
+                    '&.Mui-selected': {
+                      backgroundColor: theme.palette.primary.main,
+                      '& .MuiTypography-root, & .MuiListItemIcon-root, & .MuiSvgIcon-root': {
+                        color: 'common.white'
+                      }
+                    }
+                  }
+                  : {})
+              }}
+            >
+              <Box
+                sx={{
+                  width: '100%',
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between'
+                }}
+                ref={setReferenceElement}
+              >
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    flexDirection: 'row',
+                    ...(menuTextTruncate && { overflow: 'hidden' })
+                  }}
+                >
+                  <ListItemIcon sx={{ mr: hasParent ? 3 : 2.5, color: 'text.primary' }}>
+                    <UserIcon
+                      icon={IconTag}
+                      componentType='horizontal-menu'
+                      iconProps={{ sx: IconTag === navSubItemIcon ? { fontSize: '0.5rem' } : {} }}
+                    />
+                  </ListItemIcon>
+                  <Typography {...(menuTextTruncate && { noWrap: true })}>
+                    <Translations text={item.title} />
+                  </Typography>
+                </Box>
+                <Box 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}>
+                    {hasParent ? (
+                      <ToggleIcon sx={{ color: 'text.secondary', cursor: 'pointer' }} />
+                    ) : (
+                      <ChevronDown sx={{ color: 'text.secondary', cursor: 'pointer' }} />
+                    )}
+                  </Box>
+                </Box>
+              </Box>
+            </ListItem>
+            <AnimationWrapper {...(horizontalMenuAnimation && { in: menuOpen, timeout: { exit: 300, enter: 400 } })}>
+              <Box
+                style={styles.popper}
+                ref={setPopperElement}
+                {...attributes.popper}
+                sx={{
+                  zIndex: theme.zIndex.appBar,
+                  ...(!horizontalMenuAnimation && { display: menuOpen ? 'block' : 'none' }),
+                  pl: childMenuGroupStyles() === 'left' ? (skin === 'bordered' ? 1.5 : 1.25) : 0,
+                  pr: childMenuGroupStyles() === 'right' ? (skin === 'bordered' ? 1.5 : 1.25) : 0,
+                  ...(hasParent ? { position: 'fixed !important' } : { pt: skin === 'bordered' ? 5.25 : 5.5 })
+                }}
+              >
+                <NavigationMenu
+                  sx={{
+                    ...(hasParent
+                      ? { overflowX: 'visible', maxHeight: 'calc(100vh - 21rem)' }
+                      : { maxHeight: 'calc(100vh - 13rem)' }),
+                    ...(skin === 'bordered'
+                      ? { boxShadow: theme.shadows[0], border: `1px solid ${theme.palette.divider}` }
+                      : { boxShadow: theme.shadows[4] })
+                  }}
+                >
+                  <HorizontalNavItems {...props} hasParent horizontalNavItems={item.children} />
+                </NavigationMenu>
+              </Box>
+            </AnimationWrapper>
+          </List>
+        </ChildWrapper>
+      </MainWrapper>
+    </CanViewNavGroup>
+  )
+}
+
+export default HorizontalNavGroup

package/src/@core/layouts/components/horizontal/navigation/HorizontalNavItems.js

@@ -0,0 +1,21 @@
+// ** Custom Navigation Components
+import HorizontalNavLink from './HorizontalNavLink'
+import HorizontalNavGroup from './HorizontalNavGroup'
+
+const resolveComponent = item => {
+  if (item.children) return HorizontalNavGroup
+
+  return HorizontalNavLink
+}
+
+const HorizontalNavItems = props => {
+  const RenderMenuItems = props.horizontalNavItems?.map((item, index) => {
+    const TagName = resolveComponent(item)
+
+    return <TagName {...props} key={index} item={item} />
+  })
+
+  return <>{RenderMenuItems}</>
+}
+
+export default HorizontalNavItems

package/src/@core/layouts/components/horizontal/navigation/HorizontalNavLink.js

@@ -0,0 +1,195 @@
+// ** React Imports
+import { Fragment, useContext } from 'react'
+
+// ** Next Imports
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+// ** MUI Imports
+import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
+import List from '@mui/material/List'
+import { styled } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import MuiListItem from '@mui/material/ListItem'
+
+// ** Third Party Imports
+import clsx from 'clsx'
+
+// ** Theme Config 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'
+
+// ** Util Import
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+const ListItem = styled(MuiListItem)(({ theme }) => ({
+  width: 'auto',
+  paddingTop: theme.spacing(2.25),
+  color: theme.palette.text.primary,
+  paddingBottom: theme.spacing(2.25),
+  '&:hover': {
+    backgroundColor: theme.palette.action.hover
+  },
+  '&.active, &.active:hover': {
+    backgroundColor: hexToRGBA(theme.palette.primary.main, 0.08)
+  },
+  '&.active .MuiTypography-root, &.active .MuiListItemIcon-root': {
+    color: theme.palette.primary.main
+  }
+}))
+
+const HorizontalNavLink = props  => {
+  // ** Props
+  const { item, settings, hasParent } = props
+
+  // ** Hook & Vars
+  const router = useRouter()
+  const systemContext = useContext(SystemContext)
+  const { navSubItemIcon, menuTextTruncate } = themeConfig
+  const IconTag = item.icon ? item.icon : navSubItemIcon
+  const Wrapper = !hasParent ? List : Fragment
+
+  // ** 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 handleURLQueries = () => {
+    if (Object.keys(router.query).length && item.path) {
+      const arr = Object.keys(router.query)
+
+      return router.asPath.includes(item.path) && router.asPath.includes(router.query[arr[0]])
+    }
+  }
+
+  const isNavLinkActive = () => {
+    const href = getItemHref()
+    if (router.pathname === item.path || router.asPath === href || handleURLQueries()) {
+      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 (
+    <CanViewNavLink navLink={item}>
+      <Wrapper {...(!hasParent ? { component: 'div', sx: { py: settings.skin === 'bordered' ? 2.625 : 2.75 } } : {})}>
+        <Link href={getItemHref()} passHref>
+          <ListItem
+            component={'a'}
+            disabled={item.disabled}
+            className={clsx({ active: isNavLinkActive()})}
+            target={item.openInNewTab ? '_blank' : undefined}
+            onClick={handleClick}
+            sx={{
+              ...(item.disabled ? { pointerEvents: 'none' } : { cursor: 'pointer' }),
+              ...(!hasParent
+                ? {
+                    borderRadius: '8px',
+                    '&.active, &.active:hover': {
+                      backgroundColor: theme => theme.palette.primary.main,
+                      '& .MuiTypography-root, & .MuiListItemIcon-root': {
+                        color: 'common.white'
+                      }
+                    }
+                  }
+                : {})
+            }}
+          >
+            <Box sx={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  ...(menuTextTruncate && { overflow: 'hidden' })
+                }}
+              >
+                <ListItemIcon sx={{ mr: hasParent ? 3 : 2.5, color: 'text.primary' }}>
+                  <UserIcon
+                    icon={IconTag}
+                    componentType='horizontal-menu'
+                    iconProps={{ sx: IconTag === navSubItemIcon ? { fontSize: '0.5rem' } : {} }}
+                  />
+                </ListItemIcon>
+                <Typography {...(menuTextTruncate && { noWrap: true })}>
+                  <Translations text={item.title} />
+                </Typography>
+              </Box>
+              {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}
+            </Box>
+          </ListItem>
+        </Link>
+      </Wrapper>
+    </CanViewNavLink>
+  )
+}
+
+export default HorizontalNavLink

package/src/@core/layouts/components/horizontal/navigation/index.js

@@ -0,0 +1,31 @@
+// ** MUI Imports
+import Box from '@mui/material/Box'
+
+// ** Config Import
+import themeConfig from 'src/configs/themeConfig'
+
+// ** Utils
+// import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+// ** Menu Components
+import HorizontalNavItems from './HorizontalNavItems'
+
+const Navigation = props => {
+  return (
+    <Box
+      className='menu-content'
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        '& > *': {
+          '&:not(:last-child)': { mr: 2 },
+          ...(themeConfig.menuTextTruncate && { maxWidth: 220 })
+        }
+      }}
+    >
+      <HorizontalNavItems {...props} />
+    </Box>
+  )
+}
+
+export default Navigation

package/src/@core/layouts/components/shared-components/LanguageDropdown.js

@@ -0,0 +1,96 @@
+// ** React Imports
+import { Fragment, useEffect, useState } from 'react'
+
+// ** MUI Imports
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import IconButton from '@mui/material/IconButton'
+
+// ** Icons Imports
+import Translate from 'mdi-material-ui/Translate'
+
+// ** Third Party Import
+import { useTranslation } from 'react-i18next'
+
+const LanguageDropdown = ({ settings, saveSettings }) => {
+  // ** State
+  const [anchorEl, setAnchorEl] = useState(null)
+
+  // ** Hook
+  const { i18n } = useTranslation()
+
+  // ** Vars
+  const { direction } = settings
+  useEffect(() => {
+    if (i18n.language === 'ar' && direction === 'ltr') {
+      saveSettings({ ...settings, direction: 'ltr' })
+    } else if (i18n.language === 'ar' || direction === 'rtl') {
+      saveSettings({ ...settings, direction: 'rtl' })
+    } else {
+      saveSettings({ ...settings, direction: 'ltr' })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [i18n.language, direction])
+
+  const handleLangDropdownOpen = event => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleLangDropdownClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleLangItemClick = lang => {
+    i18n.changeLanguage(lang)
+    handleLangDropdownClose()
+  }
+
+  return (
+    <Fragment>
+      <IconButton color='inherit' aria-haspopup='true' aria-controls='customized-menu' onClick={handleLangDropdownOpen}>
+        <Translate />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleLangDropdownClose}
+        sx={{ '& .MuiMenu-paper': { mt: 4, minWidth: 130 } }}
+        anchorOrigin={{ vertical: 'bottom', horizontal: direction === 'ltr' ? 'right' : 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: direction === 'ltr' ? 'right' : 'left' }}
+      >
+        <MenuItem
+          sx={{ py: 2 }}
+          selected={i18n.language === 'en'}
+          onClick={() => {
+            handleLangItemClick('en')
+            saveSettings({ ...settings, direction: 'ltr' })
+          }}
+        >
+          English
+        </MenuItem>
+        <MenuItem
+          sx={{ py: 2 }}
+          selected={i18n.language === 'fr'}
+          onClick={() => {
+            handleLangItemClick('fr')
+            saveSettings({ ...settings, direction: 'ltr' })
+          }}
+        >
+          French
+        </MenuItem>
+        <MenuItem
+          sx={{ py: 2 }}
+          selected={i18n.language === 'ar'}
+          onClick={() => {
+            handleLangItemClick('ar')
+            saveSettings({ ...settings, direction: 'rtl' })
+          }}
+        >
+          Arabic
+        </MenuItem>
+      </Menu>
+    </Fragment>
+  )
+}
+
+export default LanguageDropdown