Limit navbar titles to one line

src/modules/navigation-bar/components/DesktopSideBar.tsx

@@ -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)}
+                        primary={
-                        sx={{ maxWidth: '100%' }}
+                            <TypographyMaxLines
-                        primaryTypographyProps={{
+                                lines={1}
-                            sx: {
+                                variant={isCollapsed ? 'caption' : undefined}
-                                maxWidth: '100%',
+                                sx={{
-                                overflow: 'hidden',
+                                    color: isActive ? 'primary.dark' : undefined,
-                                textOverflow: 'ellipsis',
+                                    ...theme.applyStyles('dark', {
-                                ...(isCollapsed ? theme.typography.caption : {}),
+                                        color: isActive ? 'primary.light' : undefined,
-                                color: isActive ? 'primary.dark' : undefined,
+                                    }),
-                                ...theme.applyStyles('dark', {
+                                }}
-                                    color: isActive ? 'primary.light' : undefined,
+                            >
-                                }),
+                                {t(title)}
-                            },
+                            </TypographyMaxLines>
-                        }}
+                        }
+                        sx={{ maxWidth: '100%', m: 0 }}
                     />
                 </ListItem>
             </CustomTooltip>