From 3258965bcc6c29ee720d3e86afc6eb4e39feb3f4 Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Mon, 6 Apr 2026 18:36:10 +0200
Subject: [PATCH] Restyle menu

---
 index.html | 61 ++++++++++++++++++++++++++++++++----------------------
 js/app.js  | 32 +++++++++++++++++-----------
 2 files changed, 56 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index cba1d51..a32245d 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="Recipe">
     <title>Recipe App - Modular</title>
-    <link rel="manifest" href="./manifest.webmanifest?v=20260406-51">
+    <link rel="manifest" href="./manifest.webmanifest?v=20260406-58">
     <link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
     <link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -384,14 +384,15 @@
         }
         #app-bottom-nav .bottom-dock {
             position: relative;
-            width: min(calc(100% - 2rem), 22.4rem);
-            min-height: 3.7rem;
+            box-sizing: border-box;
+            width: min(calc(100% - 3.6rem), 20.9rem);
+            height: 3.34rem;
             display: grid;
             grid-template-columns: repeat(4, minmax(0, 1fr));
-            align-items: center;
-            gap: 0.1rem;
-            padding: 0.35rem 0.45rem;
-            border-radius: 999px;
+            align-items: stretch;
+            gap: 0.06rem;
+            padding: 0.22rem;
+            border-radius: 1.68rem;
             background: #393937;
             border: 1px solid #41423f;
             box-shadow:
@@ -400,6 +401,13 @@
                 0 22px 34px rgba(0, 0, 0, 0.18);
             pointer-events: auto;
         }
+        #app-bottom-nav .nav-slot {
+            min-width: 0;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
         #app-bottom-nav .nav-tab,
         #app-bottom-nav .nav-action {
             appearance: none;
@@ -407,15 +415,15 @@
             border: 0;
             background: transparent !important;
             box-shadow: none !important;
-            width: 2.55rem;
-            height: 2.55rem;
+            width: 2.18rem;
+            height: 2.18rem;
             margin: 0;
             padding: 0;
-            border-radius: 999px;
+            border-radius: 1.35rem;
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            justify-self: center;
+            flex: 0 0 auto;
             color: #ece8e0;
             cursor: pointer;
             transition:
@@ -436,13 +444,12 @@
             background: rgba(255, 255, 255, 0.04) !important;
         }
         #app-bottom-nav .nav-tab.is-active {
-            width: 2.95rem;
-            height: 2.95rem;
+            width: 100%;
+            height: 100%;
             color: #fff;
             background: #2d2e2b !important;
-            box-shadow:
-                inset 0 1px 0 rgba(255, 255, 255, 0.04),
-                0 10px 20px rgba(0, 0, 0, 0.24) !important;
+            border-radius: 1.46rem;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18) !important;
         }
         #app-bottom-nav .nav-tab:active,
         #app-bottom-nav .nav-action:active {
@@ -459,18 +466,22 @@
                 padding-inline: 0.7rem;
             }
             #app-bottom-nav .bottom-dock {
-                width: min(calc(100% - 1.4rem), 21.6rem);
-                min-height: 3.45rem;
-                padding-inline: 0.35rem;
+                width: min(calc(100% - 2.4rem), 19.7rem);
+                height: 3.12rem;
+                gap: 0.05rem;
+                padding: 0.2rem;
+                border-radius: 1.56rem;
             }
             #app-bottom-nav .nav-tab,
             #app-bottom-nav .nav-action {
-                width: 2.35rem;
-                height: 2.35rem;
+                width: 2.02rem;
+                height: 2.02rem;
+                border-radius: 1.28rem;
             }
             #app-bottom-nav .nav-tab.is-active {
-                width: 2.75rem;
-                height: 2.75rem;
+                height: 100%;
+                width: 100%;
+                border-radius: 1.36rem;
             }
         }
 
@@ -509,7 +520,7 @@
     </div>
 
     <script>
-        const APP_ASSET_VERSION = '20260406-51';
+        const APP_ASSET_VERSION = '20260406-58';
         const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
         const APP_VERSION_QUERY_KEY = 'appv';
 
@@ -543,7 +554,7 @@
         })();
     </script>
     <script type="module">
-        const appVersion = window.__APP_ASSET_VERSION__ || '20260406-51';
+        const appVersion = window.__APP_ASSET_VERSION__ || '20260406-58';
         const recoveryKey = `recipe-app-recovery-${appVersion}`;
 
         function renderBootstrapError(message) {
diff --git a/js/app.js b/js/app.js
index 4b3d610..2610cc6 100644
--- a/js/app.js
+++ b/js/app.js
@@ -52,18 +52,26 @@ function getBottomNavHTML() {
     return `
     <nav id="app-bottom-nav" aria-label="Główna nawigacja">
         <div class="bottom-dock">
-        <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab is-active" aria-label="Przepisy" aria-current="page">
-            <i class="fas fa-book" aria-hidden="true"></i>
-        </button>
-        <button type="button" data-tab="planner" id="nav-planner" class="nav-tab" aria-label="Planer">
-            <i class="far fa-calendar-alt" aria-hidden="true"></i>
-        </button>
-        <button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia">
-            <i class="fas fa-warehouse" aria-hidden="true"></i>
-        </button>
-        <button type="button" id="nav-theme-toggle" class="nav-action" aria-label="${isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw'}" title="${isDark ? 'Jasny motyw' : 'Ciemny motyw'}">
-            <i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'}" aria-hidden="true"></i>
-        </button>
+            <div class="nav-slot">
+                <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab is-active" aria-label="Przepisy" aria-current="page">
+                    <i class="fas fa-book" aria-hidden="true"></i>
+                </button>
+            </div>
+            <div class="nav-slot">
+                <button type="button" data-tab="planner" id="nav-planner" class="nav-tab" aria-label="Planer">
+                    <i class="far fa-calendar-alt" aria-hidden="true"></i>
+                </button>
+            </div>
+            <div class="nav-slot">
+                <button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia">
+                    <i class="fas fa-warehouse" aria-hidden="true"></i>
+                </button>
+            </div>
+            <div class="nav-slot">
+                <button type="button" id="nav-theme-toggle" class="nav-action" aria-label="${isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw'}" title="${isDark ? 'Jasny motyw' : 'Ciemny motyw'}">
+                    <i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'}" aria-hidden="true"></i>
+                </button>
+            </div>
         </div>
     </nav>
     `;