// ** MUI Imports import Divider from '@mui/material/Divider' import Typography from '@mui/material/Typography' import { styled, useTheme } from '@mui/material/styles' import MuiListSubheader, { ListSubheaderProps } from '@mui/material/ListSubheader' // ** Types import { NavSectionTitle } from 'src/@core/layouts/types' import { Settings } from 'src/@core/context/settingsContext' // ** Custom Components Imports import Translations from 'src/layouts/components/Translations' import CanViewNavSectionTitle from 'src/layouts/components/acl/CanViewNavSectionTitle' interface Props { navHover: boolean settings: Settings item: NavSectionTitle collapsedNavWidth: number navigationBorderWidth: number } // ** Styled Components const ListSubheader = styled((props: ListSubheaderProps) => )( ({ theme }) => ({ lineHeight: 1, display: 'flex', position: 'static', padding: theme.spacing(3), marginTop: theme.spacing(6.25), backgroundColor: 'transparent', color: theme.palette.text.disabled, transition: 'padding-left .25s ease-in-out' }) ) const VerticalNavSectionTitle = (props: Props) => { // ** Props const { item, navHover, settings, collapsedNavWidth, navigationBorderWidth } = props // ** Hook const theme = useTheme() // ** Vars const { mode, navCollapsed } = settings const conditionalBorderColor = () => { if (mode === 'semi-dark') { return { '&, &:before': { borderColor: `rgba(${theme.palette.customColors.dark}, 0.12)` } } } else return {} } const conditionalColor = () => { if (mode === 'semi-dark') { return { color: `rgba(${theme.palette.customColors.dark}, 0.38) !important` } } else { return { color: 'text.disabled' } } } return ( {navCollapsed && !navHover ? null : ( )} ) } export default VerticalNavSectionTitle