[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

services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx

@@ -56,9 +56,8 @@ export function ProjectListDsNav() {
     <div className="project-ds-nav-page website-redesign">
       <DefaultNavbar
         {...navbarProps}
-        items={navbarProps.items.filter(item => item.text !== 'help')}
         customLogo="/img/ol-brand/overleaf-a-ds-solution-mallard.svg"
-        showAccountButtons={false}
+        showCloseIcon
       />
       <main className="project-list-wrapper">
         <SidebarDsNav />

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 (
     <>
-      <Navbar className="navbar-default navbar-main" expand="lg">
+      <Navbar
+        className="navbar-default navbar-main"
+        expand="lg"
+        onToggle={expanded => setExpanded(expanded)}
+      >
         <Container className="navbar-container" fluid>
           <div className="navbar-header">
             <HeaderLogoOrTitle title={title} customLogo={customLogo} />
@@ -76,7 +82,9 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
                 aria-expanded="false"
                 aria-label={t('main_navigation')}
               >
-                <MaterialIcon type="menu" />
+                <MaterialIcon
+                  type={showCloseIcon && expanded ? 'close' : 'menu'}
+                />
               </Navbar.Toggle>
               <Navbar.Collapse
                 id="navbar-main-collapse"
@@ -111,18 +119,17 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
                       />
                     ) : null
                   })}
-                  {showAccountButtons &&
-                    (sessionUser ? (
-                      <LoggedInItems
-                        sessionUser={sessionUser}
-                        showSubscriptionLink={showSubscriptionLink}
-                      />
-                    ) : (
-                      <LoggedOutItems
-                        showSignUpLink={showSignUpLink}
-                        currentUrl={currentUrl}
-                      />
-                    ))}
+                  {sessionUser ? (
+                    <LoggedInItems
+                      sessionUser={sessionUser}
+                      showSubscriptionLink={showSubscriptionLink}
+                    />
+                  ) : (
+                    <LoggedOutItems
+                      showSignUpLink={showSignUpLink}
+                      currentUrl={currentUrl}
+                    />
+                  )}
                 </Nav>
               </Navbar.Collapse>
             </>

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 (
     <>
-      <NavLinkItem href="/project">{t('projects')}</NavLinkItem>
-      <NavDropdownMenu title={t('Account')}>
+      <NavLinkItem href="/project" className="nav-item-projects">
+        {t('projects')}
+      </NavLinkItem>
+      <NavDropdownMenu title={t('Account')} className="nav-item-account">
         <AccountMenuItems
           sessionUser={sessionUser}
           showSubscriptionLink={showSubscriptionLink}

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-out-items.tsx

@@ -16,7 +16,7 @@ export default function LoggedOutItems({
       {showSignUpLink ? (
         <NavLinkItem
           href="/register"
-          className="primary"
+          className="primary nav-account-item"
           onClick={e => {
             sendMB('menu-clicked-register', { page: currentUrl })
           }}
@@ -26,6 +26,7 @@ export default function LoggedOutItems({
       ) : null}
       <NavLinkItem
         href="/login"
+        className="nav-account-item"
         onClick={e => {
           sendMB('menu-clicked-login', { page: currentUrl })
         }}

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

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 {