chore: cleanup

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

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 {
+  .megaMenu {
-    gap: var(--Spacing-x2);
+    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) {

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}`}

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);