diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx index 0e59927a03..c702fba3ed 100644 --- 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 ( - + <> { } /> - {isNavigationSectionOpen && ( <> {isFavoriteFolderEnabled && ( @@ -97,41 +103,43 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => { )} {orphanFavorites.length > 0 && ( - ( - } - active={isLocationMatchingFavorite( - currentPath, - currentViewPath, - favorite, - )} - to={favorite.link} - rightOptions={ - deleteFavorite(favorite.id)} - accent="tertiary" - /> - } - isDraggable={true} - /> - } - /> - ))} - /> + + ( + } + active={isLocationMatchingFavorite( + currentPath, + currentViewPath, + favorite, + )} + to={favorite.link} + rightOptions={ + deleteFavorite(favorite.id)} + accent="tertiary" + /> + } + isDraggable={true} + /> + } + /> + ))} + /> + )} )} - + ); }; diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx index a5f4c54ec2..f1f3077641 100644 --- 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 ( <> - + ` 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 = ({ > diff --git 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 index df44b32745..d0da847ecd 100644 --- 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)}; diff --git 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 index 4730bccdc9..c59003d1a2 100644 --- 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 = ({ {rightOptions && ( { e.stopPropagation(); diff --git 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 index 3f100af889..11ed9a7120 100644 --- 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, diff --git 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 index ac1c901254..63e2fa6837 100644 --- 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 };