147 lines
4.5 KiB
TypeScript
147 lines
4.5 KiB
TypeScript
'use client'
|
|
|
|
// React Imports
|
|
import { useEffect, useRef } from 'react'
|
|
|
|
// Next Imports
|
|
import Link from 'next/link'
|
|
import { useParams } from 'next/navigation'
|
|
|
|
// MUI Imports
|
|
import { styled, useColorScheme, useTheme } from '@mui/material/styles'
|
|
|
|
// Type Imports
|
|
import type { getDictionary } from '@/utils/getDictionary'
|
|
import type { Mode } from '@core/types'
|
|
import type { Locale } from '@configs/i18n'
|
|
|
|
// Component Imports
|
|
import VerticalNav, { NavHeader, NavCollapseIcons } from '@menu/vertical-menu'
|
|
import VerticalMenu from './VerticalMenu'
|
|
import Logo from '@components/layout/shared/Logo'
|
|
|
|
// Hook Imports
|
|
import useVerticalNav from '@menu/hooks/useVerticalNav'
|
|
import { useSettings } from '@core/hooks/useSettings'
|
|
|
|
// Util Imports
|
|
import { getLocalizedUrl } from '@/utils/i18n'
|
|
|
|
// Style Imports
|
|
import navigationCustomStyles from '@core/styles/vertical/navigationCustomStyles'
|
|
import { useAuth } from '../../../contexts/authContext'
|
|
import SuperAdminVerticalMenu from './SuperAdminVerticalMenu'
|
|
|
|
type Props = {
|
|
dictionary: Awaited<ReturnType<typeof getDictionary>>
|
|
mode: Mode
|
|
}
|
|
|
|
const StyledBoxForShadow = styled('div')(({ theme }) => ({
|
|
top: 60,
|
|
left: -8,
|
|
zIndex: 2,
|
|
opacity: 0,
|
|
position: 'absolute',
|
|
pointerEvents: 'none',
|
|
width: 'calc(100% + 15px)',
|
|
height: theme.mixins.toolbar.minHeight,
|
|
transition: 'opacity .15s ease-in-out',
|
|
background: `linear-gradient(var(--mui-palette-background-paper) ${
|
|
theme.direction === 'rtl' ? '95%' : '5%'
|
|
}, rgb(var(--mui-palette-background-paperChannel) / 0.85) 30%, rgb(var(--mui-palette-background-paperChannel) / 0.5) 65%, rgb(var(--mui-palette-background-paperChannel) / 0.3) 75%, transparent)`,
|
|
'&.scrolled': {
|
|
opacity: 1
|
|
}
|
|
}))
|
|
|
|
const Navigation = (props: Props) => {
|
|
// Props
|
|
const { dictionary, mode } = props
|
|
|
|
// Hooks
|
|
const verticalNavOptions = useVerticalNav()
|
|
const { updateSettings, settings } = useSettings()
|
|
const { lang: locale } = useParams()
|
|
const { mode: muiMode, systemMode: muiSystemMode } = useColorScheme()
|
|
const theme = useTheme()
|
|
|
|
const { currentUser } = useAuth()
|
|
|
|
// Refs
|
|
const shadowRef = useRef(null)
|
|
|
|
// Vars
|
|
const { isCollapsed, isHovered, collapseVerticalNav, isBreakpointReached } = verticalNavOptions
|
|
const isSemiDark = settings.semiDark
|
|
|
|
const currentMode = muiMode === 'system' ? muiSystemMode : muiMode || mode
|
|
|
|
const isDark = currentMode === 'dark'
|
|
|
|
const scrollMenu = (container: any, isPerfectScrollbar: boolean) => {
|
|
container = isBreakpointReached || !isPerfectScrollbar ? container.target : container
|
|
|
|
if (shadowRef && container.scrollTop > 0) {
|
|
// @ts-ignore
|
|
if (!shadowRef.current.classList.contains('scrolled')) {
|
|
// @ts-ignore
|
|
shadowRef.current.classList.add('scrolled')
|
|
}
|
|
} else {
|
|
// @ts-ignore
|
|
shadowRef.current.classList.remove('scrolled')
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (settings.layout === 'collapsed') {
|
|
collapseVerticalNav(true)
|
|
} else {
|
|
collapseVerticalNav(false)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [settings.layout])
|
|
|
|
return (
|
|
// eslint-disable-next-line lines-around-comment
|
|
// Sidebar Vertical Menu
|
|
<VerticalNav
|
|
customStyles={navigationCustomStyles(verticalNavOptions, theme)}
|
|
collapsedWidth={71}
|
|
backgroundColor='var(--mui-palette-background-paper)'
|
|
// eslint-disable-next-line lines-around-comment
|
|
// The following condition adds the data-dark attribute to the VerticalNav component
|
|
// when semiDark is enabled and the mode or systemMode is light
|
|
{...(isSemiDark &&
|
|
!isDark && {
|
|
'data-dark': ''
|
|
})}
|
|
>
|
|
{/* Nav Header including Logo & nav toggle icons */}
|
|
<NavHeader>
|
|
<Link href={getLocalizedUrl('/', locale as Locale)}>
|
|
<Logo />
|
|
</Link>
|
|
{!(isCollapsed && !isHovered) && (
|
|
<NavCollapseIcons
|
|
lockedIcon={<i className='tabler-circle-dot text-xl' />}
|
|
unlockedIcon={<i className='tabler-circle text-xl' />}
|
|
closeIcon={<i className='tabler-x text-xl' />}
|
|
onClick={() => updateSettings({ layout: !isCollapsed ? 'collapsed' : 'vertical' })}
|
|
/>
|
|
)}
|
|
</NavHeader>
|
|
<StyledBoxForShadow ref={shadowRef} />
|
|
|
|
{currentUser?.role === 'superadmin' ? (
|
|
<SuperAdminVerticalMenu dictionary={dictionary} scrollMenu={scrollMenu} />
|
|
) : (
|
|
<VerticalMenu dictionary={dictionary} scrollMenu={scrollMenu} />
|
|
)}
|
|
</VerticalNav>
|
|
)
|
|
}
|
|
|
|
export default Navigation
|