[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

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"

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>

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;