From fce3adc810a47ffee5920d3f91632090a4e67dfc Mon Sep 17 00:00:00 2001
From: Antoine Clausse <antoine.clausse@overleaf.com>
Date: Tue, 17 Dec 2024 17:49:15 +0100
Subject: [PATCH] [web] Update Navbar icons (Carets and Close) (#22570)

* Use Phosphor icon for navigation close

* Add carets from Phosphor

* Remove CaretUp when expanded (not in design)

* Revert "Remove CaretUp when expanded (not in design)"

This reverts commit 242f295ea18a73aae0e2cf5d2cf0dc1e610dbef9.

* Fixup: Hide the default caret in the desktop view too

* Fixup format after merge

GitOrigin-RevId: 6781028dd50922a017ef2b76fe91c4ff611dd77c
---
 .../bootstrap-5/navbar/default-navbar.tsx     |  9 +++++---
 .../bootstrap-5/navbar/nav-dropdown-menu.tsx  | 22 ++++++++++++++++---
 .../pages/project-list-ds-nav.scss            |  4 ++++
 3 files changed, 29 insertions(+), 6 deletions(-)

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 80827f9b29..b7a843d99f 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
@@ -12,6 +12,7 @@ import HeaderLogoOrTitle from '@/features/ui/components/bootstrap-5/navbar/heade
 import MaterialIcon from '@/shared/components/material-icon'
 import { useContactUsModal } from '@/shared/hooks/use-contact-us-modal'
 import { UserProvider } from '@/shared/context/user-context'
+import { X } from '@phosphor-icons/react'
 
 function DefaultNavbar(props: DefaultNavbarMetadata) {
   const {
@@ -81,9 +82,11 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
                 aria-expanded="false"
                 aria-label={t('main_navigation')}
               >
-                <MaterialIcon
-                  type={showCloseIcon && expanded ? 'close' : 'menu'}
-                />
+                {showCloseIcon && expanded ? (
+                  <X />
+                ) : (
+                  <MaterialIcon type="menu" />
+                )}
               </Navbar.Toggle>
               <Navbar.Collapse
                 id="navbar-main-collapse"
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu.tsx
index 65eae92d9b..83734179a3 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu.tsx
@@ -1,5 +1,7 @@
-import { ReactNode } from 'react'
+import { type ReactNode, useState } from 'react'
 import { Dropdown } from 'react-bootstrap-5'
+import { CaretUp, CaretDown } from '@phosphor-icons/react'
+import { useIsDsNav } from '@/features/project-list/components/use-is-ds-nav'
 
 export default function NavDropdownMenu({
   title,
@@ -12,11 +14,25 @@ export default function NavDropdownMenu({
   children: ReactNode
   onToggle?: (nextShow: boolean) => void
 }) {
+  const [show, setShow] = useState(false)
+  const isDsNav = useIsDsNav()
   // Can't use a NavDropdown here because it's impossible to render the menu as
   // a <ul> element using NavDropdown
+  const Caret = show ? CaretUp : CaretDown
   return (
-    <Dropdown as="li" role="none" className={className} onToggle={onToggle}>
-      <Dropdown.Toggle role="menuitem">{title}</Dropdown.Toggle>
+    <Dropdown
+      as="li"
+      role="none"
+      className={className}
+      onToggle={nextShow => {
+        setShow(nextShow)
+        onToggle?.(nextShow)
+      }}
+    >
+      <Dropdown.Toggle role="menuitem">
+        {title}
+        {isDsNav && <Caret weight="bold" className="ms-2" />}
+      </Dropdown.Toggle>
       <Dropdown.Menu as="ul" role="menu" align="end">
         {children}
       </Dropdown.Menu>
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 150750e5d3..421ef6394a 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
@@ -75,6 +75,10 @@
     }
   }
 
+  .navbar-nav > li > .dropdown-toggle::after {
+    display: none;
+  }
+
   .project-list-wrapper {
     flex-grow: 1;
     display: flex;