diff --git a/src/components/widgets/docs/Sidebar.astro b/src/components/widgets/docs/Sidebar.astro
index 129bbb8..15d8688 100644
--- a/src/components/widgets/docs/Sidebar.astro
+++ b/src/components/widgets/docs/Sidebar.astro
@@ -30,7 +30,7 @@ const categories = Object.keys(sections);
     </div>
     <nav
         id="sidebar"
-        class="md:bg-transparentpy-4 invisible absolute mt-6 mr-16 w-full -translate-x-full bg-dark transition-transform duration-200 md:visible md:relative md:mt-0 md:inline md:translate-x-0"
+        class="invisible absolute mt-6 mr-16 w-full -translate-x-full bg-dark py-4 transition-transform duration-200 md:visible md:relative md:mt-0 md:inline md:translate-x-0 md:bg-transparent"
     >
         <ul class="overflow-y-auto overflow-x-visible">
             {
diff --git a/src/scripts/sidebarToggle.js b/src/scripts/sidebarToggle.js
index 4736f6e..f78aa62 100644
--- a/src/scripts/sidebarToggle.js
+++ b/src/scripts/sidebarToggle.js
@@ -1,6 +1,6 @@
 document.getElementById("sidebar-show").addEventListener("click", () => {
     document.getElementById("sidebar-show").classList.remove("hidden");
-    document.getElementById("sidebar").classList.toggle("translate-x-0");
+    document.getElementById("sidebar").classList.toggle("-translate-x-full");
     document.getElementById("sidebar").classList.remove("invisible");
     document.getElementById("open-arrow").classList.toggle("rotate-180");
 });