docs: add new layout-docs.tsx as base styles for docs-related pages

Author: shiroinegai

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

@@ -27,7 +27,7 @@ export default component$(() => {
   const isDocsRoute = location.url.pathname.indexOf('/docs/') !== -1;
 
   return (
-    <header class="fixed w-full h-20 z-10 flex gap-4 p-4 items-center backdrop-blur">
+    <header class="fixed w-full h-20 z-10 flex gap-8 p-4 items-center backdrop-blur">
       <button
         type="button"
         aria-label="Toggle navigation"
@@ -44,12 +44,16 @@ export default component$(() => {
           </div>
         </aside>
       )}
-      <a href="/" class="lg:ml-8 mr-auto">
-        <img src="/qwik-ui.png" class="w-32" />
+      <a href="/" class="lg:ml-8">
+        <img src="/qwik-ui.png" class="h-12 w-auto" />
       </a>
-      <div data-tip="Qwik-UI Version" class="">
+      <div data-tip="Qwik-UI Version" class="mr-auto">
         v.{version}
       </div>
+      <nav class="hidden sm:flex gap-4">
+        <a href="/docs">Docs</a>
+        <a href="/contact">Contact</a>
+      </nav>
       {isDocsRoute && <SelectTheme />}
       <button
         type="button"
@@ -62,6 +66,7 @@ export default component$(() => {
         target="_blank"
         href="https://github.com/qwikifiers/qwik-ui"
         aria-label="Qwik-UI GitHub repository"
+        class="sm:mr-8"
       >
         <GitHubIcon />
       </a>

apps/website/src/components/icons/GitHubIcon.tsx

@@ -1,11 +1,16 @@
 export const GitHubIcon = () => (
   <svg
-    width="20"
-    height="20"
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    class="inline-block h-5 w-5 fill-current md:h-6 md:w-6"
+    width="32"
+    height="32"
+    viewBox="0 0 15 15"
+    class="p-1 sm:block"
   >
-    <path d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"></path>
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M7.5.25a7.25 7.25 0 0 0-2.292 14.13c.363.066.495-.158.495-.35c0-.172-.006-.628-.01-1.233c-2.016.438-2.442-.972-2.442-.972c-.33-.838-.805-1.06-.805-1.06c-.658-.45.05-.441.05-.441c.728.051 1.11.747 1.11.747c.647 1.108 1.697.788 2.11.602c.066-.468.254-.788.46-.969c-1.61-.183-3.302-.805-3.302-3.583a2.8 2.8 0 0 1 .747-1.945c-.075-.184-.324-.92.07-1.92c0 0 .61-.194 1.994.744A6.963 6.963 0 0 1 7.5 3.756A6.97 6.97 0 0 1 9.315 4c1.384-.938 1.992-.743 1.992-.743c.396.998.147 1.735.072 1.919c.465.507.745 1.153.745 1.945c0 2.785-1.695 3.398-3.31 3.577c.26.224.492.667.492 1.343c0 .97-.009 1.751-.009 1.989c0 .194.131.42.499.349A7.25 7.25 0 0 0 7.499.25Z"
+      clip-rule="evenodd"
+    />
   </svg>
 );

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

@@ -7,7 +7,7 @@ export default component$(({ kit }: Kit) => {
   return (
     <a
       href={`/docs/install/${kit}`}
-      class="rounded-3xl border-2 overflow-hidden hover:-outline-offset-4 hover:outline-4 hover:outline hover:outline-[var(--qwik-light-blue)] hover:scale-105 focus:-outline-offset-4 focus:outline-4 focus:outline focus:outline-[var(--qwik-light-blue)] focus:scale-105 duration-150"
+      class="rounded-3xl border-2 overflow-hidden 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`}>
         <CardImage

apps/website/src/components/navigation-docs/navigation-docs.tsx

@@ -0,0 +1,90 @@
+import { component$ } from '@builder.io/qwik';
+import { Link } from '@builder.io/qwik-city';
+
+const components = [
+  'Accordion',
+  'Alert',
+  'Badge',
+  'Breadcrumb',
+  'Button',
+  'Button Group',
+  'Card',
+  'Carousel',
+  'Checkbox',
+  'Collapse',
+  'Drawer',
+  'Input',
+  'Input Phone',
+  'Navigation Bar',
+  'Pagination',
+  'Popover',
+  'Progress',
+  'Radio',
+  'Rating',
+  'Select',
+  'Slider',
+  'Spinner',
+  'Tabs',
+  'Toast',
+  'Toggle',
+  'Tooltip',
+];
+
+export const DocsNavigation = component$(() => {
+  return (
+    <nav class="flex flex-col gap-4 fixed h-full pt-20 pb-6 bg-blue-900 w-80">
+      <h1 class="pl-12 mt-8 font-medium text-lg">Getting started</h1>
+      <ul class="pl-12 flex flex-col gap-2">
+        <li>
+          <Link
+            class="px-4 py-2 -ml-4 mr-4 text-sm block rounded-lg hover:bg-[var(--qwik-light-blue)]"
+            href="/docs"
+          >
+            Introduction
+          </Link>
+        </li>
+        <li>
+          <Link
+            class="px-4 py-2 -ml-4 mr-4 text-sm block rounded-lg hover:bg-[var(--qwik-light-blue)]"
+            href="/install"
+          >
+            Installation
+          </Link>
+        </li>
+        <li>
+          <Link
+            class="px-4 py-2 -ml-4 mr-4 text-sm block rounded-lg hover:bg-[var(--qwik-light-blue)]"
+            href="/usage"
+          >
+            Usage
+          </Link>
+        </li>
+        <li>
+          <Link
+            class="px-4 py-2 -ml-4 mr-4 text-sm block rounded-lg hover:bg-[var(--qwik-light-blue)]"
+            href="/contributing"
+          >
+            Contributing
+          </Link>
+        </li>
+      </ul>
+      <h1 class="pl-12 font-medium text-lg">Components</h1>
+      <ol class="pl-12 flex flex-col gap-2 w-full h-full overflow-y-auto">
+        {components
+          .sort((a, b) => (a > b ? 1 : -1))
+          .map((component, index) => (
+            <li key={index}>
+              <Link
+                class="px-4 py-2 -ml-4 mr-4 text-sm block rounded-lg hover:bg-[var(--qwik-light-blue)]"
+                href={`/docs/headless/${component
+                  .toLowerCase()
+                  .replace(' ', '-')}`}
+              >
+                {component}
+              </Link>
+            </li>
+          ))}
+      </ol>
+    </nav>
+  );
+});