100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
import classNames from 'classnames'
|
|
import ScrollBar from '@/components/ui/ScrollBar'
|
|
import {
|
|
SIDE_NAV_WIDTH,
|
|
SIDE_NAV_COLLAPSED_WIDTH,
|
|
NAV_MODE_DARK,
|
|
NAV_MODE_THEMED,
|
|
NAV_MODE_TRANSPARENT,
|
|
SIDE_NAV_CONTENT_GUTTER,
|
|
LOGO_X_GUTTER,
|
|
} from '@/constants/theme.constant'
|
|
import Logo from '@/components/template/Logo'
|
|
import VerticalMenuContent from '@/components/template/VerticalMenuContent'
|
|
import useResponsive from '@/utils/hooks/useResponsive'
|
|
import { useStoreState } from '@/store'
|
|
|
|
const sideNavStyle = {
|
|
width: SIDE_NAV_WIDTH,
|
|
minWidth: SIDE_NAV_WIDTH,
|
|
}
|
|
|
|
const sideNavCollapseStyle = {
|
|
width: SIDE_NAV_COLLAPSED_WIDTH,
|
|
minWidth: SIDE_NAV_COLLAPSED_WIDTH,
|
|
}
|
|
|
|
const SideNav = () => {
|
|
const themeColor = useStoreState((state) => state.theme.themeColor)
|
|
const primaryColorLevel = useStoreState((state) => state.theme.primaryColorLevel)
|
|
const navMode = useStoreState((state) => state.theme.navMode)
|
|
const mode = useStoreState((state) => state.theme.mode)
|
|
const direction = useStoreState((state) => state.theme.direction)
|
|
const currentRouteKey = useStoreState((state) => state.base.common.currentRouteKey)
|
|
const sideNavCollapse = useStoreState((state) => state.theme.layout.sideNavCollapse)
|
|
const userAuthority = useStoreState((state) => state.auth.user.authority)
|
|
|
|
const { larger } = useResponsive()
|
|
|
|
const sideNavColor = () => {
|
|
if (navMode === NAV_MODE_THEMED) {
|
|
return `bg-${themeColor}-${primaryColorLevel} side-nav-${navMode}`
|
|
}
|
|
return `side-nav-${navMode}`
|
|
}
|
|
|
|
const logoMode = () => {
|
|
if (navMode === NAV_MODE_THEMED) {
|
|
return NAV_MODE_DARK
|
|
}
|
|
|
|
if (navMode === NAV_MODE_TRANSPARENT) {
|
|
return mode
|
|
}
|
|
|
|
return navMode
|
|
}
|
|
|
|
const { mainMenu: navigationConfig } = useStoreState((state) => state.abpConfig.menu)
|
|
|
|
const menuContent = (
|
|
<VerticalMenuContent
|
|
navMode={navMode}
|
|
collapsed={sideNavCollapse}
|
|
navigationTree={navigationConfig}
|
|
routeKey={currentRouteKey}
|
|
userAuthority={userAuthority as string[]}
|
|
direction={direction}
|
|
/>
|
|
)
|
|
|
|
return (
|
|
<>
|
|
{larger.md && (
|
|
<div
|
|
style={sideNavCollapse ? sideNavCollapseStyle : sideNavStyle}
|
|
className={classNames('side-nav', sideNavColor(), !sideNavCollapse && 'side-nav-expand')}
|
|
>
|
|
<div className="side-nav-header py-2">
|
|
<Logo
|
|
mode={logoMode()}
|
|
type={sideNavCollapse ? 'streamline' : 'full'}
|
|
className={sideNavCollapse ? SIDE_NAV_CONTENT_GUTTER : LOGO_X_GUTTER}
|
|
/>
|
|
</div>
|
|
{sideNavCollapse ? (
|
|
menuContent
|
|
) : (
|
|
<div className="side-nav-content">
|
|
<ScrollBar autoHide direction={direction}>
|
|
{menuContent}
|
|
</ScrollBar>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default SideNav
|