From 4997ca75abc01317be2e831f40bb666961043e8c Mon Sep 17 00:00:00 2001
From: NW <nw@softuniq.eu>
Date: Wed, 8 Jul 2026 14:00:20 +0100
Subject: [PATCH] fix(admin): header logo alignment + sidebar version tag
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move app-logo out of flex-grow-1 div to be direct child of app-header
  (matches SmartAdmin CSS expectations for .app-header .app-logo)
- Remove inline style padding-left from logo, rely on SCSS padding
- Remove data-prefix attribute that positioned version text absolutely
- Override .app-logo > svg.sa-icon min-width (was 11rem) to natural
  icon size (1.5rem) so icon and text align inline
- Add .logo-text class for proper text sizing and nowrap
- Fix conflicting responsive classes on header buttons
  (d-sm-block d-sm-none → d-none d-lg-block)
- Fix fullscreen button aria-label (was 'Toggle Dark Mode')
- Remove w-100 from header inner div that pushed buttons off-screen
- Replace wifi icon in nav-footer with tag icon + version text v1.0
---
 src/admin/views/layout.ejs               | 22 ++++++++++++++++++++++
 src/admin/views/partials/app-header.ejs  | 12 ++++++------
 src/admin/views/partials/app-logo.ejs    |  4 ++--
 src/admin/views/partials/app-sidebar.ejs |  9 ++++++---
 4 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/admin/views/layout.ejs b/src/admin/views/layout.ejs
index ba9787b..bd896f7 100644
--- a/src/admin/views/layout.ejs
+++ b/src/admin/views/layout.ejs
@@ -82,6 +82,28 @@
         .apex-charts.sparkline {
             min-height: 50px;
         }
+
+        /* ====== Logo fix: icon + text inline alignment ====== */
+        /* Override the smartapp default that stretches SVG logo to --logo-width (11rem) */
+        .app-logo > svg.sa-icon {
+            width: var(--sa-icon-size, 1.5rem);
+            height: var(--sa-icon-size, 1.5rem);
+            min-width: 0;
+            flex-shrink: 0;
+        }
+        .app-logo .logo-text {
+            white-space: nowrap;
+            line-height: 1;
+            font-size: 1.125rem;
+        }
+        /* Sidebar logo text: show on full nav, hide on minified */
+        .set-nav-minified:not(.set-nav-collapsed) .app-sidebar:not(:hover) .app-logo .logo-text {
+            display: none;
+        }
+        /* Header logo: always show text (logo is hidden in header when sidebar-full) */
+        .app-header .app-logo .logo-text {
+            display: inline;
+        }
     </style>
 </head>
 
diff --git a/src/admin/views/partials/app-header.ejs b/src/admin/views/partials/app-header.ejs
index 2100867..e1d43fe 100644
--- a/src/admin/views/partials/app-header.ejs
+++ b/src/admin/views/partials/app-header.ejs
@@ -1,9 +1,9 @@
 <header class="app-header">
-    <!-- Collapse icon -->
-    <div class="d-flex flex-grow-1 w-100 me-auto align-items-center">
+    <!-- App logo (shown when sidebar logo is hidden) -->
+    <%- include('./app-logo') %>
 
-        <!-- App logo -->
-        <%- include('./app-logo') %>
+    <!-- Left section: menu toggle, collapse, search -->
+    <div class="d-flex flex-grow-1 me-auto align-items-center">
 
         <button class="mobile-menu-icon me-2 d-flex d-sm-flex d-md-flex d-lg-none flex-shrink-0" data-action="toggle-swap" data-toggleclass="app-mobile-menu-open" aria-label="Toggle Mobile Menu">
             <svg class="sa-icon">
@@ -41,14 +41,14 @@
     </button>
 
     <!-- Sidebar -->
-    <button type="button" class="btn btn-system d-none d-sm-block d-sm-none d-md-none d-lg-block" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-app-drawer" aria-label="Open Sidebar">
+    <button type="button" class="btn btn-system d-none d-lg-block" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-app-drawer" aria-label="Open Sidebar">
         <svg class="sa-icon sa-icon-2x">
             <use href="/icons/sprite.svg#aperture"></use>
         </svg>
     </button>
 
     <!-- Full Screen Mode -->
-    <button type="button" class="btn btn-system d-none d-sm-block d-sm-none d-md-none d-lg-block" data-action="app-fullscreen" aria-label="Toggle Dark Mode" aria-pressed="false">
+    <button type="button" class="btn btn-system d-none d-lg-block" data-action="app-fullscreen" aria-label="Toggle Fullscreen" aria-pressed="false">
         <svg class="sa-icon sa-icon-2x sa-fullscreen-on">
             <use href="/icons/sprite.svg#minimize"></use>
         </svg>
diff --git a/src/admin/views/partials/app-logo.ejs b/src/admin/views/partials/app-logo.ejs
index f7a282a..581ec4b 100644
--- a/src/admin/views/partials/app-logo.ejs
+++ b/src/admin/views/partials/app-logo.ejs
@@ -1,6 +1,6 @@
-<a href="/" class="app-logo flex-shrink-0" data-prefix="v1.0" style="padding-left: 1.25rem;">
+<a href="/" class="app-logo flex-shrink-0">
     <svg class="sa-icon sa-icon-2x">
         <use href="/icons/sprite.svg#box"></use>
     </svg>
-    <span class="ms-2 fw-bold">Shop Admin</span>
+    <span class="logo-text ms-2 fw-500">Shop Admin</span>
 </a>
diff --git a/src/admin/views/partials/app-sidebar.ejs b/src/admin/views/partials/app-sidebar.ejs
index 11c4df6..7e833c3 100644
--- a/src/admin/views/partials/app-sidebar.ejs
+++ b/src/admin/views/partials/app-sidebar.ejs
@@ -24,9 +24,12 @@
     </nav>
 
     <div class="nav-footer">
-        <svg class="sa-icon sa-thin">
-            <use href="/icons/sprite.svg#wifi"></use>
-        </svg>
+        <div class="d-flex align-items-center gap-2">
+            <svg class="sa-icon sa-thin">
+                <use href="/icons/sprite.svg#tag"></use>
+            </svg>
+            <span class="fs-xs opacity-70">v1.0</span>
+        </div>
     </div>
 </aside>