robobyte-front-builder 1.0.0

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

@@ -0,0 +1,169 @@
+// ** React Import
+import { useRef, useState } from 'react'
+
+// ** MUI Import
+import List from '@mui/material/List'
+import Box from '@mui/material/Box'
+import { styled, useTheme } from '@mui/material/styles'
+
+// ** Third Party Components
+import PerfectScrollbar from 'react-perfect-scrollbar'
+import themeConfig from 'src/configs/themeConfig'
+
+// ** Component Imports
+import Drawer from './Drawer'
+import VerticalNavItems from './VerticalNavItems'
+import VerticalNavHeader from './VerticalNavHeader'
+
+// ** Util Import
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+const StyledBoxForShadow = styled(Box)(({ theme }) => ({
+  top: 60,
+  left: -8,
+  zIndex: 2,
+  display: 'none',
+  position: 'absolute',
+  pointerEvents: 'none',
+  width: 'calc(100% + 15px)',
+  height: theme.mixins.toolbar.minHeight,
+  '&.d-block': {
+    display: 'block'
+  }
+}))
+
+const Navigation = props => {
+  // ** Props
+  const {
+    hidden,
+    settings,
+    afterVerticalNavMenuContent,
+    beforeVerticalNavMenuContent,
+    verticalNavMenuContent: userVerticalNavMenuContent
+  } = props
+
+  // ** States
+  const [groupActive, setGroupActive] = useState([])
+  const [currentActiveGroup, setCurrentActiveGroup] = useState([])
+
+  // ** Ref
+  const shadowRef = useRef(null)
+
+  // ** Hooks
+  const theme = useTheme()
+
+  // ** Var
+  const { skin } = settings
+  const { afterVerticalNavMenuContentPosition, beforeVerticalNavMenuContentPosition } = themeConfig
+
+  // ** Fixes Navigation InfiniteScroll
+  const handleInfiniteScroll = ref => {
+    if (ref) {
+      // @ts-ignore
+      ref._getBoundingClientRect = ref.getBoundingClientRect
+      ref.getBoundingClientRect = () => {
+        // @ts-ignore
+        const original = ref._getBoundingClientRect()
+
+        return { ...original, height: Math.floor(original.height) }
+      }
+    }
+  }
+
+  // ** Scroll Menu
+  const scrollMenu = container => {
+    if (beforeVerticalNavMenuContentPosition === 'static' || !beforeVerticalNavMenuContent) {
+      container = hidden ? container.target : container
+      if (shadowRef && container.scrollTop > 0) {
+        // @ts-ignore
+        if (!shadowRef.current.classList.contains('d-block')) {
+          // @ts-ignore
+          shadowRef.current.classList.add('d-block')
+        }
+      } else {
+        // @ts-ignore
+        shadowRef.current.classList.remove('d-block')
+      }
+    }
+  }
+
+  const shadowBgColor = () => {
+    if (skin === 'semi-dark' && theme.palette.mode === 'light') {
+      return `linear-gradient(${theme.palette.customColors.darkBg} 5%,${hexToRGBA(
+        theme.palette.customColors.darkBg,
+        0.85
+      )} 30%,${hexToRGBA(theme.palette.customColors.darkBg, 0.5)} 65%,${hexToRGBA(
+        theme.palette.customColors.darkBg,
+        0.3
+      )} 75%,transparent)`
+    } else if (skin === 'semi-dark' && theme.palette.mode === 'dark') {
+      return `linear-gradient(${theme.palette.customColors.lightBg} 5%,${hexToRGBA(
+        theme.palette.customColors.lightBg,
+        0.85
+      )} 30%,${hexToRGBA(theme.palette.customColors.lightBg, 0.5)} 65%,${hexToRGBA(
+        theme.palette.customColors.lightBg,
+        0.3
+      )} 75%,transparent)`
+    } else {
+      return `linear-gradient(${theme.palette.background.default} 5%,${hexToRGBA(
+        theme.palette.background.default,
+        0.85
+      )} 30%,${hexToRGBA(theme.palette.background.default, 0.5)} 65%,${hexToRGBA(
+        theme.palette.background.default,
+        0.3
+      )} 75%,transparent)`
+    }
+  }
+  const ScrollWrapper = hidden ? Box : PerfectScrollbar
+
+  return (
+    <Drawer {...props}>
+      <VerticalNavHeader {...props} />
+      {beforeVerticalNavMenuContent && beforeVerticalNavMenuContentPosition === 'fixed'
+        ? beforeVerticalNavMenuContent(props)
+        : null}
+      {(beforeVerticalNavMenuContentPosition === 'static' || !beforeVerticalNavMenuContent) && (
+        <StyledBoxForShadow ref={shadowRef} sx={{ background: shadowBgColor() }} />
+      )}
+      <Box sx={{ position: 'relative', overflow: 'hidden' }}>
+        <ScrollWrapper
+          containerRef={ref => handleInfiniteScroll(ref)}
+          {...(hidden
+            ? {
+                onScroll: container => scrollMenu(container),
+                sx: { height: '100%', overflowY: 'auto', overflowX: 'hidden' }
+              }
+            : {
+                options: { wheelPropagation: false },
+                onScrollY: container => scrollMenu(container)
+              })}
+        >
+          {beforeVerticalNavMenuContent && beforeVerticalNavMenuContentPosition === 'static'
+            ? beforeVerticalNavMenuContent(props)
+            : null}
+          {userVerticalNavMenuContent ? (
+            userVerticalNavMenuContent(props)
+          ) : (
+            <List className='nav-items' sx={{ pt: 0, '& > :first-child': { mt: '0' } }}>
+              <VerticalNavItems
+                groupActive={groupActive}
+                setGroupActive={setGroupActive}
+                currentActiveGroup={currentActiveGroup}
+                setCurrentActiveGroup={setCurrentActiveGroup}
+                {...props}
+              />
+            </List>
+          )}
+          {afterVerticalNavMenuContent && afterVerticalNavMenuContentPosition === 'static'
+            ? afterVerticalNavMenuContent(props)
+            : null}
+        </ScrollWrapper>
+      </Box>
+      {afterVerticalNavMenuContent && afterVerticalNavMenuContentPosition === 'fixed'
+        ? afterVerticalNavMenuContent(props)
+        : null}
+    </Drawer>
+  )
+}
+
+export default Navigation

package/src/@core/layouts/utils.js

@@ -0,0 +1,69 @@
+/**
+ * Check for URL queries as well for matching
+ * Current URL & Item Path
+ *
+ * @param item
+ * @param activeItem
+ */
+export const handleURLQueries = (router, path) => {
+  if (Object.keys(router.query).length && path) {
+    const arr = Object.keys(router.query)
+
+    return router.asPath.includes(path) && router.asPath.includes(router.query[arr[0]]) && path !== '/'
+  }
+
+  return false
+}
+
+/**
+ * Check if the given item has the given url
+ * in one of its children
+ *
+ * @param item
+ * @param currentURL
+ */
+export const hasActiveChild = (item, currentURL) => {
+  const { children } = item
+  if (!children) {
+    return false
+  }
+  for (const child of children) {
+    if (child.children) {
+      if (hasActiveChild(child, currentURL)) {
+        return true
+      }
+    }
+    const childPath = child.path
+
+    // Check if the child has a link and is active
+    if (
+      child &&
+      childPath &&
+      currentURL &&
+      (childPath === currentURL || (currentURL.includes(childPath) && childPath !== '/'))
+    ) {
+      return true
+    }
+  }
+
+  return false
+}
+
+/**
+ * Check if this is a children
+ * of the given item
+ *
+ * @param children
+ * @param openGroup
+ * @param currentActiveGroup
+ */
+export const removeChildren = (children, openGroup, currentActiveGroup) => {
+  children.forEach(child => {
+    if (!currentActiveGroup.includes(child.title)) {
+      const index = openGroup.indexOf(child.title)
+      if (index > -1) openGroup.splice(index, 1)
+      // @ts-ignore
+      if (child.children) removeChildren(child.children, openGroup, currentActiveGroup)
+    }
+  })
+}

package/src/@core/styles/Table.module.css

@@ -0,0 +1,93 @@
+.table {
+  inline-size: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  white-space: nowrap;
+
+  [align='right'] > * {
+    text-align: end;
+  }
+  [align='center'] > * {
+    text-align: center;
+  }
+
+  thead {
+    text-transform: uppercase;
+    color: var(--mui-palette-text-primary);
+
+    th {
+      font-weight: 500;
+      font-size: 0.8125rem;
+      letter-spacing: 0.2px;
+      line-height: 1.8462;
+      text-align: start;
+      block-size: 64px;
+      background-color: var(--mui-palette-customColors-tableHeaderBg);
+      &:not(:first-of-type):not(:last-of-type) {
+        padding-block: 0.5rem;
+        padding-inline: 1rem;
+      }
+      &:first-of-type {
+        &:not(:has(input[type='checkbox'])) {
+          padding-block: 0.5rem;
+          padding-inline: 1.25rem 1rem;
+        }
+        &:has(input[type='checkbox']) {
+          inline-size: 51px;
+          padding-inline-start: 0.6875rem;
+        }
+      }
+      &:last-of-type {
+        padding-block: 0.5rem;
+        padding-inline: 1rem 1.25rem;
+      }
+    }
+  }
+
+  tbody {
+    color: var(--mui-palette-text-secondary);
+
+    th,
+    td {
+      font-size: 0.9375rem;
+      line-height: 1.4667;
+      block-size: 50px;
+      &:not(:first-of-type):not(:last-of-type) {
+        padding-block: 0.5rem;
+        padding-inline: 1rem;
+      }
+      &:first-of-type {
+        &:not(:has(input[type='checkbox'])) {
+          padding-block: 0.5rem;
+          padding-inline: 1.25rem 1rem;
+        }
+        &:has(input[type='checkbox']) {
+          padding-inline-start: 0.6875rem;
+        }
+      }
+      &:last-of-type {
+        padding-block: 0.5rem;
+        padding-inline: 1rem 1.25rem;
+      }
+    }
+
+    tr:not(:last-child) {
+      border-block-end: 1px solid var(--border-color);
+    }
+  }
+}
+
+.cellWithInput input {
+  inline-size: 100%;
+  background-color: transparent;
+  font-size: inherit;
+  color: inherit;
+  border-radius: var(--mui-shape-customBorderRadius-sm);
+  padding-block: 6px;
+  padding-inline: 10px;
+  margin-inline: -10px;
+
+  &:focus-visible {
+    outline: 1px solid var(--mui-palette-primary-main);
+  }
+}

package/src/@core/styles/horizontal/menuItemStyles.js

@@ -0,0 +1,100 @@
+// Util Imports
+import { menuClasses } from '@menu/utils/menuClasses'
+
+const menuItemStyles = (theme, iconClass) => ({
+  root: ({ level }) => ({
+    padding: theme.spacing(2),
+    margin: theme.spacing(-2),
+    ...(level === 0 && {
+      [`& .${menuClasses.button}`]: {
+        borderRadius: 'var(--mui-shape-customBorderRadius-lg)'
+      }
+    }),
+    [`&.${menuClasses.open} > .${menuClasses.button}`]: {
+      backgroundColor: 'var(--mui-palette-action-selected) !important'
+    },
+    ...(level === 0
+      ? {
+          [`& .${menuClasses.button}.${menuClasses.active}`]: {
+            color: 'var(--mui-palette-primary-contrastText) !important',
+            backgroundColor: 'var(--mui-palette-primary-main) !important',
+            boxShadow: 'var(--mui-customShadows-xs)'
+          }
+        }
+      : {
+          [`&:not([aria-expanded]) > .${menuClasses.button}.${menuClasses.active}`]: {
+            backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
+            color: 'var(--mui-palette-primary-main)'
+          },
+          [`&[aria-expanded] > .${menuClasses.button}.${menuClasses.active}`]: {
+            backgroundColor: 'var(--mui-palette-action-selected) !important'
+          }
+        }),
+    [`&.${menuClasses.disabled} > .${menuClasses.button}`]: {
+      color: 'var(--mui-palette-text-disabled)',
+      '& *': {
+        color: 'inherit'
+      }
+    }
+  }),
+  button: {
+    paddingInline: theme.spacing(4),
+    '&:not(:has(.MuiChip-root))': {
+      paddingBlock: theme.spacing(2)
+    },
+    '&:has(.MuiChip-root)': {
+      paddingBlock: theme.spacing(1.75)
+    },
+    [`&:not(.${menuClasses.active}):hover, &:not(.${menuClasses.active}):focus-visible, &:not(.${menuClasses.active})[aria-expanded="true"]`]:
+      {
+        backgroundColor: 'var(--mui-palette-action-hover)'
+      }
+  },
+  icon: ({ level }) => ({
+    marginInlineEnd: theme.spacing(2),
+    ...(level < 2 ? { fontSize: '1.375rem' } : { fontSize: '0.5rem', color: 'var(--mui-palette-text-secondary)' }),
+    '& > i, & > svg': {
+      fontSize: 'inherit'
+    },
+    [`& .${iconClass}`]: {
+      fontSize: '0.5rem',
+      color: 'var(--mui-palette-text-disabled)',
+      ...(level === 1 && {
+        marginInline: theme.spacing(1.75)
+      }),
+      [`.${menuClasses.active}:not([aria-expanded]) > .${menuClasses.active} &`]: {
+        color: 'var(--mui-palette-primary-main)'
+      }
+    }
+  }),
+  prefix: {
+    marginInlineEnd: theme.spacing(2)
+  },
+  suffix: {
+    marginInlineStart: theme.spacing(2)
+  },
+  subMenuStyles: {
+    zIndex: 'calc(var(--header-z-index) + 1)'
+  },
+  subMenuExpandIcon: {
+    fontSize: '1.375rem',
+    marginInlineStart: theme.spacing(2),
+    '& i, & svg': {
+      fontSize: 'inherit'
+    }
+  },
+  subMenuContent: {
+    backgroundColor: 'var(--mui-palette-background-paper)',
+    borderRadius: 'var(--mui-shape-borderRadius)',
+    boxShadow: 'var(--mui-customShadows-lg)',
+    '[data-skin="bordered"] ~ [data-floating-ui-portal] &': {
+      boxShadow: 'none',
+      border: '1px solid var(--mui-palette-divider)'
+    },
+    '& > ul, & > div > ul': {
+      paddingBlock: theme.spacing(2)
+    }
+  }
+})
+
+export default menuItemStyles

package/src/@core/styles/horizontal/menuRootStyles.js

@@ -0,0 +1,19 @@
+import { horizontalNavClasses } from '@menu/utils/menuClasses'
+
+const menuRootStyles = theme => {
+  return {
+    [`.${horizontalNavClasses.root}:has(&)`]: {
+      padding: theme.spacing(2),
+      margin: theme.spacing(-2)
+    },
+    '& > ul': {
+      padding: theme.spacing(2),
+      margin: theme.spacing(-2),
+      '& > li:not(:last-of-type)': {
+        marginInlineEnd: theme.spacing(1)
+      }
+    }
+  }
+}
+
+export default menuRootStyles