From e5641c5c538508d1fdfa82a28f90d91336eb073f Mon Sep 17 00:00:00 2001 From: NitinPSingh <71833171+NitinPSingh@users.noreply.github.com> Date: Thu, 31 Oct 2024 22:47:13 +0530 Subject: [PATCH] fix #7085 breadcrumb fix for mobile viewport (#7419) ISSUE Closes https://github.com/twentyhq/twenty/issues/7085 DEMO https://github.com/user-attachments/assets/39692906-c02e-4e4c-9205-82447fa142df --------- Co-authored-by: Lucas Bordeau --- .../components/MobileNavigationBar.tsx | 8 +- .../navigation/hooks/useOpenSettings.ts | 19 +++++ ...grationDatabaseConnectionShowContainer.tsx | 3 +- ...tegrationEditDatabaseConnectionContent.tsx | 3 +- .../components/SubMenuTopBarContainer.tsx | 5 +- .../bread-crumb}/components/Breadcrumb.tsx | 8 ++ .../components/MobileBreadcrumb.tsx | 81 +++++++++++++++++++ .../__stories__/Breadcrumb.stories.tsx | 3 +- packages/twenty-ui/src/navigation/index.ts | 1 - 9 files changed, 122 insertions(+), 9 deletions(-) create mode 100644 packages/twenty-front/src/modules/navigation/hooks/useOpenSettings.ts rename packages/{twenty-ui/src/navigation/breadcrumb => twenty-front/src/modules/ui/navigation/bread-crumb}/components/Breadcrumb.tsx (84%) create mode 100644 packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx diff --git a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx index 9c615ee08e99..f260bb4d5753 100644 --- a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx @@ -1,5 +1,6 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState'; +import { useOpenSettingsMenu } from '@/navigation/hooks/useOpenSettings'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { useRecoilState } from 'recoil'; import { @@ -23,6 +24,8 @@ export const MobileNavigationBar = () => { const [currentMobileNavigationDrawer, setCurrentMobileNavigationDrawer] = useRecoilState(currentMobileNavigationDrawerState); + const { openSettingsMenu } = useOpenSettingsMenu(); + const activeItemName = isNavigationDrawerExpanded ? currentMobileNavigationDrawer : isCommandMenuOpened @@ -62,10 +65,7 @@ export const MobileNavigationBar = () => { Icon: IconSettings, onClick: () => { closeCommandMenu(); - setIsNavigationDrawerExpanded( - (previousIsOpen) => activeItemName !== 'settings' || !previousIsOpen, - ); - setCurrentMobileNavigationDrawer('settings'); + openSettingsMenu(); }, }, ]; diff --git a/packages/twenty-front/src/modules/navigation/hooks/useOpenSettings.ts b/packages/twenty-front/src/modules/navigation/hooks/useOpenSettings.ts new file mode 100644 index 000000000000..0b06f262fe12 --- /dev/null +++ b/packages/twenty-front/src/modules/navigation/hooks/useOpenSettings.ts @@ -0,0 +1,19 @@ +import { currentMobileNavigationDrawerState } from '@/navigation/states/currentMobileNavigationDrawerState'; +import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; +import { useRecoilState } from 'recoil'; + +export const useOpenSettingsMenu = () => { + const [, setIsNavigationDrawerExpanded] = useRecoilState( + isNavigationDrawerExpandedState, + ); + const [, setCurrentMobileNavigationDrawer] = useRecoilState( + currentMobileNavigationDrawerState, + ); + + const openSettingsMenu = () => { + setIsNavigationDrawerExpanded(true); + setCurrentMobileNavigationDrawer('settings'); + }; + + return { openSettingsMenu }; +}; diff --git a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx index 7e294fff974d..6cffad757e98 100644 --- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx +++ b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx @@ -4,9 +4,10 @@ import { SettingsIntegrationDatabaseTablesListCard } from '@/settings/integratio import { useDatabaseConnection } from '@/settings/integrations/database-connection/hooks/useDatabaseConnection'; import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; import { SettingsPath } from '@/types/SettingsPath'; +import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb'; import { Section } from '@react-email/components'; import { useNavigate } from 'react-router-dom'; -import { Breadcrumb, H2Title } from 'twenty-ui'; +import { H2Title } from 'twenty-ui'; export const SettingsIntegrationDatabaseConnectionShowContainer = () => { const navigate = useNavigate(); diff --git a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx index e125c0a271aa..3540cad1e8a2 100644 --- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx +++ b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx @@ -12,12 +12,13 @@ import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; import { SettingsPath } from '@/types/SettingsPath'; import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; +import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb'; import { zodResolver } from '@hookform/resolvers/zod'; import { Section } from '@react-email/components'; import pick from 'lodash.pick'; import { FormProvider, useForm } from 'react-hook-form'; import { useNavigate } from 'react-router-dom'; -import { Breadcrumb, H2Title, Info } from 'twenty-ui'; +import { H2Title, Info } from 'twenty-ui'; import { z } from 'zod'; import { RemoteServer, diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/SubMenuTopBarContainer.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/SubMenuTopBarContainer.tsx index 78577b08bb47..8772bced550a 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/SubMenuTopBarContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/SubMenuTopBarContainer.tsx @@ -1,7 +1,10 @@ import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper'; +import { + Breadcrumb, + BreadcrumbProps, +} from '@/ui/navigation/bread-crumb/components/Breadcrumb'; import styled from '@emotion/styled'; import { JSX, ReactNode } from 'react'; -import { Breadcrumb, BreadcrumbProps } from 'twenty-ui'; import { PageBody } from './PageBody'; import { PageHeader } from './PageHeader'; diff --git a/packages/twenty-ui/src/navigation/breadcrumb/components/Breadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx similarity index 84% rename from packages/twenty-ui/src/navigation/breadcrumb/components/Breadcrumb.tsx rename to packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx index a43ee3175fc2..7440c42c6bda 100644 --- a/packages/twenty-ui/src/navigation/breadcrumb/components/Breadcrumb.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx @@ -1,3 +1,5 @@ +import { MobileBreadcrumb } from '@/ui/navigation/bread-crumb/components/MobileBreadcrumb'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import styled from '@emotion/styled'; import { Fragment, ReactNode } from 'react'; import { Link } from 'react-router-dom'; @@ -39,6 +41,12 @@ const StyledDivider = styled.span` `; export const Breadcrumb = ({ className, links }: BreadcrumbProps) => { + const isMobile = useIsMobile(); + + if (isMobile && links.length > 0) { + return ; + } + return ( {links.map((link, index) => { 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 new file mode 100644 index 000000000000..5df3d09cacb0 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx @@ -0,0 +1,81 @@ +import { useOpenSettingsMenu } from '@/navigation/hooks/useOpenSettings'; +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; +import { isNonEmptyString } from '@sniptt/guards'; +import { ReactNode } from 'react'; +import { Link } from 'react-router-dom'; +import { IconChevronLeft } from 'twenty-ui'; + +export type MobileBreadcrumbProps = { + className?: string; + links: { children: string | ReactNode; href?: string }[]; +}; + +const StyledWrapper = styled.nav` + align-items: center; + color: ${({ theme }) => theme.font.color.tertiary}; + display: grid; + font-size: ${({ theme }) => theme.font.size.md}; + grid-auto-flow: column; + grid-column-gap: ${({ theme }) => theme.spacing(1)}; + max-width: 100%; + min-width: 0; + height: ${({ theme }) => theme.spacing(8)}; +`; + +const StyledLink = styled(Link)` + color: inherit; + text-decoration: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; + +const StyledText = styled.span` + color: inherit; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; + +export const MobileBreadcrumb = ({ + className, + links, +}: MobileBreadcrumbProps) => { + const theme = useTheme(); + + const { openSettingsMenu } = useOpenSettingsMenu(); + + const handleBackToSettingsClick = () => { + openSettingsMenu(); + }; + + const previousLink = links[links.length - 2]; + const shouldRedirectToSettings = links.length === 2; + + const text = isNonEmptyString(previousLink.children) + ? previousLink.children + : ''; + + return ( + + {shouldRedirectToSettings ? ( + <> + + + Back to Settings + + + ) : previousLink?.href ? ( + <> + + + Back to {previousLink.children} + + + ) : ( + {previousLink?.children} + )} + + ); +}; diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx index d88b0ad3e813..cdc389a0a426 100644 --- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx @@ -1,5 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator, Breadcrumb } from 'twenty-ui'; +import { ComponentDecorator } from 'twenty-ui'; +import { Breadcrumb } from '../Breadcrumb'; import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; diff --git a/packages/twenty-ui/src/navigation/index.ts b/packages/twenty-ui/src/navigation/index.ts index 8a6b0bb0e601..31e797cd50ae 100644 --- a/packages/twenty-ui/src/navigation/index.ts +++ b/packages/twenty-ui/src/navigation/index.ts @@ -1,4 +1,3 @@ -export * from './breadcrumb/components/Breadcrumb'; export * from './link/components/ActionLink'; export * from './link/components/AdvancedSettingsToggle'; export * from './link/components/ContactLink';