First commit
This commit is contained in:
@@ -0,0 +1,117 @@
|
||||
// MUI Imports
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
// Third-party Imports
|
||||
import PerfectScrollbar from "react-perfect-scrollbar";
|
||||
|
||||
// Type Imports
|
||||
import type { VerticalMenuContextProps } from "@menu/components/vertical-menu/Menu";
|
||||
|
||||
// Component Imports
|
||||
import { Menu, SubMenu, MenuItem, MenuSection } from "@menu/vertical-menu";
|
||||
import CustomChip from "@core/components/mui/Chip";
|
||||
|
||||
// Constants
|
||||
import { navigationLabels } from "@/constants/navigation";
|
||||
|
||||
// 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 = {
|
||||
scrollMenu: (container: any, isPerfectScrollbar: boolean) => void;
|
||||
};
|
||||
|
||||
const RenderExpandIcon = ({
|
||||
open,
|
||||
transitionDuration,
|
||||
}: RenderExpandIconProps) => (
|
||||
<StyledVerticalNavExpandIcon
|
||||
open={open}
|
||||
transitionDuration={transitionDuration}
|
||||
>
|
||||
<i className="tabler-chevron-right" />
|
||||
</StyledVerticalNavExpandIcon>
|
||||
);
|
||||
|
||||
const VerticalMenu = ({ scrollMenu }: Props) => {
|
||||
// Hooks
|
||||
const theme = useTheme();
|
||||
const verticalNavOptions = useVerticalNav();
|
||||
|
||||
// Vars
|
||||
const { isBreakpointReached, transitionDuration } = verticalNavOptions;
|
||||
|
||||
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)}
|
||||
>
|
||||
<MenuItem
|
||||
href={`/dashboards/academy`}
|
||||
icon={<i className="tabler-smart-home" />}
|
||||
>
|
||||
{navigationLabels.dashboards}
|
||||
</MenuItem>
|
||||
|
||||
|
||||
|
||||
{/* </MenuSection> */}
|
||||
</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)}
|
||||
>
|
||||
<GenerateVerticalMenu menuData={menuData(dictionary)} />
|
||||
</Menu> */}
|
||||
</ScrollWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default VerticalMenu;
|
||||
Reference in New Issue
Block a user