From 4ba9c0ca0b2cb79df940c25427e37a76534f5b46 Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Mon, 18 May 2026 20:52:03 +0530 Subject: [PATCH] [Navigation Drawer] Multiple fixes in settings and app drawer (#20634) closes - https://discord.com/channels/1130383047699738754/1487720717192527942 https://github.com/user-attachments/assets/6db2df8b-be01-4b5f-a958-575d87b41559 ~~waiting on @Bonapara 's feedback!~~ --- .../MainNavigationDrawerTabsRow.tsx | 2 +- .../components/MobileNavigationBar.tsx | 8 +++- .../navigation/hooks/useIsSettingsDrawer.ts | 6 +-- .../hooks/useNavigationDrawerExpanded.ts | 6 ++- .../layout/page/components/DefaultLayout.tsx | 2 + .../ui/layout/page/components/PageBody.tsx | 6 ++- .../ui/layout/page/components/PageHeader.tsx | 4 +- .../components/MobileBreadcrumb.tsx | 20 +++----- .../components/NavigationDrawer.tsx | 22 ++++----- .../NavigationDrawerFixedContent.tsx | 14 +++--- .../components/NavigationDrawerHeader.tsx | 33 +++++++++---- .../components/NavigationDrawerItem.tsx | 47 +++++++------------ .../NavigationDrawerItemBreadcrumb.tsx | 10 +++- .../NavigationDrawerScrollableContent.tsx | 2 +- .../NavigationDrawerSectionTitle.tsx | 4 +- 15 files changed, 100 insertions(+), 86 deletions(-) diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx index 1650bf696e..42303c1459 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx @@ -120,7 +120,7 @@ const StyledNewChatButton = styled.div` justify-content: center; min-width: 0; overflow: hidden; - padding-inline: ${themeCssVariables.spacing[1]}; + padding-inline: ${themeCssVariables.spacing[2]}; transition: background calc(${themeCssVariables.animation.duration.fast} * 1s) ease, color calc(${themeCssVariables.animation.duration.fast} * 1s) ease; diff --git a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx index 7e1430d92d..6e8e349d3f 100644 --- a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx @@ -10,6 +10,7 @@ import { useOpenRecordsSearchPageInSidePanel } from '@/side-panel/hooks/useOpenR import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu'; import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; +import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState'; import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; @@ -29,6 +30,7 @@ export const MobileNavigationBar = () => { const navigate = useNavigate(); const { defaultHomePagePath } = useDefaultHomePagePath(); const isSidePanelOpened = useAtomStateValue(isSidePanelOpenedState); + const navigationMemorizedUrl = useAtomStateValue(navigationMemorizedUrlState); const { closeSidePanelMenu } = useSidePanelMenu(); const { openRecordsSearchPage } = useOpenRecordsSearchPageInSidePanel(); const isSettingsPage = useIsSettingsPage(); @@ -70,7 +72,11 @@ export const MobileNavigationBar = () => { setCurrentMobileNavigationDrawer('main'); if (isSettingsPage) { - navigate(defaultHomePagePath); + navigate( + navigationMemorizedUrl !== '/' + ? navigationMemorizedUrl + : defaultHomePagePath, + ); } }, }, diff --git a/packages/twenty-front/src/modules/navigation/hooks/useIsSettingsDrawer.ts b/packages/twenty-front/src/modules/navigation/hooks/useIsSettingsDrawer.ts index 07adcb0f97..b4aee03f66 100644 --- a/packages/twenty-front/src/modules/navigation/hooks/useIsSettingsDrawer.ts +++ b/packages/twenty-front/src/modules/navigation/hooks/useIsSettingsDrawer.ts @@ -9,7 +9,7 @@ export const useIsSettingsDrawer = () => { const currentMobileNavigationDrawer = useAtomStateValue( currentMobileNavigationDrawerState, ); - return isMobile - ? currentMobileNavigationDrawer === 'settings' - : isSettingsPage; + return ( + isSettingsPage || (isMobile && currentMobileNavigationDrawer === 'settings') + ); }; diff --git a/packages/twenty-front/src/modules/navigation/hooks/useNavigationDrawerExpanded.ts b/packages/twenty-front/src/modules/navigation/hooks/useNavigationDrawerExpanded.ts index 0253b65ed1..be250cd4b3 100644 --- a/packages/twenty-front/src/modules/navigation/hooks/useNavigationDrawerExpanded.ts +++ b/packages/twenty-front/src/modules/navigation/hooks/useNavigationDrawerExpanded.ts @@ -1,11 +1,15 @@ import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; export const useNavigationDrawerExpanded = () => { + const isMobile = useIsMobile(); const isSettingsDrawer = useIsSettingsDrawer(); const isNavigationDrawerExpanded = useAtomStateValue( isNavigationDrawerExpandedState, ); - return isSettingsDrawer || isNavigationDrawerExpanded; + return isMobile + ? isNavigationDrawerExpanded + : isSettingsDrawer || isNavigationDrawerExpanded; }; diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx index e8a9722489..95cb427332 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx @@ -48,6 +48,7 @@ const StyledPageContainerBase = styled.div` flex: 1 1 auto; flex-direction: row; min-height: 0; + min-width: 0; `; const StyledPageContainer = motion.create(StyledPageContainerBase); @@ -58,6 +59,7 @@ const StyledNavigationDrawerWrapper = styled.div` const StyledMainContainer = styled.div` display: flex; flex: 0 1 100%; + min-width: 0; overflow: hidden; `; diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageBody.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageBody.tsx index 4cefe8a24b..a2b5c62c5b 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/PageBody.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageBody.tsx @@ -2,7 +2,7 @@ import { styled } from '@linaria/react'; import { type ReactNode } from 'react'; import { PagePanel } from './PagePanel'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; type PageBodyProps = { children: ReactNode; @@ -21,6 +21,10 @@ const StyledMainContainer = styled.div` padding-left: 0; padding-right: ${themeCssVariables.spacing[3]}; width: 100%; + + @media (max-width: ${MOBILE_VIEWPORT}px) { + padding-left: ${themeCssVariables.spacing[3]}; + } `; type LeftContainerProps = { diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx index 79db033f80..5d2abda0fb 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx @@ -3,6 +3,7 @@ import { type ReactNode, useContext } from 'react'; import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton'; +import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage'; import { useNavigationDrawerExpanded } from '@/navigation/hooks/useNavigationDrawerExpanded'; import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId'; import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight'; @@ -104,6 +105,7 @@ export const PageHeader = ({ className, }: PageHeaderProps) => { const isMobile = useIsMobile(); + const isSettingsPage = useIsSettingsPage(); const { theme } = useContext(ThemeContext); const isNavigationDrawerExpanded = useNavigationDrawerExpanded(); @@ -111,7 +113,7 @@ export const PageHeader = ({ - {!isMobile && !isNavigationDrawerExpanded && ( + {!isNavigationDrawerExpanded && (!isMobile || isSettingsPage) && ( )} {hasClosePageButton && ( diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx index e68e0eef8d..9f5e4c9595 100644 --- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx @@ -1,5 +1,5 @@ import { t } from '@lingui/core/macro'; -import { useOpenSettingsMenu } from '@/navigation/hooks/useOpenSettings'; +import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage'; import { styled } from '@linaria/react'; import { isNonEmptyString } from '@sniptt/guards'; import { type ReactNode, useContext } from 'react'; @@ -47,14 +47,13 @@ export const MobileBreadcrumb = ({ links, }: MobileBreadcrumbProps) => { const { theme } = useContext(ThemeContext); - const { openSettingsMenu } = useOpenSettingsMenu(); + const isSettingsPage = useIsSettingsPage(); - const handleBackToSettingsClick = () => { - openSettingsMenu(); - }; + if (isSettingsPage && links.length <= 2) { + return null; + } const previousLink = links[links.length - 2]; - const shouldRedirectToSettings = links.length === 2; const text = isNonEmptyString(previousLink.children) ? previousLink.children @@ -64,14 +63,7 @@ export const MobileBreadcrumb = ({ return ( - {shouldRedirectToSettings ? ( - <> - - - {t`Back to Settings`} - - - ) : previousLink?.href ? ( + {previousLink?.href ? ( <> diff --git 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 index 2327bb9f67..d7f275417f 100644 --- 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 @@ -47,13 +47,12 @@ const StyledAnimatedContainer = styled.div<{ : `${NAVIGATION_DRAWER_COLLAPSED_WIDTH}px`}; @media (max-width: ${MOBILE_VIEWPORT}px) { - width: ${({ isExpanded }) => (isExpanded ? '100%' : '0')}; + width: ${({ isExpanded }) => (isExpanded ? '100vw' : '0')}; } `; const StyledContainer = styled.div<{ isSettings?: boolean; - isMobile?: boolean; isExpanded?: boolean; }>` box-sizing: border-box; @@ -61,18 +60,17 @@ const StyledContainer = styled.div<{ flex-direction: column; gap: ${themeCssVariables.spacing[3]}; height: 100%; - padding: ${({ isSettings, isMobile }) => + padding: ${({ isSettings }) => isSettings - ? isMobile - ? `${themeCssVariables.spacing[3]} 0 0 ${themeCssVariables.spacing[8]}` - : `${themeCssVariables.spacing[3]} 0 ${themeCssVariables.spacing[4]} 0` + ? `${themeCssVariables.spacing[3]} 0 ${themeCssVariables.spacing[4]} 0` : `${themeCssVariables.spacing[3]} 0 ${themeCssVariables.spacing[4]} ${themeCssVariables.spacing[2]}`}; width: ${({ isExpanded }) => isExpanded ? `var(${NAVIGATION_DRAWER_WIDTH_VAR})` : '100%'}; @media (max-width: ${MOBILE_VIEWPORT}px) { + gap: ${themeCssVariables.spacing[4]}; width: 100%; - padding-left: ${themeCssVariables.spacing[5]}; - padding-right: ${themeCssVariables.spacing[5]}; + padding-left: ${themeCssVariables.spacing[2]}; + padding-right: ${themeCssVariables.spacing[2]}; } `; @@ -125,12 +123,8 @@ export const NavigationDrawer = ({ isExpanded={isExpanded} isResizing={isResizing} > - - {isSettingsDrawer && title ? ( + + {!isMobile && isSettingsDrawer && title ? ( ) : ( diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent.tsx index 51a46b2137..47aca16a5e 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent.tsx @@ -10,14 +10,14 @@ const StyledFixedContainer = styled.div<{ isSettings?: boolean; isMobile?: boolean; }>` - padding-left: ${({ isSettings }) => - isSettings ? themeCssVariables.spacing[5] : '0'}; + padding-left: ${({ isSettings, isMobile }) => + isSettings || isMobile ? themeCssVariables.spacing[5] : '0'}; padding-right: ${({ isSettings, isMobile }) => - isSettings - ? isMobile - ? themeCssVariables.spacing[5] - : themeCssVariables.spacing[8] - : '0'}; + isMobile + ? themeCssVariables.spacing[5] + : isSettings + ? themeCssVariables.spacing[8] + : '0'}; `; export const NavigationDrawerFixedContent = ({ children, 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 1ae5ff81b7..cda7a94441 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 @@ -2,7 +2,7 @@ import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { IconSearch } from 'twenty-ui/display'; import { LightIconButton } from 'twenty-ui/input'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; import { useOpenRecordsSearchPageInSidePanel } from '@/side-panel/hooks/useOpenRecordsSearchPageInSidePanel'; import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight'; @@ -21,6 +21,11 @@ const StyledContainer = styled.div<{ isExpanded: boolean }>` padding-right: ${themeCssVariables.spacing[2]}; transition: gap calc(${themeCssVariables.animation.duration.normal} * 1s) ease; user-select: none; + + @media (max-width: ${MOBILE_VIEWPORT}px) { + padding-left: ${themeCssVariables.spacing[5]}; + padding-right: ${themeCssVariables.spacing[5]}; + } `; const StyledRightActions = styled.div<{ isExpanded: boolean }>` @@ -40,6 +45,14 @@ const StyledNavigationDrawerCollapseButtonContainer = styled.div` padding-right: ${themeCssVariables.spacing[1]}; width: ${themeCssVariables.spacing[6]}; } + + @media (max-width: ${MOBILE_VIEWPORT}px) { + > * { + height: ${themeCssVariables.spacing[8]}; + padding-right: 0; + width: ${themeCssVariables.spacing[8]}; + } + } `; const StyledWorkspaceDropdownContainer = styled.div` @@ -68,8 +81,8 @@ export const NavigationDrawerHeader = ({ - {!isMobile && ( - + + {!isMobile && ( - {isNavigationDrawerExpanded && showCollapseButton && ( - - - - )} - - )} + )} + {isNavigationDrawerExpanded && showCollapseButton && ( + + + + )} + ); }; 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 7a728bb0f9..4e9cac7068 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 @@ -24,6 +24,7 @@ import { TooltipDelay, TooltipPosition, } from 'twenty-ui/display'; +import { MenuItemIconBoxContainer } from 'twenty-ui/navigation'; import { MOBILE_VIEWPORT, ThemeContext, @@ -140,7 +141,7 @@ const StyledItem = styled.button` } @media (max-width: ${MOBILE_VIEWPORT}px) { - font-size: ${themeCssVariables.font.size.lg}; + height: ${themeCssVariables.spacing[8]}; } `; @@ -161,7 +162,7 @@ const StyledLabelParent = styled.div` `; const StyledItemLabel = styled.span` - font-weight: ${themeCssVariables.font.weight.medium}; + font-weight: ${themeCssVariables.font.weight.regular}; `; const StyledItemSecondaryLabel = styled.span` @@ -193,27 +194,13 @@ const StyledSpacer = styled.span` flex-grow: 1; `; -const StyledIcon = styled.div<{ - $backgroundColor?: string; - $borderColor?: string; -}>` +const StyledIcon = styled.div` align-items: center; - background-color: ${({ $backgroundColor }) => - $backgroundColor || 'transparent'}; - border: ${({ $backgroundColor, $borderColor }) => - $backgroundColor && $borderColor ? `1px solid ${$borderColor}` : 'none'}; - border-radius: ${({ $backgroundColor }) => ($backgroundColor ? '4px' : '0')}; - box-sizing: ${({ $backgroundColor }) => - $backgroundColor ? 'border-box' : 'content-box'}; display: flex; flex-grow: 0; flex-shrink: 0; - height: ${({ $backgroundColor }) => - $backgroundColor ? themeCssVariables.spacing[4] : 'auto'}; justify-content: center; margin-right: ${themeCssVariables.spacing[2]}; - width: ${({ $backgroundColor }) => - $backgroundColor ? themeCssVariables.spacing[4] : 'auto'}; `; const StyledRightOptionsContainer = styled.div` @@ -362,18 +349,20 @@ export const NavigationDrawerItem = ({ ) : ( - + + + ))} diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb.tsx index 690021522c..f28c8a03ed 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb.tsx @@ -1,6 +1,6 @@ import { type NavigationDrawerSubItemState } from '@/ui/navigation/navigation-drawer/types/NavigationDrawerSubItemState'; import { styled } from '@linaria/react'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; export type NavigationDrawerItemBreadcrumbProps = { state?: NavigationDrawerSubItemState; @@ -12,6 +12,10 @@ const StyledNavigationDrawerItemBreadcrumbContainer = styled.div` margin-left: 7.5px; margin-right: ${themeCssVariables.spacing[2]}; width: 9px; + + @media (max-width: ${MOBILE_VIEWPORT}px) { + height: ${themeCssVariables.spacing[8]}; + } `; const StyledGapVerticalLine = styled.div<{ darker: boolean }>` @@ -37,6 +41,10 @@ const StyledSecondaryFullVerticalBar = styled.div<{ darker: boolean }>` position: relative; top: -17px; width: 1px; + + @media (max-width: ${MOBILE_VIEWPORT}px) { + height: ${themeCssVariables.spacing[8]}; + } `; const StyledRoundedProtrusion = styled.div<{ darker: boolean }>` diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx index 3d4e20ed1c..272866d5e0 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx @@ -34,7 +34,7 @@ export const NavigationDrawerScrollableContent = ({ defaultEnableXScroll={false} > - {isSettingsDrawer ? ( + {isSettingsDrawer || isMobile ? ( {children} diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx index 0a89c0298c..2b54ccdec7 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx @@ -17,8 +17,8 @@ const StyledTitle = styled.div` justify-content: space-between; padding-bottom: ${themeCssVariables.spacing[1]}; padding-left: ${themeCssVariables.spacing[1]}; - padding-right: ${themeCssVariables.spacing['0.5']}; - padding-top: ${themeCssVariables.spacing[1]}; + padding-right: ${themeCssVariables.spacing[1]}; + padding-top: ${themeCssVariables.spacing[2]}; &:hover { background-color: ${themeCssVariables.background.transparent.light};