// ** 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