Make Documentation Website Responsive codediodeio#103

Aliwahid17 · Sep 1, 2023 · fb4586e · fb4586e
1 parent 3732913
commit fb4586e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/docs/src/components/SideNav.astro b/docs/src/components/SideNav.astro
@@ -1,4 +1,4 @@
-<nav id="sidebar" class="pt-12 w-1/6 min-w-[16rem] bg-gray1 dark:bg-gray7 hidden lg:block">
+<nav id="sidebar" class="absolute z-10 w-full pt-12 lg:relative lg:w-1/6 min-w-[16rem] bg-gray1 dark:bg-gray7 hidden lg:block">
   <ul class="pl-8 font-code mb-20">
     <li class="heading">guide</li>
     <li><a href="/">why?</a></li>

diff --git a/docs/src/components/TopNav.astro b/docs/src/components/TopNav.astro
@@ -81,8 +81,10 @@ import Search from './Search.astro'
   document.getElementById("dark")!.addEventListener("click", dark);
 
   const sidebarBtn = document.getElementById("sidebarBtn");
+  const article = document.querySelector("article")
   sidebarBtn.onclick = function () {
     const sidebar = document.getElementById("sidebar");
     sidebar.classList.toggle("hidden");
+    article.classList.toggle("hidden")
   };
 </script>
diff --git a/docs/src/layouts/MainLayout.astro b/docs/src/layouts/MainLayout.astro
@@ -23,12 +23,12 @@ import Footer from "../components/Footer.astro";
   </head>
   <body class="dark:bg-gray6 dark:text-white transition-colors duration-500">
     <TopNav />
-    <div class="flex items-stretch overflow-x-hidden">
+    <div class="relative flex items-stretch overflow-x-hidden">
       <SideNav />
       <main
         class="max-w-screen-2xl min-h-screen p-6 lg:p-20 mx-auto prose dark:prose-invert w-full flex flex-col justify-between"
       >
-        <article>
+        <article >
           <slot />
         </article>