From d2ede883d1be95c31f4fd810a7ddcf84ced32b48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Veikko=20Lintuj=C3=A4rvi?= <veikko@lintujarvi.fi>
Date: Wed, 13 May 2026 21:10:41 +0300
Subject: [PATCH] NavBar style fix

---
 src/components/Navbar/Navbar.jsx         | 24 +++++++++++++-----------
 src/components/Navbar/Navbar.module.scss | 13 +++++++++++++
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index a7d4ee3..1c29c30 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -41,18 +41,20 @@ export default function Navbar() {
           ))}
         </ul>
 
-        <ThemeToggle />
+        <div className={styles.navActions}>
+          <ThemeToggle />
 
-        <button
-          className={`${styles.burger} ${isOpen ? styles.burgerOpen : ''}`}
-          onClick={() => setIsOpen((v) => !v)}
-          aria-label="Toggle menu"
-          aria-expanded={isOpen}
-        >
-          <span />
-          <span />
-          <span />
-        </button>
+          <button
+            className={`${styles.burger} ${isOpen ? styles.burgerOpen : ''}`}
+            onClick={() => setIsOpen((v) => !v)}
+            aria-label="Toggle menu"
+            aria-expanded={isOpen}
+          >
+            <span />
+            <span />
+            <span />
+          </button>
+        </div>
       </nav>
     </header>
   );
diff --git a/src/components/Navbar/Navbar.module.scss b/src/components/Navbar/Navbar.module.scss
index 09cc430..62ebee7 100644
--- a/src/components/Navbar/Navbar.module.scss
+++ b/src/components/Navbar/Navbar.module.scss
@@ -88,6 +88,12 @@
 }
 
 // ── Burger ─────────────────────────────────────────────────────
+.navActions {
+  display: flex;
+  align-items: center;
+  gap: $space-1;
+}
+
 .burger {
   display: none;
   flex-direction: column;
@@ -129,6 +135,13 @@
     gap: $space-4;
     transform: translateY(-110%);
     transition: transform $transition-base;
+    z-index: 99;
+
+    button {
+      width: 100%;
+      text-align: left;
+    }
+    transition: transform $transition-base;
 
     &.open {
       transform: translateY(0);