WIP

2024-11-21 16:12:18 +03:00 · 2024-11-20 11:01:06 +01:00 · 2024-11-20 11:01:06 +01:00 · 381da399b1
commit 381da399b1
parent 78d7914c57
7 changed files with 110 additions and 77 deletions
--- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx
+++ b/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,41 +103,43 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
          )}

          {orphanFavorites.length > 0 && (
-            <DraggableList
-              onDragEnd={handleReorderFavorite}
-              draggableItems={orphanFavorites.map((favorite, index) => (
-                <DraggableItem
-                  key={favorite.id}
-                  draggableId={favorite.id}
-                  index={index}
-                  itemComponent={
-                    <NavigationDrawerItem
-                      key={favorite.id}
-                      className="navigation-drawer-item"
-                      label={favorite.labelIdentifier}
-                      Icon={() => <FavoriteIcon favorite={favorite} />}
-                      active={isLocationMatchingFavorite(
-                        currentPath,
-                        currentViewPath,
-                        favorite,
-                      )}
-                      to={favorite.link}
-                      rightOptions={
-                        <LightIconButton
-                          Icon={IconHeartOff}
-                          onClick={() => deleteFavorite(favorite.id)}
-                          accent="tertiary"
-                        />
-                      }
-                      isDraggable={true}
-                    />
-                  }
-                />
-              ))}
-            />
+            <StyledFavoriteContainer>
+              <DraggableList
+                onDragEnd={handleReorderFavorite}
+                draggableItems={orphanFavorites.map((favorite, index) => (
+                  <DraggableItem
+                    key={favorite.id}
+                    draggableId={favorite.id}
+                    index={index}
+                    itemComponent={
+                      <NavigationDrawerItem
+                        key={favorite.id}
+                        className="navigation-drawer-item"
+                        label={favorite.labelIdentifier}
+                        Icon={() => <FavoriteIcon favorite={favorite} />}
+                        active={isLocationMatchingFavorite(
+                          currentPath,
+                          currentViewPath,
+                          favorite,
+                        )}
+                        to={favorite.link}
+                        rightOptions={
+                          <LightIconButton
+                            Icon={IconHeartOff}
+                            onClick={() => deleteFavorite(favorite.id)}
+                            accent="tertiary"
+                          />
+                        }
+                        isDraggable={true}
+                      />
+                    }
+                  />
+                ))}
+              />
+            </StyledFavoriteContainer>
          )}
        </>
      )}
-    </NavigationDrawerSection>
+    </>
  );
 };
--- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
+++ b/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}
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
+++ b/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}
      >
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
+++ b/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)};
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+++ b/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();
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx
+++ b/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,
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
+++ b/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 };