Merge pull request #344 from itaim18/responsive-layout-fix

Author: shairez

apps/website/src/components/header/header.tsx

@@ -27,6 +27,7 @@ export default component$(
   ({ showVersion = false, showBottomBorder = false }: HeaderProps) => {
     const location = useLocation();
     const appState = useContext(APP_STATE_CONTEXT_ID);
+
     const menuOpenSignal = useSignal(false);
 
     const kitSignal = useComputed$(() => {
@@ -61,18 +62,13 @@ export default component$(
             : ``,
         ]}
       >
-        <button
-          type="button"
-          aria-label="Toggle navigation"
-          onClick$={toggleMenu$}
-          class="block lg:hidden"
-        >
-          {menuOpenSignal.value ? <CloseIcon /> : <MenuIcon />}
-        </button>
         {menuOpenSignal.value && (
-          <aside class="fixed top-0 left-0">
-            <div class="fixed h-screen w-screen bg-gray-900/20 backdrop-blur-sm"></div>
-            <div class="fixed h-screen w-80 overflow-y-scroll bg-white">
+          <aside class="fixed top-20 left-0 lg:hidden">
+            <div
+              onClick$={toggleMenu$}
+              class="fixed h-screen w-screen bg-gray-900/20 backdrop-blur-sm"
+            ></div>
+            <div class="fixed h-screen w-screen sm:w-80 overflow-y-scroll bg-white dark:bg-[var(--color-bg)]">
               <Menu onClose$={toggleMenu$} />
             </div>
           </aside>
@@ -114,6 +110,14 @@ export default component$(
         >
           <GitHubIcon />
         </a>
+        <button
+          type="button"
+          aria-label="Toggle navigation"
+          onClick$={toggleMenu$}
+          class="block lg:hidden"
+        >
+          {menuOpenSignal.value ? <CloseIcon /> : <MenuIcon />}
+        </button>
       </header>
     );
   }

apps/website/src/components/kit-selection-cta/kit-selection-cta.tsx

@@ -11,7 +11,7 @@ export default component$(({ kit }: Kit) => {
       hover:-outline-offset-4 hover:outline-4 hover:outline hover:outline-[var(--qwik-light-blue)] hover:scale-[1.025] 
             focus:-outline-offset-4 focus:outline-4 focus:outline focus:outline-[var(--qwik-light-blue)] focus:scale-[1.025] duration-150"
     >
-      <Card class={`max-w-md`}>
+      <Card>
         <CardImage
           src={`/images/kit-cta-${kit}.png`}
           alt={`${kit} kit`}

apps/website/src/components/menu/menu.tsx

@@ -113,15 +113,15 @@ export const Menu = component$<Props>(({ onClose$ }) => {
   });
 
   return (
-    <div class="px-4 py-4">
+    <div class="px-4 py-4 ">
       <div class="flex items-center justify-between">
         <h4 class="text-2xl">Documentation</h4>
-        {onClose$ && (
+        {/* {onClose$ && (
           // eslint-disable-next-line qwik/valid-lexical-scope
           <h5 onClick$={onClose$}>
             <CloseIcon />
           </h5>
-        )}
+        )} */}
       </div>
       <div class="mt-4">
         <div class="mt-8 flex items-center">