UI: Implement dedicated mobile navigation bar and fix toggle visibility

Dondeti Pranay Reddy · Dondeti Pranay Reddy · commit 7385bce53c44 · 2025-12-18T23:53:19.000+05:30
diff --git a/index.html b/index.html
@@ -18,7 +18,10 @@
 <body>
   <div class="background-emojis" id="emoji-bg"></div>
   <div id="app">
-    <button id="menu-toggle" aria-label="Toggle Menu">☰</button>
+    <div class="mobile-nav-bar">
+      <button id="menu-toggle" aria-label="Toggle Menu">☰</button>
+      <div class="mobile-logo">Energy Domain</div>
+    </div>
     <nav id="sidebar">
       <button id="close-sidebar" aria-label="Close Menu">×</button>
       <div class="logo">Energy Domain</div>
diff --git a/style.css b/style.css
@@ -286,12 +286,22 @@ p {
   transform: scale(1.05);
 }
 
-/* Logic to hide hamburger when sidebar is open */
-#app.mobile-sidebar-open #menu-toggle,
-#app:not(.sidebar-collapsed) #menu-toggle {
+/* Logic to hide hamburger when sidebar is open (Desktop Only) */
+@media (min-width: 901px) {
+  #app:not(.sidebar-collapsed) #menu-toggle {
+    display: none !important;
+  }
+}
+
+/* Logic to hide hamburger when sidebar is open (Mobile Only) */
+#app.mobile-sidebar-open #menu-toggle {
   display: none !important;
 }
 
+.mobile-nav-bar {
+  display: none;
+}
+
 /* X Button (Visible when sidebar is open) */
 #close-sidebar {
   display: flex !important;
@@ -520,8 +530,43 @@ p {
     overflow-x: hidden;
   }
 
+  .mobile-nav-bar {
+    display: flex;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(0, 176, 255, 0.2);
+    z-index: 150;
+    padding: 0 15px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  }
+
+  .mobile-logo {
+    margin-left: 15px;
+    font-weight: 800;
+    color: var(--neon-cyan);
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+
   #menu-toggle {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: static;
+    /* Use flex instead of fixed */
+    padding: 8px 12px;
+    font-size: 1.2rem;
+    background: none;
+    color: var(--neon-cyan);
+    box-shadow: none;
+    border: 1px solid rgba(0, 176, 255, 0.3);
   }
 
   #sidebar {
