Make docs pages responsive

docs/public/burger.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"/></svg>

docs/public/cross.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>

docs/src/components/DocsHeader.astro

@@ -1,13 +0,0 @@
----
-import { getFormattedStars } from "../lib/github";
-
-const starCount = await getFormattedStars('kamranahmedse/driver.js');
----
-<div class="border-b flex items-center justify-between" docs-header>
-  <div class="w-[200px] lg:w-[300px] text-right flex justify-end">
-
-  </div>
-  <div class="flex items-center pr-12">
-
-  </div>
-</div>

docs/src/components/DocsHeader.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import type { CollectionEntry } from "astro:content";
+
+type DocsHeaderProps = {
+  groupedGuides: Record<string, CollectionEntry<"guides">[]>;
+};
+
+export function DocsHeader(props: DocsHeaderProps) {
+  const { groupedGuides } = props;
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <>
+      <div className="border-b flex items-center justify-between" docs-header>
+        <div className="text-right flex justify-end py-3 px-6">
+          <a href="/" className="flex items-center justify-end text-xl font-bold">
+            <img src="/driver-head.svg" alt="Astro" className="w-10 h-10 mr-2" />
+            driver.js
+          </a>
+        </div>
+        <div className="flex items-center pr-12">
+          <button onClick={() => setIsActive(!isActive)} className="p-[12px] -mr-[12px] hover:bg-gray-100 rounded-md">
+            <img src={isActive ? "/cross.svg" : "/burger.svg"} alt="menu" className="w-[14px] h-[14px]" />
+          </button>
+        </div>
+      </div>
+      <div className={`bg-gray-50 flex flex-col gap-5 px-6 py-6 border-b ${isActive ? "block" : "hidden"}`}>
+        {Object.entries(groupedGuides).map(([category, guides]) => (
+          <div key={category} className="flex flex-col gap-2">
+            <div className="font-bold text-gray-900 text-sm uppercase">{category}</div>
+            <div className="flex flex-col">
+              {guides.map((guide) => (
+                <a key={guide.slug} href={`/docs/${guide.slug}`} className="text-gray-500 hover:text-gray-900 py-1">
+                  {guide.data.title}
+                </a>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

docs/src/components/Sidebar.astro

@@ -1,24 +1,15 @@
 ---
 import { getCollection, getEntry } from "astro:content";
 import { getFormattedStars } from "../lib/github";
+import { getAllGuides } from "../lib/guide";
 
 export interface Props {
   activePath: string;
 }
 
-const allGuides = await getCollection("guides");
-const sortedGuides = allGuides.sort((a, b) => a.data.sort - b.data.sort);
-const groupedGuides = sortedGuides.reduce((acc, curr) => {
-  const { groupTitle } = curr.data;
-  acc[groupTitle] = acc[groupTitle] || [];
-  acc[groupTitle].push(curr);
-
-  return acc;
-}, {});
+const groupedGuides = getAllGuides();
 
 const { activePath } = Astro.props;
-
-const starCount = getFormattedStars("kamranahmedse/driver.js");
 ---
 <div class="hidden md:block w-[200px] lg:w-[350px] border-r border-gray-200 text-right min-h-screen flex-shrink-0">
   <div class="relative sh:sticky top-0">

docs/src/layouts/DocsLayout.astro

@@ -1,10 +1,11 @@
 ---
 import BaseLayout from "./BaseLayout.astro";
-import DocsHeader from "../components/DocsHeader.astro";
+import { DocsHeader } from "../components/DocsHeader";
 import Container from "../components/Container.astro";
 import { getFormattedStars } from "../lib/github";
 import Sidebar from "../components/Sidebar.astro";
 import type { CollectionEntry } from "astro:content";
+import { getAllGuides } from "../lib/guide";
 
 type GuideType = CollectionEntry<"guides">;
 
@@ -12,15 +13,18 @@ export interface Props {
   guide: GuideType;
 }
 
+const groupedGuides = await getAllGuides();
+
 const { guide } = Astro.props;
 const { groupTitle, sort, title } = guide.data;
 ---
 
 <BaseLayout title={title}>
+  <DocsHeader groupedGuides={groupedGuides} client:load />
   <div class="flex">
     <Sidebar />
     <div
-      class="min-w-0 max-w-[800px] py-10 lg:py-12 prose px-14 lg:proxe-xl mb-24 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-500 prose-p:before:content-['']">
+      class="min-w-0 max-w-[800px] py-6 md:py-12 prose px-6 md:px-14 prose-base md:proxe-xl mb-24 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-500 prose-p:before:content-['']">
       <slot />
     </div>
   </div>

docs/src/lib/guide.ts

@@ -0,0 +1,14 @@
+import { CollectionEntry, getCollection } from "astro:content";
+
+export async function getAllGuides(): Promise<Record<string, CollectionEntry<"guides">[]>> {
+  const allGuides: CollectionEntry<"guides">[] = await getCollection("guides");
+  const sortedGuides = allGuides.sort((a, b) => a.data.sort - b.data.sort);
+  return sortedGuides.reduce((acc: Record<string, CollectionEntry<"guides">[]>, curr: CollectionEntry<"guides">) => {
+    const { groupTitle } = curr.data;
+
+    acc[groupTitle] = acc[groupTitle] || [];
+    acc[groupTitle].push(curr);
+
+    return acc;
+  }, {});
+}