From c3960f757d9dc9423de825f1cb2f17d025e3b926 Mon Sep 17 00:00:00 2001
From: Oscar <bakkeroscar@gmail.com>
Date: Fri, 19 Jul 2024 09:49:45 +0200
Subject: [PATCH] MIJN-9013/Fix zoeken op mobiel (#1371)

* Fix zoeken op mobiel

* Use smaller header icons

* Update src/client/components/MainHeader/MainHeader.module.scss

Co-authored-by: Tim van Oostrom <t.van.oostrom@amsterdam.nl>

* Add --ams-link-standalone-font-size size

---------

Co-authored-by: Tim van Oostrom <t.van.oostrom@amsterdam.nl>
---
 .../components/MaLink/MaLink.module.scss      |  3 +-
 .../MainHeader/MainHeader.module.scss         | 35 ++++++++
 .../components/MainHeader/MainHeader.tsx      | 80 +++++++++----------
 3 files changed, 74 insertions(+), 44 deletions(-)

diff --git a/src/client/components/MaLink/MaLink.module.scss b/src/client/components/MaLink/MaLink.module.scss
index 31250de46a..d1787d0db0 100644
--- a/src/client/components/MaLink/MaLink.module.scss
+++ b/src/client/components/MaLink/MaLink.module.scss
@@ -3,7 +3,6 @@
   --ams-link-standalone-text-decoration-line: none;
 }
 
-.MaRouterLink__no-default-underline:not(:hover){
+.MaRouterLink__no-default-underline:not(:hover) {
   --ams-link-standalone-text-decoration-line: none;
-
 }
diff --git a/src/client/components/MainHeader/MainHeader.module.scss b/src/client/components/MainHeader/MainHeader.module.scss
index f290ac57b9..89aef4d93c 100644
--- a/src/client/components/MainHeader/MainHeader.module.scss
+++ b/src/client/components/MainHeader/MainHeader.module.scss
@@ -2,6 +2,7 @@
 
 .header {
   --ams-page-menu-item-font-size: 1.6rem;
+  --ams-link-standalone-font-size: 1.6rem;
   --mams-font-size-body: 1rem;
 
   &:first-child {
@@ -141,3 +142,37 @@
   @extend .baseMenuLink;
   background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='%23004699' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.7996 17.8697L13.9049 11.975C16.1123 8.86891 15.5717 4.58951 12.6612 2.12992C9.75073 -0.32967 5.44111 -0.149054 2.74661 2.54544C0.0521181 5.23994 -0.128498 9.54956 2.33109 12.4601C4.79068 15.3706 9.07008 15.9112 12.1762 13.7037L18.0709 19.5984L19.7996 17.8697ZM7.93687 12.6225C5.23796 12.6225 3.05005 10.4346 3.05005 7.7357C3.05005 5.03678 5.23796 2.84888 7.93687 2.84888C10.6358 2.84888 12.8237 5.03678 12.8237 7.7357C12.8237 9.03176 12.3088 10.2747 11.3924 11.1912C10.4759 12.1077 9.23293 12.6225 7.93687 12.6225Z'/%3E%3C/svg%3E");
 }
+
+.PageMenu {
+  :global(.ams-page-menu__link) {
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      text-decoration-thickness: var(
+        --ams-link-standalone-hover-text-decoration-thickness
+      );
+      text-underline-offset: var(
+        --ams-link-standalone-hover-text-underline-offset
+      );
+    }
+  }
+
+  span > svg {
+    height: var(--ams-icon-size-3-font-size);
+    width: var(--ams-icon-size-3-font-size);
+  }
+
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    span > svg {
+      height: var(--ams-icon-size-4-font-size);
+      width: var(--ams-icon-size-4-font-size);
+    }
+  }
+}
+
+.PageMenuLabel {
+  @include mq-phone {
+    display: none;
+  }
+}
diff --git a/src/client/components/MainHeader/MainHeader.tsx b/src/client/components/MainHeader/MainHeader.tsx
index f2c6912031..566e108b83 100644
--- a/src/client/components/MainHeader/MainHeader.tsx
+++ b/src/client/components/MainHeader/MainHeader.tsx
@@ -11,16 +11,17 @@ import { useAppStateGetter } from '../../hooks/useAppState';
 import { useProfileTypeValue } from '../../hooks/useProfileType';
 import { useTermReplacement } from '../../hooks/useTermReplacement';
 import { useThemaMenuItems } from '../../hooks/useThemaMenuItems';
-import { MaLink } from '../MaLink/MaLink';
 import MainHeaderHero from '../MainHeaderHero/MainHeaderHero';
 import MegaMenu from '../MegaMenu/MegaMenu';
 import { Search } from '../Search/Search';
+import { CloseIcon, MenuIcon } from '@amsterdam/design-system-react-icons';
 import { SearchEntry } from '../Search/searchConfig';
 import { useSearchOnPage } from '../Search/useSearch';
 import { isMenuItemVisible, mainMenuItems } from './MainHeader.constants';
 import styles from './MainHeader.module.scss';
 import { OtapLabel } from './OtapLabel';
 import { SecondaryLinks } from './SecondaryLinks';
+import { IconSearch } from '../../assets/icons';
 
 export interface MainHeaderProps {
   isAuthenticated?: boolean;
@@ -196,63 +197,58 @@ export default function MainHeader({
             isAuthenticated && (
               <PageMenu alignEnd>
                 <SecondaryLinks />
-                {isDisplayLiveSearch && (
-                  <MaLink
-                    maVariant="noDefaultUnderline"
-                    href={AppRoutes.SEARCH}
-                    onClick={(event) => {
-                      event.preventDefault();
-                      setSearchActive(!isSearchActive);
-                    }}
-                    className={styles.menuLinkSearch}
-                  >
-                    Zoeken
-                  </MaLink>
-                )}
               </PageMenu>
             )
           }
           menu={
             isAuthenticated && (
-              <>
-                {!isBurgerMenuVisible ? (
-                  <button
-                    aria-label="Open menu"
+              <PageMenu alignEnd className={styles.PageMenu}>
+                {isDisplayLiveSearch && (
+                  <PageMenu.Link
+                    icon={IconSearch}
                     onClick={(e) => {
                       e.stopPropagation();
-                      toggleBurgerMenu(true);
+                      setSearchActive(!isSearchActive);
                     }}
-                    className="ams-header__menu-button"
                   >
-                    Menu
-                  </button>
+                    <span className={styles.PageMenuLabel}>Zoeken</span>
+                  </PageMenu.Link>
+                )}
+
+                {isBurgerMenuVisible ? (
+                  <PageMenu.Link
+                    icon={CloseIcon}
+                    onClick={(e) => {
+                      toggleBurgerMenu(false);
+                    }}
+                  >
+                    <span className={styles.PageMenuLabel}>Menu</span>
+                  </PageMenu.Link>
                 ) : (
-                  isBurgerMenuVisible && (
-                    <button
-                      aria-label="Sluit menu"
-                      onClick={() => toggleBurgerMenu(false)}
-                      className={styles.menuLinkClose}
-                    >
-                      Menu
-                    </button>
-                  )
+                  <PageMenu.Link
+                    icon={MenuIcon}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleBurgerMenu(true);
+                    }}
+                  >
+                    <span className={styles.PageMenuLabel}>Menu</span>
+                  </PageMenu.Link>
                 )}
-              </>
+              </PageMenu>
             )
           }
         />
         <OtapLabel />
         {isDisplayLiveSearch && isSearchActive && (
-          <div className={styles.Search}>
-            <div className={styles.SearchBar}>
-              <div className={styles.SearchBarInner}>
-                <Search
-                  onFinish={() => {
-                    setSearchActive(false);
-                  }}
-                  replaceResultUrl={replaceResultUrl}
-                />
-              </div>
+          <div className={styles.SearchBar}>
+            <div className={styles.SearchBarInner}>
+              <Search
+                onFinish={() => {
+                  setSearchActive(false);
+                }}
+                replaceResultUrl={replaceResultUrl}
+              />
             </div>
           </div>
         )}