Limit navbar titles to one line

This commit is contained in:
schroda
2025-03-20 15:07:28 +01:00
parent 1388b53567
commit 39a9b7e0ac

View File

@@ -26,6 +26,7 @@ import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
const DrawerHeader = styled('div')(({ theme }) => ({
display: 'flex',
@@ -68,20 +69,21 @@ const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent }
/>
</ListItemIcon>
<ListItemText
primary={t(title)}
sx={{ maxWidth: '100%' }}
primaryTypographyProps={{
sx: {
maxWidth: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
...(isCollapsed ? theme.typography.caption : {}),
color: isActive ? 'primary.dark' : undefined,
...theme.applyStyles('dark', {
color: isActive ? 'primary.light' : undefined,
}),
},
}}
primary={
<TypographyMaxLines
lines={1}
variant={isCollapsed ? 'caption' : undefined}
sx={{
color: isActive ? 'primary.dark' : undefined,
...theme.applyStyles('dark', {
color: isActive ? 'primary.light' : undefined,
}),
}}
>
{t(title)}
</TypographyMaxLines>
}
sx={{ maxWidth: '100%', m: 0 }}
/>
</ListItem>
</CustomTooltip>