import clsx from "clsx" ; import React from "react" ; import { Logo } from "../icons/Logo" ; import { LogoDark } from "../icons/LogoDark" ; import { localStorageKeys } from "../localStorageKeys" ; import { makeStyles , useTheme } from "../theme" ; import useLocalStorage from "../tools/useLocalStorage" ; import { ExpandButton } from "./ExpandButton" ; import { MenuItem , menuWidth , shrunkMenuWidth } from "./MenuItem" ; import { BaseSidebarProps } from "./types" ; const useStyles = makeStyles ( ( theme ) => ( { expandButton : { marginLeft : theme . spacing ( 1.5 ) } , float : { height : "100vh" , position : "fixed" , overflowY : "auto" , overflowX : "hidden" , paddingBottom : theme . spacing ( 3 ) } , logo : { margin : `36px 0 ${ theme . spacing ( 3 ) } ${ theme . spacing ( 2.5 ) }` } , root : { transition : "width 0.5s ease" , width : menuWidth } , rootShrink : { width : shrunkMenuWidth } , toolbarContainer : { margin : theme . spacing ( 1 , 0 , 1 , 1.5 ) } } ) , { name : "SideBar" } ) ; export interface SidebarProps extends BaseSidebarProps { activeId : string ; } export const Sidebar = ( { activeId , menuItems , toolbar , onMenuItemClick , } ) => { const classes = useStyles ( { } ) ; const { value : isShrunkStr , setValue : setShrink } = useLocalStorage ( localStorageKeys . menuShrink , false . toString ( ) ) ; const isShrunk = isShrunkStr === "true" ; const { themeType } = useTheme ( ) ; return ( < div className = { clsx ( classes . root , { [ classes . rootShrink ] : isShrunk } ) } > < div className = { classes . float } > < div className = { classes . logo } > { themeType === "dark" ? < LogoDark /> : <Logo / > } < /div> { menuItems . map ( ( menuItem ) => ( < MenuItem activeId = { activeId } isMenuShrunk = { isShrunk } menuItem = { menuItem } onClick = { onMenuItemClick } key = { menuItem . ariaLabel } / > ) ) } { toolbar && < div className = { classes . toolbarContainer } > { toolbar } < /div>} < ExpandButton className = { classes . expandButton } isShrunk = { isShrunk } onClick = { ( ) => setShrink ( ( ! isShrunk ) . toString ( ) ) } /> < /div> < /div>); } ; Sidebar . displayName = "SideBar" ;