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 <[email protected]> * Add --ams-link-standalone-font-size size --------- Co-authored-by: Tim van Oostrom <[email protected]>
Amsterdam · Jul 19, 2024 · c3960f7 · c3960f7
1 parent f9c28eb
commit c3960f7
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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>
         )}