feat(ui): Minimalist top navigation bar with Drawer slider, Pause & Speed controls

game/index.html

@@ -16,44 +16,48 @@
 </head>
 <body>
   <div id="game-wrapper">
-    <!-- Clean Responsive Top Navigation Bar -->
+    <!-- Minimalist Clean Top Navigation Bar -->
     <header class="top-nav-bar">
       <div class="nav-left">
-        <button id="btn-menu" class="nav-btn" title="Выйти в главное меню">🏠 Меню</button>
-        <div id="user-profile-badge" class="profile-badge">
+        <button id="btn-main-menu-drawer" class="nav-btn btn-menu-main" title="Открыть меню разделов">☰ Меню</button>
+        <div id="user-profile-badge" class="profile-badge cursor-pointer" title="Управление профилем">
           <span id="badge-user-name">👤 Гость</span>
-          <button id="btn-auth-open" class="btn-mini" title="Управление профилем">Войти</button>
-          <button id="btn-auth-logout-nav" class="btn-mini btn-logout-mini hidden" title="Выйти из профиля в гостевой режим">Выйти</button>
-        </div>
-        <div class="desktop-nav-links">
-          <button id="btn-campaign-open" class="nav-btn" title="Карта Кампании: 25 уровней и 5 биомов">🗺️ Кампания</button>
-          <button id="btn-workshop" class="nav-btn" title="Сад-Мастерская: прокачка растений и перки">🧪 Мастерская</button>
-          <button id="btn-zengarden" class="nav-btn" title="Дзен-Сад: пассивный доход и улитка Стинки">🪴 Дзен-Сад</button>
-          <button id="btn-almanac" class="nav-btn" title="Пригородный Альманах растений и зомби">📖 Альманах</button>
-          <button id="btn-achievements" class="nav-btn" title="Зал Достижений и Трофеев">🏆 Достижения</button>
-          <button id="btn-tree" class="nav-btn" title="Древо Мудрости и Секретные Чит-коды">🌳 Древо</button>
-          <button id="btn-leaderboard" class="nav-btn" title="Доска Почёта и Рекорды">🏅 Рекорды</button>
-          <button id="btn-bugreport" class="nav-btn btn-bug-nav" title="Чат баг-репортов и предложений">🐛 Баги</button>
+          <button id="btn-auth-open" class="btn-mini" title="Профиль / Авторизация">Войти</button>
+          <button id="btn-auth-logout-nav" class="btn-mini btn-logout-mini hidden" title="Выйти из аккаунта">Выйти</button>
         </div>
       </div>
       <div class="nav-right">
-        <button id="btn-theme" class="nav-btn" title="Смена темы оформления (Классика, Киберпанк, Ретро, Зима)">🎨 Классика</button>
-        <button id="btn-speed" class="nav-btn" title="Ускорить игру">⚡ 1x</button>
-        <button id="btn-pause" class="nav-btn btn-pause" title="Пауза / Продолжить (Пробел)">⏸️ Пауза</button>
-        <button id="btn-music" class="nav-btn" title="Включить/выключить музыку">🎵 Музыка</button>
-        <button id="btn-mute" class="nav-btn" title="Включить/выключить звук">🔊 Звук</button>
-        <button id="btn-mobile-drawer" class="nav-btn btn-drawer-toggle" title="Открыть меню разделов">☰ Разделы</button>
+        <button id="btn-speed" class="nav-btn btn-icon-nav" title="Скорость игры (1x / 2x)">⚡ 1x</button>
+        <button id="btn-pause" class="nav-btn btn-pause btn-icon-nav" title="Пауза / Продолжить (Пробел)">⏸️ Пауза</button>
+        <button id="btn-mute" class="nav-btn btn-icon-nav" title="Включить / выключить звук">🔊 Звук</button>
+      </div>
+
+      <!-- Hidden trigger targets for backwards compatibility & tests -->
+      <div style="display: none;">
+        <button id="btn-menu"></button>
+        <button id="btn-campaign-open"></button>
+        <button id="btn-workshop"></button>
+        <button id="btn-zengarden"></button>
+        <button id="btn-almanac"></button>
+        <button id="btn-achievements"></button>
+        <button id="btn-tree"></button>
+        <button id="btn-leaderboard"></button>
+        <button id="btn-bugreport"></button>
+        <button id="btn-theme"></button>
+        <button id="btn-music"></button>
+        <button id="btn-mobile-drawer"></button>
       </div>
     </header>
 
-    <!-- Mobile Slide-out Drawer Menu -->
+    <!-- Slide-out Drawer Menu with All Game Activities -->
     <div id="drawer-backdrop" class="drawer-backdrop hidden"></div>
     <aside id="mobile-drawer" class="mobile-drawer hidden">
       <div class="drawer-header">
-        <h2>🌻 Разделы игры</h2>
+        <h2>🌻 Меню игры</h2>
         <button id="btn-drawer-close" class="btn-drawer-close" title="Закрыть меню">✕</button>
       </div>
       <div class="drawer-body">
+        <button id="btn-drawer-main-screen" class="drawer-item">🏠 Главный экран (Режимы)</button>
         <button id="btn-drawer-campaign" class="drawer-item">🗺️ Карта Кампании (25 уровней)</button>
         <button id="btn-drawer-workshop" class="drawer-item">🧪 Сад-Мастерская (Крафт и перки)</button>
         <button id="btn-drawer-zengarden" class="drawer-item">🪴 Дзен-Сад (Пассивный доход)</button>
@@ -61,6 +65,8 @@
         <button id="btn-drawer-achievements" class="drawer-item">🏆 Зал Достижений и Трофеев</button>
         <button id="btn-drawer-tree" class="drawer-item">🌳 Древо Мудрости и Чит-коды</button>
         <button id="btn-drawer-leaderboard" class="drawer-item">🏅 Доска Рекордов</button>
+        <button id="btn-drawer-theme" class="drawer-item">🎨 Тема оформления: <span id="drawer-theme-label" style="color: #81d4fa; margin-left: auto;">Классика</span></button>
+        <button id="btn-drawer-music" class="drawer-item">🎵 Фоновая музыка: <span id="drawer-music-label" style="color: #a5d6a7; margin-left: auto;">Вкл</span></button>
         <button id="btn-drawer-bugreport" class="drawer-item btn-drawer-bug">🐛 Баг-репорты и Чат</button>
       </div>
     </aside>