steam-bell-92 · steam-bell-92 · May 24, 2026 · May 24, 2026 · May 24, 2026
diff --git a/web-app/assets/banners/2048-game.jpg b/web-app/assets/banners/2048-game.jpg
diff --git a/web-app/assets/banners/armstrong.jpg b/web-app/assets/banners/armstrong.jpg
diff --git a/web-app/assets/banners/blackjack21.jpg b/web-app/assets/banners/blackjack21.jpg
diff --git a/web-app/assets/banners/calculator.jpg b/web-app/assets/banners/calculator.jpg
diff --git a/web-app/assets/banners/coin-flip.jpg b/web-app/assets/banners/coin-flip.jpg
diff --git a/web-app/assets/banners/collatz.jpg b/web-app/assets/banners/collatz.jpg
diff --git a/web-app/assets/banners/color-palette.jpg b/web-app/assets/banners/color-palette.jpg
diff --git a/web-app/assets/banners/coordinate-polar-transform.jpg b/web-app/assets/banners/coordinate-polar-transform.jpg
diff --git a/web-app/assets/banners/derivative-calculator.jpg b/web-app/assets/banners/derivative-calculator.jpg
diff --git a/web-app/assets/banners/dice-rolling.jpg b/web-app/assets/banners/dice-rolling.jpg
diff --git a/web-app/assets/banners/dots-boxes.jpg b/web-app/assets/banners/dots-boxes.jpg
diff --git a/web-app/assets/banners/emoji-memory.jpg b/web-app/assets/banners/emoji-memory.jpg
diff --git a/web-app/assets/banners/fibonacci.jpg b/web-app/assets/banners/fibonacci.jpg
diff --git a/web-app/assets/banners/flames.jpg b/web-app/assets/banners/flames.jpg
diff --git a/web-app/assets/banners/flappy-game.jpg b/web-app/assets/banners/flappy-game.jpg
diff --git a/web-app/assets/banners/hangman.jpg b/web-app/assets/banners/hangman.jpg
diff --git a/web-app/assets/banners/math-quiz.jpg b/web-app/assets/banners/math-quiz.jpg
diff --git a/web-app/assets/banners/morse-code.jpg b/web-app/assets/banners/morse-code.jpg
diff --git a/web-app/assets/banners/number-converter.jpg b/web-app/assets/banners/number-converter.jpg
diff --git a/web-app/assets/banners/number-guessing.jpg b/web-app/assets/banners/number-guessing.jpg
diff --git a/web-app/assets/banners/pascal-triangle.jpg b/web-app/assets/banners/pascal-triangle.jpg
diff --git a/web-app/assets/banners/password-forge.jpg b/web-app/assets/banners/password-forge.jpg
diff --git a/web-app/assets/banners/prime-analyzer.jpg b/web-app/assets/banners/prime-analyzer.jpg
diff --git a/web-app/assets/banners/productive-pet.jpg b/web-app/assets/banners/productive-pet.jpg
diff --git a/web-app/assets/banners/progression-recognizer.jpg b/web-app/assets/banners/progression-recognizer.jpg
diff --git a/web-app/assets/banners/projectile-motion.jpg b/web-app/assets/banners/projectile-motion.jpg
diff --git a/web-app/assets/banners/rock-paper-scissor.jpg b/web-app/assets/banners/rock-paper-scissor.jpg
diff --git a/web-app/assets/banners/snake-game.jpg b/web-app/assets/banners/snake-game.jpg
diff --git a/web-app/assets/banners/tic-tac-toe.jpg b/web-app/assets/banners/tic-tac-toe.jpg
diff --git a/web-app/assets/banners/tower-of-hanoi.jpg b/web-app/assets/banners/tower-of-hanoi.jpg
diff --git a/web-app/assets/banners/typing-speed-tester.jpg b/web-app/assets/banners/typing-speed-tester.jpg
diff --git a/web-app/assets/banners/whack-a-mole.jpg b/web-app/assets/banners/whack-a-mole.jpg
diff --git a/web-app/assets/banners/word-scramble.jpg b/web-app/assets/banners/word-scramble.jpg
diff --git a/web-app/css/styles.css b/web-app/css/styles.css
diff --git a/web-app/games.html b/web-app/games.html
@@ -90,44 +90,103 @@
     </style>
 </head>
 
-<body data-page="games">
+<body data-page="games" class="sidebar-active">
     <a href="#main-content" class="skip-link">🚀 Skip to main content</a>
 
-    <!-- Navigation -->
-    <nav class="navbar" aria-label="Primary">
-        <div class="container">
-            <div class="logo">
-                <a href="index.html" style="text-decoration: none; color: inherit; display: flex; align-items: center; gap: 8px;">
-                    <span style="font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 10px;">🎮 Python Mini Projects</span>
-                </a>
+    <!-- Mobile Sidebar Toggle -->
+    <button type="button" class="mobile-sidebar-toggle" id="mobileSidebarToggle" aria-label="Toggle sidebar menu" aria-expanded="false">
+      <i class="fas fa-bars"></i>
+    </button>
+
+    <!-- ── PRIMARY SIDEBAR DOCK ──────────────────────────────────── -->
+    <aside class="sidebar-dock" id="mainSidebar" aria-label="Primary Navigation">
+      <div class="sidebar-brand">
+        <a class="logo-wrap" href="index.html">
+          <div class="logo-top-row">
+            <img alt="PyMini Logo" class="navbar-logo" src="assets/logo.png"/>
+            <div class="logo-text">
+              <span class="logo-py">py</span>
+              <span class="logo-mini">.mini</span>
+              <span class="logo-parens">()</span>
             </div>
-            <div class="nav-controls">
-                <button type="button" class="sound-toggle" id="soundToggle" aria-label="Mute sounds">
-                    <i class="fas fa-volume-up" aria-hidden="true"></i>
-                </button>
-                <button type="button" class="theme-toggle" id="themeToggle" aria-label="Switch to light mode">
-                    <i class="fas fa-moon" aria-hidden="true"></i>
-                </button>
+          </div>
+          <span class="logo-tagline">games, math &amp; terminal toys</span>
+        </a>
+      </div>
+
+      <div class="sidebar-search">
+        <div class="search-box" style="position:relative">
+          <i class="fas fa-search"></i>
+          <input aria-label="Search projects" id="searchInput" placeholder="Search projects or tags..." type="text"/>
+          <div class="search-dropdown" id="searchDropdown">
+            <div class="dropdown-content" id="searchDropdownContent">
+              <div class="search-loader" id="searchLoader" style="display:none"><div class="spinner"></div></div>
+              <div class="recent-searches-section" id="recentSearchesSection">
+                <div class="dropdown-section-title">Recent</div>
+                <div class="dropdown-list" id="recentSearchesList"></div>
+              </div>
+              <div class="results-section" id="resultsSection" style="display:none">
+                <div class="dropdown-section-title">Projects</div>
+                <div class="dropdown-list" id="resultsList"></div>
+              </div>
+              <div class="tips-section" id="tipsSection">
+                <p><strong>Search tips</strong></p>
+                <ul>
+                  <li>Type a project name — <code>snake</code>, <code>quiz</code></li>
+                  <li>Filter by tag — <code>game</code>, <code>math</code>, <code>utility</code></li>
+                  <li>Press <code>Ctrl+K</code> to focus search</li>
+                </ul>
+              </div>
+              <div class="no-results-message" id="noResultsMessage" style="display:none">No projects found. Try a different keyword.</div>
             </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="sidebar-menu-wrapper">
+        <div class="sidebar-menu-title">Categories</div>
+        <nav class="sidebar-menu" role="tablist" aria-label="Filter by category">
+          <button aria-selected="false" class="sidebar-tab" data-category="all" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="layers"></svg></span>
+            <span class="sidebar-label">All Projects</span>
+          </button>
+          <button aria-selected="true" class="sidebar-tab active" data-category="games" role="tab" tabindex="0">
+            <span class="sidebar-icon"><svg data-lucide="gamepad-2"></svg></span>
+            <span class="sidebar-label">Games Arcade</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="math" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="sigma"></svg></span>
+            <span class="sidebar-label">Math Visuals</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="utilities" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="wrench"></svg></span>
+            <span class="sidebar-label">Utilities Lab</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="favorites" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="star"></svg></span>
+            <span class="sidebar-label">My Favorites</span>
+          </button>
+          <button aria-selected="false" class="sidebar-tab" data-category="playground" role="tab" tabindex="-1">
+            <span class="sidebar-icon"><svg data-lucide="terminal"></svg></span>
+            <span class="sidebar-label">Playground</span>
+          </button>
+        </nav>
+      </div>
+
+      <div class="sidebar-footer">
+        <div class="sidebar-controls">
+          <button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
+            <i class="fas fa-volume-up"></i>
+          </button>
+          <button aria-label="Switch theme" class="theme-toggle" id="themeToggle" type="button">
+            <i class="fas fa-moon"></i>
+          </button>
         </div>
-    </nav>
+      </div>
+    </aside>
 
     <main id="main-content" tabindex="-1">
 
-        <!-- Category Tabs -->
-        <section class="tabs-section" aria-label="Project categories">
-            <div class="container">
-                <div class="tabs-wrapper">
-                    <div class="tabs" role="tablist" aria-label="Project categories">
-                        <a href="index.html" class="tab" role="tab">🌟 All Projects</a>
-                        <a href="games.html" class="tab active" role="tab" aria-selected="true">🎮 Games</a>
-                        <a href="math.html" class="tab" role="tab">🔢 Math</a>
-                        <a href="utilities.html" class="tab" role="tab">🔐 Utilities</a>
-                    </div>
-                </div>
-            </div>
-        </section>
-
         <!-- Page Title Section -->
         <section class="page-title-section" style="text-align: center; padding: 2rem 0 1rem 0;">
             <div class="container">
@@ -319,7 +378,9 @@ <h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-
     <script src="js/projects/snake.js"></script>
     <script src="js/projects/spot-the-difference.js"></script>
     <script src="js/projects.js"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
     <script src="js/main.js"></script>
+    <script>lucide.createIcons();</script>
 
 </body>
 </html>