From bb713c3bb85fada79e79de411a9dce6a5c0586f1 Mon Sep 17 00:00:00 2001 From: Antoine Clausse Date: Fri, 13 Dec 2024 14:47:34 +0100 Subject: [PATCH] [web] Update project-list Navbar for mobile (#22478) * Control if nav items are shown with CSS instead of JS * Fix navbar style for mobile view * Update navbar toggle icon to close * Hide "Projects" nav item from the navbar * Add separator above the Help menuitem in the mobile navbar * Adjust sidebar padding: 24px from the logo GitOrigin-RevId: ba587645f56febc0da798269bd6aa8c2e1639c27 --- .../components/project-list-ds-nav.tsx | 3 +- .../bootstrap-5/navbar/default-navbar.tsx | 37 +++++++----- .../bootstrap-5/navbar/logged-in-items.tsx | 6 +- .../bootstrap-5/navbar/logged-out-items.tsx | 3 +- .../types/default-navbar-metadata.ts | 2 +- .../pages/project-list-ds-nav.scss | 60 ++++++++++++++++++- 6 files changed, 88 insertions(+), 23 deletions(-) diff --git a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx index 7a999a8aa5..e21c46d4d6 100644 --- a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx +++ b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx @@ -56,9 +56,8 @@ export function ProjectListDsNav() {
item.text !== 'help')} customLogo="/img/ol-brand/overleaf-a-ds-solution-mallard.svg" - showAccountButtons={false} + showCloseIcon />
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx index d0f2ee8b9c..a65e803ea1 100644 --- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react' import { sendMB } from '@/infrastructure/event-tracking' import { useTranslation } from 'react-i18next' import { Button, Container, Nav, Navbar } from 'react-bootstrap-5' @@ -23,7 +24,7 @@ function DefaultNavbar(props: DefaultNavbarMetadata) { enableUpgradeButton, suppressNavbarRight, suppressNavContentLinks, - showAccountButtons = true, + showCloseIcon = false, showSubscriptionLink, showSignUpLink, currentUrl, @@ -33,6 +34,7 @@ function DefaultNavbar(props: DefaultNavbarMetadata) { } = props const { t } = useTranslation() const { isReady } = useWaitForI18n() + const [expanded, setExpanded] = useState(false) // The Contact Us modal is rendered at this level rather than inside the nav // bar because otherwise the help wiki search results dropdown doesn't show up @@ -47,7 +49,11 @@ function DefaultNavbar(props: DefaultNavbarMetadata) { return ( <> - + setExpanded(expanded)} + >
@@ -76,7 +82,9 @@ function DefaultNavbar(props: DefaultNavbarMetadata) { aria-expanded="false" aria-label={t('main_navigation')} > - + ) : null })} - {showAccountButtons && - (sessionUser ? ( - - ) : ( - - ))} + {sessionUser ? ( + + ) : ( + + )} diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx index 17f29591f0..3b123c0afb 100644 --- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx @@ -14,8 +14,10 @@ export default function LoggedInItems({ const { t } = useTranslation() return ( <> - {t('projects')} - + + {t('projects')} + + { sendMB('menu-clicked-register', { page: currentUrl }) }} @@ -26,6 +26,7 @@ export default function LoggedOutItems({ ) : null} { sendMB('menu-clicked-login', { page: currentUrl }) }} diff --git a/services/web/frontend/js/features/ui/components/types/default-navbar-metadata.ts b/services/web/frontend/js/features/ui/components/types/default-navbar-metadata.ts index b1d05cc771..e2970d85ec 100644 --- a/services/web/frontend/js/features/ui/components/types/default-navbar-metadata.ts +++ b/services/web/frontend/js/features/ui/components/types/default-navbar-metadata.ts @@ -13,7 +13,7 @@ export type DefaultNavbarMetadata = { enableUpgradeButton: boolean suppressNavbarRight: boolean suppressNavContentLinks: boolean - showAccountButtons?: boolean + showCloseIcon?: boolean showSubscriptionLink: boolean showSignUpLink: boolean currentUrl: string diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss index 8dfd20a866..7caad1a905 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss @@ -15,8 +15,63 @@ .navbar-default { position: relative; - .navbar-header { - padding-top: var(--spacing-08); + --navbar-toggler-expanded-bg: none; + --navbar-toggler-expanded-color: var(--content-secondary); + + .navbar-header > a { + position: relative; + z-index: 15; + + @include media-breakpoint-up(md) { + top: var(--spacing-05); + } + } + + .nav-item-projects { + display: none !important; + } + + @include media-breakpoint-up(lg) { + .nav-item-account, + .nav-item-help { + display: none; + } + } + + @include media-breakpoint-down(lg) { + --navbar-hamburger-submenu-item-hover-color: var(--content-secondary); + --navbar-subdued-hover-color: var(--content-secondary); + --navbar-link-hover-color: var(--content-secondary); + --navbar-link-hover-bg: none; + --navbar-subdued-hover-bg: none; + --navbar-hamburger-submenu-bg: none; + --navbar-hamburger-submenu-item-hover-bg: none; + + .nav-item-help::before { + content: ''; + display: block; + border-top: 1px solid var(--border-divider); + margin: var(--spacing-07) var(--spacing-06); + } + + #navbar-main-collapse { + padding: var(--spacing-09) var(--spacing-06) 0; + + .navbar-nav { + > li { + > a, + > .dropdown-toggle, + > .nav-link { + border-radius: var(--border-radius-medium); + + &.show { + background-color: var(--bg-accent-03); + color: var(--green-60); + } + } + } + } + } } } @@ -32,6 +87,7 @@ flex: 0 0 15%; max-width: 320px; min-width: 200px; + margin-top: var(--spacing-03); padding: var(--spacing-08) 0 0 0; .new-project-dropdown {