WIP

packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx

@@ -22,10 +22,17 @@ import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableIt
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
-import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
 import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import styled from '@emotion/styled';
+
+const StyledFavoriteContainer = styled.div`
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  display: flex;
+
+  flex-direction: column;
+`;
 
 export const CurrentWorkspaceMemberFavoritesFolders = () => {
   const currentPath = useLocation().pathname;
@@ -72,7 +79,7 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
   }
 
   return (
-    <NavigationDrawerSection>
+    <>
       <NavigationDrawerAnimatedCollapseWrapper>
         <NavigationDrawerSectionTitle
           label="Favorites"
@@ -87,7 +94,6 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
           }
         />
       </NavigationDrawerAnimatedCollapseWrapper>
-
       {isNavigationSectionOpen && (
         <>
           {isFavoriteFolderEnabled && (
@@ -97,6 +103,7 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
           )}
 
           {orphanFavorites.length > 0 && (
+            <StyledFavoriteContainer>
               <DraggableList
                 onDragEnd={handleReorderFavorite}
                 draggableItems={orphanFavorites.map((favorite, index) => (
@@ -129,9 +136,10 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
                   />
                 ))}
               />
+            </StyledFavoriteContainer>
           )}
         </>
       )}
-    </NavigationDrawerSection>
+    </>
   );
 };

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx

@@ -1,6 +1,6 @@
 import { useLocation } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import { IconSearch, IconSettings } from 'twenty-ui';
+import { IconSearch, IconSettings, MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
@@ -19,14 +19,16 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import styled from '@emotion/styled';
 import { useEffect } from 'react';
 
-const StyledMainSection = styled(NavigationDrawerSection)`
-  min-height: fit-content;
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    flex-direction: row;
+    height: ${({ theme }) => theme.spacing(8)};
+  }
 `;
 
-const StyledContainer = styled.div`
-  overflow-x: hidden;
-  overflow-y: auto;
-`;
 export const MainNavigationDrawerItems = () => {
   const isMobile = useIsMobile();
   const { toggleCommandMenu } = useCommandMenu();
@@ -54,14 +56,12 @@ export const MainNavigationDrawerItems = () => {
         : 'main';
 
   useEffect(() => {
-    if (isMobile) {
-      setIsNavigationDrawerExpanded(false);
-    }
+    setIsNavigationDrawerExpanded(!isMobile);
   }, [isMobile, setIsNavigationDrawerExpanded]);
 
   return (
     <>
-      <NavigationDrawerSection isMobile={isMobile}>
+      <NavigationDrawerSection>
         <NavigationDrawerItem
           label="Search"
           Icon={IconSearch}

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

@@ -29,36 +29,37 @@ const StyledAnimatedContainer = styled(motion.div)<{ isSettings?: boolean }>`
 
 const StyledContainer = styled.div<{
   isSettings?: boolean;
-  isMobile?: boolean;
 }>`
   box-sizing: border-box;
   display: flex;
-  flex-direction: ${({ isMobile }) => (isMobile ? 'row' : 'column')};
+  flex-direction: column;
   width: ${NAV_DRAWER_WIDTHS.menu.desktop.expanded}px;
   gap: ${({ theme }) => theme.spacing(3)};
   height: 100%;
-  padding: ${({ theme, isSettings, isMobile }) =>
-    isSettings
-      ? isMobile
-        ? theme.spacing(3, 8)
-        : theme.spacing(3, 8, 4, 0)
-      : theme.spacing(3, 2, 2)};
+  padding: ${({ theme, isSettings }) =>
+    isSettings ? theme.spacing(3, 8, 4, 0) : theme.spacing(3, 2, 2)};
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: 100%;
-    padding-left: 20px;
-    padding-right: 20px;
+
+    flex-direction: row;
+
+    padding: ${({ theme }) => theme.spacing(3)};
   }
 `;
+
 const StyledItemsContainer = styled.div<{
   isMobile?: boolean;
 }>`
   display: flex;
-  flex-direction: ${({ isMobile }) => (isMobile ? 'row' : 'column')};
-  margin-bottom: auto;
+  flex-direction: column;
   overflow: hidden;
   gap: ${({ theme }) => theme.spacing(3)};
   flex: 1;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    flex-direction: row;
+  }
 `;
 
 export const NavigationDrawer = ({
@@ -109,7 +110,6 @@ export const NavigationDrawer = ({
     >
       <StyledContainer
         isSettings={isSettingsDrawer}
-        isMobile={isMobile}
         onMouseEnter={handleHover}
         onMouseLeave={handleMouseLeave}
       >

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

@@ -10,14 +10,24 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { isNonEmptyString } from '@sniptt/guards';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton';
 
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
-  height: ${({ theme }) => theme.spacing(7)};
+  height: ${({ theme }) => theme.spacing(8)};
   user-select: none;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    height: ${({ theme }) => theme.spacing(8)};
+    width: ${({ theme }) => theme.spacing(8)};
+
+    align-items: center;
+    justify-content: center;
+  }
 `;
+
 const StyledSingleWorkspaceContainer = styled(StyledContainer)`
   gap: ${({ theme }) => theme.spacing(2)};
   padding: ${({ theme }) => theme.spacing(1)};

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

@@ -158,8 +158,16 @@ const StyledNavigationDrawerItemContainer = styled.div<{
   isMobile?: boolean;
 }>`
   display: flex;
-  width: ${({ isMobile }) => (isMobile ? 'auto' : '100%')};
-  flex-grow: ${({ isMobile }) => (isMobile ? 1 : 0)};
+  width: 100%;
+  flex-grow: 0;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: ${({ theme }) => theme.spacing(8)};
+    height: ${({ theme }) => theme.spacing(8)};
+
+    align-items: center;
+    justify-content: center;
+  }
 `;
 
 const StyledSpacer = styled.span`
@@ -167,12 +175,10 @@ const StyledSpacer = styled.span`
 `;
 
 const StyledRightOptionsContainer = styled.div<{
-  isMobile: boolean;
   active: boolean;
 }>`
   margin-left: auto;
-  visibility: ${({ isMobile, active }) =>
-    isMobile || active ? 'visible' : 'hidden'};
+  visibility: ${({ active }) => (active ? 'visible' : 'hidden')};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -185,6 +191,10 @@ const StyledRightOptionsContainer = styled.div<{
   .navigation-drawer-item:hover & {
     visibility: visible;
   }
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    visibility: 'visible';
+  }
 `;
 
 export const NavigationDrawerItem = ({
@@ -283,7 +293,6 @@ export const NavigationDrawerItem = ({
           <NavigationDrawerAnimatedCollapseWrapper>
             {rightOptions && (
               <StyledRightOptionsContainer
-                isMobile={isMobile}
                 active={active || false}
                 onClick={(e) => {
                   e.stopPropagation();

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

@@ -32,10 +32,11 @@ export const NavigationDrawerItemsCollapsableContainer = ({
     flexGrow: 1,
   };
   if (!isExpanded) {
-    animate = { width: 24, flexGrow: 1 };
+    animate = { width: 32, flexGrow: 1 };
     if (isGroup) {
       animate = {
-        width: isMobile ? 'auto' : 24,
+        width: isMobile ? 'auto' : 32,
+        flexGrow: isMobile ? 0 : 1,
         backgroundColor: theme.background.transparent.lighter,
         border: `1px solid ${theme.background.transparent.lighter}`,
         borderRadius: theme.border.radius.sm,

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

@@ -1,16 +1,21 @@
 import styled from '@emotion/styled';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 
-const StyledSection = styled.div<{
-  isMobile?: boolean;
-}>`
+const StyledSection = styled.div`
   display: flex;
-  gap: ${({ theme, isMobile }) =>
-    isMobile ? theme.spacing(3) : theme.betweenSiblingsGap};
-  margin-bottom: ${({ theme }) => theme.spacing(3)};
+  gap: ${({ theme }) => theme.betweenSiblingsGap};
   overflow: hidden;
-  flex-direction: ${({ isMobile }) => (isMobile ? 'row' : 'column')};
-  min-width: ${({ isMobile }) => (isMobile ? '20%' : '')};
+  flex-direction: column;
   flex-shrink: 1;
+
+  min-height: fit-content;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    gap: ${({ theme }) => theme.spacing(0.5)};
+    flex-direction: row;
+    min-width: fit-content;
+    height: ${({ theme }) => theme.spacing(8)};
+  }
 `;
 
 export { StyledSection as NavigationDrawerSection };