Add tooltip when navigation menu isnt expanded (#13583)

<img width="130" height="687" alt="Screenshot 2025-08-04 at 09 56 06"
src="https://github.com/user-attachments/assets/2cbc5c46-6952-4041-b6f2-d68e411629de"
/>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx

@@ -8,10 +8,10 @@ import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/N
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 import { isNavigationDrawerExpandedState } from '../../states/isNavigationDrawerExpanded';
 import { NavigationDrawerBackButton } from './NavigationDrawerBackButton';
 import { NavigationDrawerHeader } from './NavigationDrawerHeader';
-import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 export type NavigationDrawerProps = {
   children?: ReactNode;
@@ -21,7 +21,7 @@ export type NavigationDrawerProps = {
 
 const StyledAnimatedContainer = styled(motion.div)`
   max-height: 100vh;
-  overflow: hidden;
+  overflow: visible;
 `;
 
 const StyledContainer = styled.div<{

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -2,6 +2,7 @@ import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
 import { NavigationDrawerItemBreadcrumb } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb';
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
+import { useNavigationDrawerTooltip } from '@/ui/navigation/navigation-drawer/hooks/useNavigationDrawerTooltip';
 import { NavigationDrawerSubItemState } from '@/ui/navigation/navigation-drawer/types/NavigationDrawerSubItemState';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@@ -12,7 +13,14 @@ import { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import { Pill } from 'twenty-ui/components';
-import { IconComponent, Label, TablerIconsProps } from 'twenty-ui/display';
+import {
+  AppTooltip,
+  IconComponent,
+  Label,
+  TablerIconsProps,
+  TooltipDelay,
+  TooltipPosition,
+} from 'twenty-ui/display';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 import { TriggerEventType, useMouseDownNavigation } from 'twenty-ui/utilities';
 
@@ -263,6 +271,8 @@ export const NavigationDrawerItem = ({
   const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] =
     useRecoilState(isNavigationDrawerExpandedState);
 
+  const { navigationItemId } = useNavigationDrawerTooltip(label, to);
+
   const showBreadcrumb = indentationLevel === 2;
   const showStyledSpacer = Boolean(
     soon || isNew || count || keyboard || rightOptions,
@@ -287,6 +297,7 @@ export const NavigationDrawerItem = ({
   return (
     <StyledNavigationDrawerItemContainer>
       <StyledItem
+        id={navigationItemId}
         className={`navigation-drawer-item ${className || ''}`}
         onClick={
           mouseUpNavigation ? onClick : handleMouseDownNavigationClickClick
@@ -388,6 +399,16 @@ export const NavigationDrawerItem = ({
           )}
         </StyledItemElementsContainer>
       </StyledItem>
+
+      {!isNavigationDrawerExpanded && !isMobile && (
+        <AppTooltip
+          anchorSelect={`#${navigationItemId}`}
+          content={label}
+          place={TooltipPosition.Right}
+          delay={TooltipDelay.noDelay}
+          positionStrategy="fixed"
+        />
+      )}
     </StyledNavigationDrawerItemContainer>
   );
 };

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/hooks/useNavigationDrawerTooltip.ts

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import { slugify } from 'transliteration';
+
+export const useNavigationDrawerTooltip = (label: string, to?: string) => {
+  const navigationItemId = useMemo(() => {
+    const slugifiedLabel = slugify(label);
+    const slugifiedRoute = to ? `-${slugify(to)}` : '';
+    const baseId = `nav-item-${slugifiedLabel}${slugifiedRoute}`;
+    return baseId.length > 50 ? baseId.substring(0, 50) : baseId;
+  }, [label, to]);
+
+  return { navigationItemId };
+};