website responsive navbar

Abdenasser · Nov 12, 2024 · a5793eb · a5793eb
1 parent 6994dc4
commit a5793eb
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 0 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -35,6 +35,9 @@
         <img src="https://github.com/Abdenasser/neohtop/raw/main/app-icon.png" alt="NeoHtop" class="nav-logo">
         <span class="nav-brand">NeoHtop</span>
       </div>
+      <button class="menu-button" aria-label="Toggle menu">
+        ☰
+      </button>
       <div class="nav-links">
         <a href="#home">Home</a>
         <a href="#features">Features</a>

diff --git a/docs/main.js b/docs/main.js
@@ -151,3 +151,24 @@ document.addEventListener('DOMContentLoaded', () => {
   updateVersion();
   fetchDownloadStats();
 });
+
+
+// ===============================
+// Mobile Navigation
+// ===============================
+
+document.addEventListener('DOMContentLoaded', () => {
+  const menuButton = document.querySelector('.menu-button');
+  const navLinks = document.querySelector('.nav-links');
+
+  menuButton.addEventListener('click', () => {
+    navLinks.classList.toggle('active');
+  });
+
+  // Close menu when clicking outside
+  document.addEventListener('click', (e) => {
+    if (!navLinks.contains(e.target) && !menuButton.contains(e.target)) {
+      navLinks.classList.remove('active');
+    }
+  });
+});
diff --git a/docs/styles.css b/docs/styles.css
@@ -1462,4 +1462,57 @@ footer {
   .testimonial-grid {
     column-count: 1;
   }
+}
+
+/* Mobile Navigation Styles */
+@media (max-width: 768px) {
+  .glass-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+  }
+
+  .menu-button {
+    display: block;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0.5rem;
+    z-index: 101;
+  }
+
+  .nav-links {
+    position: fixed;
+    top: calc(60px + 1rem);
+    left: 0;
+    right: 0;
+    background: var(--card-background);
+    padding: 1.5rem;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    transform: translateY(-150%);
+    transition: transform 0.3s ease;
+    backdrop-filter: blur(12px);
+    visibility: hidden;
+    opacity: 0;
+    z-index: 100;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .nav-links.active {
+    transform: translateY(0);
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+/* Hide menu button on larger screens */
+@media (min-width: 769px) {
+  .menu-button {
+    display: none;
+  }
 }