From 44d201c8a16dbe35d02b6ebb710da5abe75203c8 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@weahead.se>
Date: Thu, 26 Sep 2024 09:43:38 +0200
Subject: [PATCH] chore: cleanup

---
 .../MainMenu/NavigationMenu/MegaMenu/index.tsx | 12 ++----------
 .../MegaMenu/megaMenu.module.css               | 18 +++++++++++++++---
 .../NavigationMenuItem/index.tsx               |  8 ++------
 .../navigationMenuItem.module.css              |  7 ++-----
 4 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx b/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
index e89a8186c..e0987bb6b 100644
--- a/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
@@ -7,7 +7,6 @@ import Card from "@/components/TempDesignSystem/Card"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import { useTrapFocus } from "@/hooks/useTrapFocus"
 
 import styles from "./megaMenu.module.css"
@@ -21,21 +20,14 @@ export default function MegaMenu({
   submenu,
   card,
 }: MegaMenuProps) {
-  const { openMegaMenu, toggleMegaMenu } = useDropdownStore()
+  const { toggleMegaMenu } = useDropdownStore()
   const megaMenuRef = useTrapFocus()
-  const isMegaMenuOpen = openMegaMenu === title
-
-  useHandleKeyUp((event: KeyboardEvent) => {
-    if (event.key === "Escape" && isMegaMenuOpen) {
-      toggleMegaMenu(false)
-    }
-  })
 
   function closeMegaMenu() {
     toggleMegaMenu(false)
   }
   return (
-    <nav>
+    <nav className={styles.megaMenu}>
       {isMobile ? (
         <div className={styles.backWrapper}>
           <button
diff --git a/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css b/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
index 6eb7abd2c..bd7b645e9 100644
--- a/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
+++ b/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
@@ -1,6 +1,5 @@
 .megaMenuContent {
   display: grid;
-  /* align-content: start; */
 }
 
 .seeAllLink {
@@ -54,9 +53,21 @@
 }
 
 @media screen and (max-width: 767px) {
-  .megaMenuContent {
-    gap: var(--Spacing-x2);
+  .megaMenu {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
   }
+  .megaMenuContent {
+    flex-grow: 1;
+    grid-template-rows: max-content 1fr;
+    gap: var(--Spacing-x2);
+    align-items: start;
+  }
+  .megaMenuContent:has(.cardWrapper) {
+    grid-template-rows: max-content 1fr max-content;
+  }
+
   .submenusItem:first-child {
     padding-bottom: var(--Spacing-x2);
     border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
@@ -75,6 +86,7 @@
       "seeAllLink"
       "submenus";
     width: 600px;
+    max-width: calc(100vw - var(--Spacing-x4));
   }
 
   .megaMenuContent:has(.cardWrapper) {
diff --git a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
index e0ff99f4d..222eb21e9 100644
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
@@ -24,12 +24,8 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
     }
   })
 
-  function closeMegaMenu() {
-    toggleMegaMenu(false)
-  }
-
   return submenu.length ? (
-    <span className={styles.menuWrapper}>
+    <>
       <MainMenuButton
         onClick={() => toggleMegaMenu(title)}
         className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
@@ -57,7 +53,7 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
           />
         ) : null}
       </div>
-    </span>
+    </>
   ) : (
     <Link
       className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
diff --git a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
index 02ab68551..bff5d36ee 100644
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
@@ -13,10 +13,6 @@
   transform: rotate(180deg);
 }
 
-.menuWrapper {
-  position: relative;
-}
-
 .dropdown {
   background-color: var(--Base-Surface-Primary-light-Normal);
   z-index: var(--menu-overlay-z-index);
@@ -42,7 +38,8 @@
   .dropdown {
     display: none;
     position: absolute;
-    top: var(--Spacing-x5);
+    top: var(--main-menu-desktop-height);
+    /* top: var(--Spacing-x5); */
     left: 50%;
     transform: translateX(-50%);
     border-radius: var(--Corner-radius-Large);