@applica-software-guru/react-admin 1.0.32 → 1.0.34

package/src/components/Layout/Drawer/DrawerContent/Navigation/NavGroup.jsx

@@ -0,0 +1,359 @@
+import {
+  Box,
+  ClickAwayListener,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Paper,
+  Popper,
+  Typography,
+  useMediaQuery
+} from '@mui/material'
+import { DownOutlined, RightOutlined } from '@ant-design/icons'
+import { Fragment, useEffect, useState } from 'react'
+import { styled, useTheme } from '@mui/material/styles'
+import { useMenuConfig, useThemeConfig } from '../../../../../hooks'
+
+import NavCollapse from './NavCollapse'
+import NavItem from './NavItem'
+import PropTypes from 'prop-types'
+import { Transitions } from '../../../../@extended'
+import { useTranslate } from 'react-admin'
+
+const PopperStyled = styled(Popper)(({ theme }) => ({
+  overflow: 'visible',
+  zIndex: 1202,
+  minWidth: 180,
+  '&:before': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    top: 5,
+    left: 32,
+    width: 12,
+    height: 12,
+    transform: 'translateY(-50%) rotate(45deg)',
+    zIndex: 120,
+    borderWidth: '6px',
+    borderStyle: 'solid',
+    borderColor: `${theme.palette.background.paper}  transparent transparent ${theme.palette.background.paper}`
+  }
+}))
+
+const NavGroup = ({
+  item,
+  lastItem,
+  remItems,
+  lastItemId,
+  setSelectedItems,
+  selectedItems,
+  setSelectedLevel,
+  selectedLevel
+}) => {
+  const theme = useTheme()
+  const translate = useTranslate()
+  const { pathname } = { pathname: '' } // useLocation()
+  const { menuOrientation, isVerticalLayout } = useThemeConfig()
+  const menu = useMenuConfig()
+  const { drawerOpen, selectedID } = menu
+  const { activeID } = useMenuConfig()
+  const downLG = useMediaQuery(theme.breakpoints.down('lg'))
+
+  const [anchorEl, setAnchorEl] = useState(null)
+  const [currentItem, setCurrentItem] = useState(item)
+
+  const openMini = Boolean(anchorEl)
+
+  useEffect(() => {
+    if (lastItem) {
+      if (item.id === lastItemId) {
+        const localItem = { ...item }
+        const elements = remItems.map((ele) => ele.elements)
+        localItem.children = elements.flat(1)
+        setCurrentItem(localItem)
+      } else {
+        setCurrentItem(item)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [item, lastItem, downLG])
+
+  const checkOpenForParent = (child, id) => {
+    child.forEach((ele) => {
+      if (ele.children?.length) {
+        checkOpenForParent(ele.children, currentItem.id)
+      }
+      if (ele.url === pathname) {
+        activeID(id)
+      }
+    })
+  }
+  const checkSelectedOnload = (data) => {
+    const childrens = data.children ? data.children : []
+    childrens.forEach((itemCheck) => {
+      if (itemCheck.children?.length) {
+        checkOpenForParent(itemCheck.children, currentItem.id)
+      }
+      if (itemCheck.url === pathname) {
+        activeID(currentItem.id)
+      }
+    })
+  }
+
+  useEffect(() => {
+    checkSelectedOnload(currentItem)
+    if (openMini) setAnchorEl(null)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname, currentItem])
+
+  const handleClick = (event) => {
+    if (!openMini) {
+      setAnchorEl(event?.currentTarget)
+    }
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const Icon = currentItem?.icon
+  const itemIcon = currentItem?.icon ? (
+    <Icon
+      style={{
+        fontSize: 20,
+        stroke: '1.5',
+        color:
+          selectedID === currentItem.id ? theme.palette.primary.main : theme.palette.secondary.dark
+      }}
+    />
+  ) : null
+
+  const navCollapse = item.children?.map((menuItem) => {
+    switch (menuItem.type) {
+      case 'collapse':
+        return (
+          <NavCollapse
+            key={menuItem.id}
+            menu={menuItem}
+            setSelectedItems={setSelectedItems}
+            setSelectedLevel={setSelectedLevel}
+            selectedLevel={selectedLevel}
+            selectedItems={selectedItems}
+            level={1}
+            parentId={currentItem.id}
+          />
+        )
+      case 'item':
+        return <NavItem key={menuItem.id} item={menuItem} level={1} />
+      default:
+    }
+  })
+
+  const moreItems = remItems.map((itemRem, i) => (
+    <Fragment key={i}>
+      {itemRem.title && (
+        <Typography variant="caption" sx={{ pl: 2 }}>
+          {itemRem.title}
+        </Typography>
+      )}
+      {itemRem?.elements?.map((menu) => {
+        switch (menu.type) {
+          case 'collapse':
+            return (
+              <NavCollapse
+                key={menu.id}
+                menu={menu}
+                level={1}
+                parentId={currentItem.id}
+                setSelectedItems={setSelectedItems}
+                setSelectedLevel={setSelectedLevel}
+                selectedLevel={selectedLevel}
+                selectedItems={selectedItems}
+              />
+            )
+          case 'item':
+            return <NavItem key={menu.id} item={menu} level={1} />
+          default:
+            return (
+              <Typography key={menu.id} variant="h6" color="error" align="center">
+                Menu Items Error
+              </Typography>
+            )
+        }
+      })}
+    </Fragment>
+  ))
+
+  // menu list collapse & items
+  const items = currentItem.children?.map((menu) => {
+    switch (menu.type) {
+      case 'collapse':
+        return (
+          <NavCollapse
+            key={menu.id}
+            menu={menu}
+            level={1}
+            parentId={currentItem.id}
+            setSelectedItems={setSelectedItems}
+            setSelectedLevel={setSelectedLevel}
+            selectedLevel={selectedLevel}
+            selectedItems={selectedItems}
+          />
+        )
+      case 'item':
+        return <NavItem key={menu.id} item={menu} level={1} />
+      default:
+        return (
+          <Typography key={menu.id} variant="h6" color="error" align="center">
+            Menu Items Error
+          </Typography>
+        )
+    }
+  })
+
+  const popperId = openMini ? `group-pop-${item.id}` : undefined
+
+  return (
+    <>
+      {isVerticalLayout(menuOrientation) || downLG ? (
+        <List
+          subheader={
+            item.title &&
+            drawerOpen && (
+              <Box sx={{ pl: 3, mb: 1.5 }}>
+                <Typography
+                  variant="subtitle2"
+                  color={theme.palette.mode === 'dark' ? 'textSecondary' : 'text.secondary'}
+                >
+                  {item.title}
+                </Typography>
+                {item.caption && (
+                  <Typography variant="caption" color="secondary">
+                    {item.caption}
+                  </Typography>
+                )}
+              </Box>
+            )
+          }
+          sx={{ mt: drawerOpen && item.title ? 1.5 : 0, py: 0, zIndex: 0 }}
+        >
+          {navCollapse}
+        </List>
+      ) : (
+        <List>
+          <ListItemButton
+            selected={selectedID === currentItem.id}
+            sx={{
+              p: 1,
+              my: 0.5,
+              mr: 1,
+              display: 'flex',
+              alignItems: 'center',
+              backgroundColor: 'inherit',
+              '&.Mui-selected': {
+                bgcolor: 'transparent'
+              }
+            }}
+            onMouseEnter={handleClick}
+            onClick={handleClick}
+            onMouseLeave={handleClose}
+            aria-describedby={popperId}
+          >
+            {itemIcon && (
+              <ListItemIcon sx={{ minWidth: 28 }}>
+                {currentItem.id === lastItemId ? (
+                  <DownOutlined style={{ fontSize: 20, stroke: '1.5' }} />
+                ) : (
+                  itemIcon
+                )}
+              </ListItemIcon>
+            )}
+            <ListItemText
+              sx={{ mr: 1 }}
+              primary={
+                <Typography
+                  variant="body1"
+                  color={
+                    selectedID === currentItem.id
+                      ? theme.palette.primary.main
+                      : theme.palette.secondary.dark
+                  }
+                >
+                  {currentItem.id === lastItemId ? translate('ra.actions.more') : currentItem.title}
+                </Typography>
+              }
+            />
+            {openMini ? (
+              <DownOutlined style={{ fontSize: 16, stroke: '1.5' }} />
+            ) : (
+              <RightOutlined style={{ fontSize: 16, stroke: '1.5' }} />
+            )}
+            {anchorEl && (
+              <PopperStyled
+                id={popperId}
+                open={openMini}
+                anchorEl={anchorEl}
+                placement="bottom-start"
+                style={{
+                  zIndex: 2001
+                }}
+              >
+                {({ TransitionProps }) => (
+                  <Transitions in={openMini} {...TransitionProps}>
+                    <Paper
+                      sx={{
+                        mt: 0.5,
+                        py: 1.25,
+                        boxShadow: theme.shadows[8],
+                        backgroundImage: 'none'
+                      }}
+                    >
+                      <ClickAwayListener onClickAway={handleClose}>
+                        <Box
+                          sx={{
+                            maxHeight: 'calc(100vh - 170px)',
+                            overflowY: 'auto',
+                            '&::-webkit-scrollbar': {
+                              opacity: 0,
+                              width: 4,
+                              '&:hover': {
+                                opacity: 0.7
+                              }
+                            },
+                            '&::-webkit-scrollbar-track': {
+                              background: 'transparent'
+                            },
+                            '&::-webkit-scrollbar-thumb': {
+                              background: theme.palette.divider,
+                              borderRadius: 4
+                            }
+                          }}
+                        >
+                          {currentItem.id !== lastItemId ? items : moreItems}
+                        </Box>
+                      </ClickAwayListener>
+                    </Paper>
+                  </Transitions>
+                )}
+              </PopperStyled>
+            )}
+          </ListItemButton>
+        </List>
+      )}
+    </>
+  )
+}
+
+NavGroup.propTypes = {
+  item: PropTypes.object,
+  lastItem: PropTypes.number,
+  remItems: PropTypes.array,
+  lastItemId: PropTypes.string,
+  setSelectedItems: PropTypes.func,
+  selectedItems: PropTypes.string,
+  setSelectedLevel: PropTypes.func,
+  selectedLevel: PropTypes.number
+}
+
+export default NavGroup

package/src/components/Layout/Drawer/DrawerContent/Navigation/NavItem.jsx

@@ -0,0 +1,259 @@
+import {
+  Avatar,
+  Chip,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+  useMediaQuery,
+} from '@mui/material'
+import { Link, useLocation } from 'react-router-dom'
+import { forwardRef, useEffect } from 'react'
+import { useMenuConfig, useThemeConfig } from '../../../../../hooks'
+
+import { Dot } from '../../../../@extended'
+import PropTypes from 'prop-types'
+import { useTheme } from '@mui/material/styles'
+
+const NavItem = ({ item, level }) => {
+  const theme = useTheme()
+
+  const { menuOrientation, isVerticalLayout } = useThemeConfig()
+  const { drawerOpen, openItem, activeItem, openDrawer } = useMenuConfig()
+
+  const downLG = useMediaQuery(theme.breakpoints.down('lg'))
+
+  let itemTarget = '_self'
+  if (item.target) {
+    itemTarget = '_blank'
+  }
+
+  let listItemProps = {
+    component: forwardRef((props, ref) => (
+      <Link {...props} to={item.url} target={itemTarget} ref={ref} />
+    )),
+  }
+  if (item?.external) {
+    listItemProps = { component: 'a', href: item.url, target: itemTarget }
+  }
+
+  const Icon = item.icon
+  const itemIcon = item.icon ? (
+    <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} />
+  ) : (
+    false
+  )
+  const isSelected = openItem.findIndex((id) => id === item.id) > -1
+  const { pathname } = useLocation()
+
+  // active menu item on page load
+  useEffect(() => {
+    if (pathname.includes(item.url)) {
+      activeItem([item.id])
+    }
+    // eslint-disable-next-line
+  }, [pathname])
+
+  const textColor = theme.palette.mode === 'dark' ? 'grey.400' : 'text.primary'
+  const iconSelectedColor =
+    theme.palette.mode === 'dark' && drawerOpen ? 'text.primary' : 'primary.main'
+  return (
+    <>
+      {isVerticalLayout(menuOrientation) || downLG ? (
+        <ListItemButton
+          {...listItemProps}
+          disabled={item.disabled}
+          selected={isSelected}
+          sx={{
+            zIndex: 1201,
+            pl: drawerOpen ? `${level * 28}px` : 1.5,
+            py: !drawerOpen && level === 1 ? 1.25 : 1,
+            ...(drawerOpen && {
+              '&:hover': {
+                bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter',
+              },
+              '&.Mui-selected': {
+                bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter',
+                borderRight: `2px solid ${theme.palette.primary.main}`,
+                color: iconSelectedColor,
+                '&:hover': {
+                  color: iconSelectedColor,
+                  bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter',
+                },
+              },
+            }),
+            ...(!drawerOpen && {
+              '&:hover': {
+                bgcolor: 'transparent',
+              },
+              '&.Mui-selected': {
+                '&:hover': {
+                  bgcolor: 'transparent',
+                },
+                bgcolor: 'transparent',
+              },
+            }),
+          }}
+          {...(downLG && {
+            onClick: () => openDrawer(false),
+          })}
+        >
+          {itemIcon && (
+            <ListItemIcon
+              sx={{
+                minWidth: 28,
+                color: isSelected ? iconSelectedColor : textColor,
+                ...(!drawerOpen && {
+                  borderRadius: 1.5,
+                  width: 36,
+                  height: 36,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  '&:hover': {
+                    bgcolor:
+                      theme.palette.mode === 'dark' ? 'secondary.light' : 'secondary.lighter',
+                  },
+                }),
+                ...(!drawerOpen &&
+                  isSelected && {
+                    bgcolor: theme.palette.mode === 'dark' ? 'primary.900' : 'primary.lighter',
+                    '&:hover': {
+                      bgcolor: theme.palette.mode === 'dark' ? 'primary.darker' : 'primary.lighter',
+                    },
+                  }),
+              }}
+            >
+              {itemIcon}
+            </ListItemIcon>
+          )}
+          {(drawerOpen || (!drawerOpen && level !== 1)) && (
+            <ListItemText
+              primary={
+                <Typography variant="h6" sx={{ color: isSelected ? iconSelectedColor : textColor }}>
+                  {item.title}
+                </Typography>
+              }
+            />
+          )}
+          {(drawerOpen || (!drawerOpen && level !== 1)) && item.chip && (
+            <Chip
+              color={item.chip.color}
+              variant={item.chip.variant}
+              size={item.chip.size}
+              label={item.chip.label}
+              avatar={item.chip.avatar && <Avatar>{item.chip.avatar}</Avatar>}
+            />
+          )}
+        </ListItemButton>
+      ) : (
+        <ListItemButton
+          {...listItemProps}
+          disabled={item.disabled}
+          selected={isSelected}
+          sx={{
+            zIndex: 1201,
+            ...(drawerOpen && {
+              '&:hover': {
+                bgcolor: 'transparent',
+              },
+              '&.Mui-selected': {
+                bgcolor: 'transparent',
+                color: iconSelectedColor,
+                '&:hover': {
+                  color: iconSelectedColor,
+                  bgcolor: 'transparent',
+                },
+              },
+            }),
+            ...(!drawerOpen && {
+              '&:hover': {
+                bgcolor: 'transparent',
+              },
+              '&.Mui-selected': {
+                '&:hover': {
+                  bgcolor: 'transparent',
+                },
+                bgcolor: 'transparent',
+              },
+            }),
+          }}
+        >
+          {itemIcon && (
+            <ListItemIcon
+              sx={{
+                minWidth: 36,
+                ...(!drawerOpen && {
+                  borderRadius: 1.5,
+                  width: 36,
+                  height: 36,
+                  alignItems: 'center',
+                  justifyContent: 'flex-start',
+                  '&:hover': {
+                    bgcolor: 'transparent',
+                  },
+                }),
+                ...(!drawerOpen &&
+                  isSelected && {
+                    bgcolor: 'transparent',
+                    '&:hover': {
+                      bgcolor: 'transparent',
+                    },
+                  }),
+              }}
+            >
+              {itemIcon}
+            </ListItemIcon>
+          )}
+
+          {!itemIcon && (
+            <ListItemIcon
+              sx={{
+                color: isSelected ? 'primary.main' : 'secondary.main',
+                ...(!drawerOpen && {
+                  borderRadius: 1.5,
+                  alignItems: 'center',
+                  justifyContent: 'flex-start',
+                  '&:hover': {
+                    bgcolor: 'transparent',
+                  },
+                }),
+                ...(!drawerOpen &&
+                  isSelected && {
+                    bgcolor: 'transparent',
+                    '&:hover': {
+                      bgcolor: 'transparent',
+                    },
+                  }),
+              }}
+            >
+              <Dot size={4} color={isSelected ? 'primary' : 'secondary'} />
+            </ListItemIcon>
+          )}
+          <ListItemText
+            primary={
+              <Typography variant="h6" color="inherit">
+                {item.title}
+              </Typography>
+            }
+          />
+          {(drawerOpen || (!drawerOpen && level !== 1)) && item.chip && (
+            <Chip
+              color={item.chip.color}
+              variant={item.chip.variant}
+              size={item.chip.size}
+              label={item.chip.label}
+              avatar={item.chip.avatar && <Avatar>{item.chip.avatar}</Avatar>}
+            />
+          )}
+        </ListItemButton>
+      )}
+    </>
+  )
+}
+
+NavItem.propTypes = {
+  item: PropTypes.object,
+  level: PropTypes.number,
+}
+
+export default NavItem

package/src/components/Layout/Drawer/DrawerContent/Navigation/index.jsx

@@ -0,0 +1,73 @@
+import { Box, Typography, useMediaQuery } from '@mui/material'
+import { useMenu, useMenuConfig, useThemeConfig } from '../../../../../hooks'
+
+import NavGroup from './NavGroup'
+import { useState } from 'react'
+import { useTheme } from '@mui/material/styles'
+
+const Navigation = () => {
+  const theme = useTheme()
+  const { menu, isLoading } = useMenu()
+  const downLG = useMediaQuery(theme.breakpoints.down('lg'))
+
+  const { menuOrientation, horizontalMaxItems, isHorizontalLayout } = useThemeConfig()
+  const { drawerOpen } = useMenuConfig()
+  const [selectedItems, setSelectedItems] = useState('')
+  const [selectedLevel, setSelectedLevel] = useState(0)
+  const isHorizontal = isHorizontalLayout(menuOrientation) && !downLG
+  const lastItem = isHorizontal ? horizontalMaxItems : null
+
+  let lastItemIndex = isLoading ? 0 : menu.length - 1
+  let remItems = []
+  let lastItemId
+
+  if (!isLoading && lastItem && lastItem < menu.length) {
+    lastItemId = menu[lastItem - 1].id
+    lastItemIndex = lastItem - 1
+    remItems = menu.slice(lastItem - 1, menu.length).map((item) => ({
+      title: item.title,
+      elements: item.children,
+      icon: item.icon,
+    }))
+  }
+
+  const navGroups = isLoading
+    ? []
+    : menu.slice(0, lastItemIndex + 1).map((item) => {
+        switch (item.type) {
+          case 'group':
+            return (
+              <NavGroup
+                key={item.id}
+                setSelectedItems={setSelectedItems}
+                setSelectedLevel={setSelectedLevel}
+                selectedLevel={selectedLevel}
+                selectedItems={selectedItems}
+                lastItem={lastItem}
+                remItems={remItems}
+                lastItemId={lastItemId}
+                item={item}
+              />
+            )
+          default:
+            return (
+              <Typography key={item.id} variant="h6" color="error" align="center">
+                Fix - Navigation Group
+              </Typography>
+            )
+        }
+      })
+  return (
+    <Box
+      sx={{
+        pt: drawerOpen ? (isHorizontal ? 0 : 2) : 0,
+        '& > ul:first-of-type': { mt: 0 },
+        display: isHorizontal ? { xs: 'block', lg: 'flex' } : 'block',
+      }}
+    >
+      {navGroups}
+    </Box>
+  )
+}
+
+export default Navigation

package/src/components/Layout/Drawer/DrawerContent/index.jsx

@@ -0,0 +1,19 @@
+import Navigation from './Navigation'
+import { SimpleBar } from '../../../third-party'
+
+const DrawerContent = () => {
+  return (
+    <SimpleBar
+      sx={{
+        '& .simplebar-content': {
+          display: 'flex',
+          flexDirection: 'column',
+        },
+      }}
+    >
+      <Navigation />
+    </SimpleBar>
+  )
+}
+
+export default DrawerContent