pos-dashboard-v2/src/components/layout/vertical/SuperAdminVerticalMenu.tsx
2025-08-12 21:29:24 +07:00

92 lines
3.2 KiB
TypeScript

// Next Imports
import { useParams } from 'next/navigation'
// MUI Imports
import { useTheme } from '@mui/material/styles'
// Third-party Imports
import PerfectScrollbar from 'react-perfect-scrollbar'
// Type Imports
import type { getDictionary } from '@/utils/getDictionary'
import type { VerticalMenuContextProps } from '@menu/components/vertical-menu/Menu'
// Component Imports
import { Menu, MenuItem, MenuSection, SubMenu } from '@menu/vertical-menu'
// import { GenerateVerticalMenu } from '@components/GenerateMenu'
// Hook Imports
import useVerticalNav from '@menu/hooks/useVerticalNav'
// Styled Component Imports
import StyledVerticalNavExpandIcon from '@menu/styles/vertical/StyledVerticalNavExpandIcon'
// Style Imports
import menuItemStyles from '@core/styles/vertical/menuItemStyles'
import menuSectionStyles from '@core/styles/vertical/menuSectionStyles'
// Menu Data Imports
// import menuData from '@/data/navigation/verticalMenuData'
type RenderExpandIconProps = {
open?: boolean
transitionDuration?: VerticalMenuContextProps['transitionDuration']
}
type Props = {
dictionary: Awaited<ReturnType<typeof getDictionary>>
scrollMenu: (container: any, isPerfectScrollbar: boolean) => void
}
const RenderExpandIcon = ({ open, transitionDuration }: RenderExpandIconProps) => (
<StyledVerticalNavExpandIcon open={open} transitionDuration={transitionDuration}>
<i className='tabler-chevron-right' />
</StyledVerticalNavExpandIcon>
)
const SuperAdminVerticalMenu = ({ dictionary, scrollMenu }: Props) => {
// Hooks
const theme = useTheme()
const verticalNavOptions = useVerticalNav()
const params = useParams()
// Vars
const { isBreakpointReached, transitionDuration } = verticalNavOptions
const { lang: locale } = params
const ScrollWrapper = isBreakpointReached ? 'div' : PerfectScrollbar
return (
// eslint-disable-next-line lines-around-comment
/* Custom scrollbar instead of browser scroll, remove if you want browser scroll only */
<ScrollWrapper
{...(isBreakpointReached
? {
className: 'bs-full overflow-y-auto overflow-x-hidden',
onScroll: container => scrollMenu(container, false)
}
: {
options: { wheelPropagation: false, suppressScrollX: true },
onScrollY: container => scrollMenu(container, true)
})}
>
{/* Incase you also want to scroll NavHeader to scroll with Vertical Menu, remove NavHeader from above and paste it below this comment */}
{/* Vertical Menu */}
<Menu
popoutMenuOffset={{ mainAxis: 23 }}
menuItemStyles={menuItemStyles(verticalNavOptions, theme)}
renderExpandIcon={({ open }) => <RenderExpandIcon open={open} transitionDuration={transitionDuration} />}
renderExpandedMenuItemIcon={{ icon: <i className='tabler-circle text-xs' /> }}
menuSectionStyles={menuSectionStyles(verticalNavOptions, theme)}
>
<SubMenu label={dictionary['navigation'].organization} icon={<i className='tabler-smart-home' />}>
<MenuItem href={`/${locale}/sa/organizations/list`}>{dictionary['navigation'].list}</MenuItem>
</SubMenu>
</Menu>
</ScrollWrapper>
)
}
export default SuperAdminVerticalMenu