Left menu and chip links (#12294)

Small optimization for faster loading (gaining ~80ms - average time of a
click)

It might seem a little over-engineered but there are a lot of edge cases
and I couldn't find a simpler solution

I also tried to tackle Link Chips but it's more complex so this will be
for another PR

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

@@ -11,10 +11,11 @@ import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
-import { capitalize, isDefined } from 'twenty-shared/utils';
+import { capitalize } from 'twenty-shared/utils';
+import { Pill } from 'twenty-ui/components';
 import { IconComponent, Label, TablerIconsProps } from 'twenty-ui/display';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
-import { Pill } from 'twenty-ui/components';
+import { TriggerEventType, useMouseDownNavigation } from 'twenty-ui/utilities';
 
 const DEFAULT_INDENTATION_LEVEL = 1;
 
@@ -37,6 +38,7 @@ export type NavigationDrawerItemProps = {
   rightOptions?: ReactNode;
   isDragging?: boolean;
   isRightOptionsDropdownOpen?: boolean;
+  triggerEvent?: TriggerEventType;
 };
 
 type StyledItemProps = Pick<
@@ -250,6 +252,7 @@ export const NavigationDrawerItem = ({
   rightOptions,
   isDragging,
   isRightOptionsDropdownOpen,
+  triggerEvent,
 }: NavigationDrawerItemProps) => {
   const theme = useTheme();
   const isMobile = useIsMobile();
@@ -259,22 +262,26 @@ export const NavigationDrawerItem = ({
   const showBreadcrumb = indentationLevel === 2;
   const showStyledSpacer = !!soon || !!count || !!keyboard || !!rightOptions;
 
-  const handleItemClick = () => {
+  const handleMobileNavigation = () => {
     if (isMobile) {
       setIsNavigationDrawerExpanded(false);
     }
-
-    if (isDefined(onClick)) {
-      onClick();
-      return;
-    }
   };
 
+  const { onClick: handleClick, onMouseDown: handleMouseDown } =
+    useMouseDownNavigation({
+      to,
+      onClick,
+      onBeforeNavigation: handleMobileNavigation,
+      triggerEvent,
+    });
+
   return (
     <StyledNavigationDrawerItemContainer>
       <StyledItem
         className={`navigation-drawer-item ${className || ''}`}
-        onClick={handleItemClick}
+        onClick={handleClick}
+        onMouseDown={handleMouseDown}
         active={active}
         aria-selected={active}
         danger={danger}

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

@@ -20,6 +20,7 @@ export const NavigationDrawerSubItem = ({
   subItemState,
   rightOptions,
   isDragging,
+  triggerEvent,
 }: NavigationDrawerSubItemProps) => {
   return (
     <NavigationDrawerItem
@@ -38,6 +39,7 @@ export const NavigationDrawerSubItem = ({
       keyboard={keyboard}
       rightOptions={rightOptions}
       isDragging={isDragging}
+      triggerEvent={triggerEvent}
     />
   );
 };