Merge branch 'feature/fix-docs-css' into develop

.vscode/settings.json

@@ -17,7 +17,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "vscode.html-language-features"
   },
   "editor.tabSize": 2,
   "editor.insertSpaces": true,

docs/src/assets/js/main.js

@@ -137,16 +137,18 @@ const nav = document.querySelector(".nav-wrapper");
 nav.classList.add("transition-colors", "duration-300");
 
 function updateNavBackground() {
-    const scrollPosition = window.scrollY;
-
-    if (scrollPosition === 0) {
-        // When page is at the very top
-        nav.classList.remove("bg-indigo-950/50", "backdrop-blur-sm");
-        nav.classList.add("bg-transparent");
-    } else {
-        // After scrolling even slightly
-        nav.classList.remove("bg-transparent");
-        nav.classList.add("bg-indigo-950/50", "backdrop-blur-sm");
+    if (window.matchMedia("(min-width: 768px)").matches) {
+        const scrollPosition = window.scrollY;
+
+        if (scrollPosition === 0) {
+            // When page is at the very top
+            nav.classList.remove("bg-indigo-950/50", "backdrop-blur-sm");
+            nav.classList.add("bg-transparent");
+        } else {
+            // After scrolling even slightly
+            nav.classList.remove("bg-transparent");
+            nav.classList.add("bg-indigo-950/50", "backdrop-blur-sm");
+        }
     }
 }
 
@@ -338,3 +340,46 @@ scrollTopBtn.addEventListener("click", () => {
 });
 
 window.addEventListener("scroll", handleScroll);
+
+document.addEventListener("DOMContentLoaded", () => {
+    if (window.matchMedia("(max-width: 767px)").matches) {
+        const button = document.getElementById("mobile-menu-button");
+        const navWrapper = document.querySelector(".nav-wrapper");
+        const menu = document.getElementById("nav-menu");
+        let isOpen = false;
+
+        const toggleMenu = () => {
+            isOpen = !isOpen;
+            // Use transform for performance and opacity for fade effect
+            menu.classList.toggle("nav-list-open");
+            button.setAttribute("aria-expanded", isOpen);
+
+            // Toggle navigation background styles
+            navWrapper.classList.toggle("--active");
+            navWrapper.classList.toggle("bg-indigo-950");
+            navWrapper.classList.toggle("backdrop-blur-sm");
+            navWrapper.classList.toggle("bg-indigo-950/50");
+        };
+
+        button.addEventListener("click", toggleMenu);
+
+        document.addEventListener("keydown", (e) => {
+            if (e.key === "Escape" && isOpen) {
+                toggleMenu();
+            }
+        });
+
+        document.addEventListener("click", (e) => {
+            if (isOpen && !menu.contains(e.target) && !button.contains(e.target)) {
+                toggleMenu();
+            }
+        });
+
+        const mobileNavLinks = menu.querySelectorAll('a[href^="#"]');
+        mobileNavLinks.forEach((link) => {
+            link.addEventListener("click", () => {
+                toggleMenu();
+            });
+        });
+    }
+});

docs/src/assets/styles/main.css

@@ -21,6 +21,33 @@
   .sc-doc-block {
     @apply bg-gray-800 p-6 rounded-xl shadow-sm;
   }
+
+  .section-title {
+    @apply text-2xl sm:text-3xl lg:text-4xl font-bold mb-6 sm:mb-8 flex items-center gap-2 sm:gap-3;
+  }
+
+  .section-title__icon {
+    @apply hidden sm:inline-block w-4 h-4 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-indigo-600;
+  }
+
+  .nav-list {
+    @apply absolute flex-col translate-y-[-100%] opacity-0 pointer-events-none
+    inset-x-0 top-[60px] bg-indigo-950/90 backdrop-blur-md p-4
+    space-y-4 gap-4 transition-all duration-300 ease-in-out;
+  }
+
+  .nav-list-open {
+    @apply translate-y-0 opacity-100 pointer-events-auto;
+  }
+
+  /* Desktop overrides */
+  @screen md {
+    .nav-list {
+      @apply flex relative flex-row translate-y-0 opacity-100 pointer-events-auto
+        inset-x-auto top-0 bg-transparent backdrop-blur-none p-0
+        space-y-0 items-center gap-6;
+    }
+  }
 }
 
 .package-manager-btn {