Feat/improve mobile display (#843)

* Ok 1

* Finished

* Fix PR

* Fix PR

* Fix desktop

* Fix

* Fix absolute listen click outside

* console.log

* Fix according to code review

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/navbar/components/NavItem.tsx

@@ -1,9 +1,13 @@
 import { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 
+import { useIsMobile } from '@/ui/hooks/useIsMobile';
 import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
 
+import { isNavbarOpenedState } from '../../layout/states/isNavbarOpenedState';
+
 type OwnProps = {
   label: string;
   to?: string;
@@ -79,21 +83,25 @@ const StyledSoonPill = styled.div`
 
 function NavItem({ label, icon, to, onClick, active, danger, soon }: OwnProps) {
   const navigate = useNavigate();
+  const [, setIsNavbarOpened] = useRecoilState(isNavbarOpenedState);
+
+  const isMobile = useIsMobile();
+
+  function handleItemClick() {
+    if (isMobile) {
+      setIsNavbarOpened(false);
+    }
 
-  const onItemClick = () => {
     if (onClick) {
       onClick();
-      return;
-    }
-    if (to) {
+    } else if (to) {
       navigate(to);
-      return;
     }
-  };
+  }
 
   return (
     <StyledItem
-      onClick={onItemClick}
+      onClick={handleItemClick}
       active={active}
       aria-selected={active}
       danger={danger}