Make docs page responsive

docs/src/components/DocsHeader.astro

@@ -4,17 +4,10 @@ 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-[300px] text-right flex justify-end">
-    <a href="/" class="flex items-center py-4 pr-5 border-r">
-      <img src="/driver-head.svg" alt="Astro" class="w-8 h-8 mr-2" />
-      <span class="text-xl font-bold">driver.js</span>
-    </a>
+  <div class="w-[200px] lg:w-[300px] text-right flex justify-end">
+
   </div>
   <div class="flex items-center pr-12">
-    <a href="https://github.com/kamranahmedse/driver.js" target="_blank"
-       class="text-black font-medium hover:border-gray-300 hover:bg-gray-50 text-sm flex items-center border rounded-md py-1.5 px-2">
-      <img src="/star.svg" class="mr-1" />
-      {starCount} GitHub Stars
-    </a>
+
   </div>
 </div>

docs/src/components/Sidebar.astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection, getEntry } from "astro:content";
+import { getFormattedStars } from "../lib/github";
 
 export interface Props {
   activePath: string;
@@ -16,9 +17,17 @@ const groupedGuides = sortedGuides.reduce((acc, curr) => {
 }, {});
 
 const { activePath } = Astro.props;
+
+const starCount = getFormattedStars("kamranahmedse/driver.js");
 ---
-<div class="w-[300px] border-r border-gray-200 text-right min-h-screen py-5 flex-shrink-0">
-  <div class="sticky top-[100px]">
+<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="sticky top-0">
+    <div class="justify-end flex pt-10 pb-5 px-5">
+      <a href="/" class="block items-center justify-end mb-2">
+        <img src="/driver-head.svg" alt="Astro" class="w-16 h-16" />
+      </a>
+    </div>
+
     {Object.keys(groupedGuides).map(groupTitle => {
       const guides = groupedGuides[groupTitle];
 

docs/src/layouts/DocsLayout.astro

@@ -17,15 +17,11 @@ const { groupTitle, sort, title } = guide.data;
 ---
 
 <BaseLayout title={title}>
-  <DocsHeader />
   <div class="flex">
-    <Sidebar activePath={`/docs/${guide.slug}`} />
-    <div class="flex-1 px-2 py-6">
-      <Container>
-        <div class="prose lg:proxe-xl mb-24 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-500 prose-p:before:content-['']">
-          <slot />
-        </div>
-      </Container>
+    <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-['']">
+      <slot />
     </div>
   </div>
 </BaseLayout>