chore: update header mobile menu nav size to max 560px

ably · Feb 21, 2025 · dbaf6ff · dbaf6ff
1 parent 6fedc13
commit dbaf6ff
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/src/core/Header.tsx b/src/core/Header.tsx
@@ -111,6 +111,12 @@ export type HeaderProps = {
 
 const FLEXIBLE_DESKTOP_CLASSES = "hidden md:flex flex-1 items-center h-full";
 
+/**
+ * Maximum width before the menu expanded into full width
+ * 560px (max width of the menu) + 24px (margin) = 584px
+ */
+const MAX_MOBILE_MENU_WIDTH = 584;
+
 const Header: React.FC<HeaderProps> = ({
   searchBar,
   searchButton,
@@ -141,6 +147,13 @@ const Header: React.FC<HeaderProps> = ({
       if (window.innerWidth >= 1040) {
         setShowMenu(false);
       }
+
+      if (menuRef.current) {
+        menuRef.current.style.width =
+          window.innerWidth < MAX_MOBILE_MENU_WIDTH ? "auto" : "100%";
+        menuRef.current.style.left =
+          window.innerWidth < MAX_MOBILE_MENU_WIDTH ? "0" : "auto";
+      }
     };
 
     window.addEventListener("resize", handleResize);
@@ -271,8 +284,11 @@ const Header: React.FC<HeaderProps> = ({
           />
           <div
             id="mobile-menu"
-            className="md:hidden fixed flex flex-col top-[76px] overflow-y-hidden left-0 right-0 mx-12 bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20"
+            className="md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 max-w-[560px] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20"
             style={{
+              width:
+                window.innerWidth < MAX_MOBILE_MENU_WIDTH ? "auto" : "100%",
+              left: window.innerWidth < MAX_MOBILE_MENU_WIDTH ? "0" : "auto",
               maxHeight: componentMaxHeight(
                 HEADER_HEIGHT,
                 HEADER_BOTTOM_MARGIN,