diff --git a/docs/src/components/SideNav.astro b/docs/src/components/SideNav.astro
index b303b22..6c641a1 100644
--- 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
index 452122f..e124a2b 100644
--- 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
index 2a4d832..e16d789 100644
--- 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>
 
