docs: fix header

Author: shairez

apps/website/src/routes/_components/header/header.tsx

@@ -47,24 +47,29 @@ export default component$(
     return (
       <header
         class={[
-          `fixed top-0 w-full h-20 z-20 bg-[var(--color-bg)] flex gap-8 p-4 items-center`,
+          `fixed top-0 w-full h-20 md:h-20 z-20 lg:bg-[var(--color-bg)] flex gap-8 p-4 items-center`,
+          rootStore.isSidebarOpened
+            ? 'bg-blue-200 brightness-75 dark:bg-indigo-900'
+            : '',
           showBottomBorder
             ? `border-b-[1px] border-slate-300 dark:border-slate-600`
             : ``,
         ]}
       >
-        <a href="/" class="lg:ml-8">
-          <Logo />
-        </a>
+        <section class="flex flex-col md:flex-row gap-1 md:gap-8 mr-auto">
+          <a href="/" class="lg:ml-8">
+            <Logo />
+          </a>
 
-        <div data-tip="Qwik-UI Version" class="mr-auto">
           {showVersion && (
-            <div class="flex flex-col">
-              <span> {kitSignal.value?.name} Kit </span>
-              <span> v.{kitSignal.value?.version} </span>
+            <div data-tip="Qwik-UI Version" class="mr-auto">
+              <div class="flex flex-row gap-1 ml-2 md:mt-1 md:flex-col text-xs md:text-sm">
+                <span> {kitSignal.value?.name} Kit </span>
+                <span> v.{kitSignal.value?.version} </span>
+              </div>
             </div>
           )}
-        </div>
+        </section>
 
         <nav class="hidden lg:flex gap-4">
           <a href="/about">About</a>

apps/website/src/routes/_components/icons/MoonIcon.tsx

@@ -3,7 +3,7 @@ export const MoonIcon = () => (
     viewBox="0 0 20 20"
     fill="none"
     aria-hidden="true"
-    class="h-8 w-8 p-1 rounded-xl stroke-white hover:bg-slate-600"
+    class="h-10 w-10 p-1 rounded-xl stroke-white hover:bg-slate-600"
   >
     <path d="M15.224 11.724a5.5 5.5 0 0 1-6.949-6.949 5.5 5.5 0 1 0 6.949 6.949Z" />
   </svg>

apps/website/src/routes/_components/icons/SunIcon.tsx

@@ -3,7 +3,7 @@ export const SunIcon = () => (
     viewBox="0 0 20 20"
     fill="none"
     aria-hidden="true"
-    class="h-8 w-8 p-1 rounded-xl stroke-black hover:bg-gray-100"
+    class="h-10 w-10 p-1 rounded-xl stroke-black hover:bg-gray-100"
   >
     <path d="M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" />
     <path

apps/website/src/routes/[email protected]

@@ -39,5 +39,5 @@ export default component$(() => {
 });
 
 export const head: DocumentHead = {
-  title: 'Qwik UI',
+  title: 'Qwik UI - The first component library for Qwik',
 };