Merge pull request #87 from TryCli-Studio/feat/mobile-nav-improvements

minor changes

Author: Rakshat28

client/src/pages/blogs.rs

@@ -29,7 +29,7 @@ pub fn BlogsPage() -> impl IntoView {
     });
 
     view! {
-        <div style="min-height: 100vh; background: var(--bg-dark); display: flex; flex-direction: column;">
+        <div style="min-height: 100vh; background: var(--bg-dark); display: flex; flex-direction: column; overflow-x: hidden;">
             <Navbar>
                 <div class="nav-actions">
                     // User Profile Picture
@@ -74,7 +74,7 @@ pub fn BlogsPage() -> impl IntoView {
                 </div>
             </Navbar>
 
-            <main style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center;">
+            <main style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; overflow-x: hidden;">
                 <div class="badge">"Under Construction"</div>
 
                 <h1 class="hero-title" style="font-size: 3.5rem; margin-bottom: 1.5rem; line-height: 1.1;">

client/styles/02-navigation.css

@@ -136,10 +136,14 @@
     transition: right 0.3s ease-in-out;
     max-height: calc(100vh - 60px);
     overflow-y: auto;
+    visibility: hidden;
+    pointer-events: none;
 }
 
 .mobile-menu.open {
     right: 0;
+    visibility: visible;
+    pointer-events: auto;
 }
 
 .mobile-menu .menu-item {

client/styles/08-footer-docs.css

@@ -137,7 +137,7 @@
     position: fixed;
     bottom: 20px;
     right: 20px;
-    z-index: 90;
+    z-index: 1100;
     background: var(--bg-panel);
     border: 1px solid var(--border);
     border-radius: 50px;
@@ -152,6 +152,7 @@
     gap: 8px;
 }
 
+
 .docs-sidebar-toggle:hover {
     background: rgba(255, 255, 255, 0.1);
     transform: translateY(-2px);
@@ -413,13 +414,20 @@
 
 /* Mobile Responsive for Docs */
 @media (max-width: 968px) {
+    .docs-container {
+        overflow-x: hidden;
+    }
+
     .docs-layout {
         flex-direction: column;
+        overflow-x: hidden;
     }
 
     /* Show toggle button on mobile */
     .docs-sidebar-toggle {
-        display: flex;
+        display: flex !important;
+        visibility: visible;
+        opacity: 1;
     }
 
     /* Hide sidebar by default on mobile */