From fb4eec2c5b5a57a024905029c0c52503ca109e81 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Thu, 27 Jun 2024 10:24:49 +0200
Subject: [PATCH] position menu toggler in small header bar

---
 web/src/components/layout/Header.tsx         |  4 +-
 web/src/components/layout/header.module.scss | 50 ++++++++++++--------
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index 501c8ed..92b9755 100644
--- a/web/src/components/layout/Header.tsx
+++ b/web/src/components/layout/Header.tsx
@@ -100,7 +100,9 @@ export const Header = () => {
             <MenuIcon showMenu={showMenu} />
           </button>
           <div className={styles.fullMenu}>
-            <LogoIcon face="right" />
+            <div className={styles.logoIcon}>
+              <LogoIcon face="right" />
+            </div>
             <ul>
               <li className={styles.menuItemLarge}>
                 <Link
diff --git a/web/src/components/layout/header.module.scss b/web/src/components/layout/header.module.scss
index 035b03e..7db4d4b 100644
--- a/web/src/components/layout/header.module.scss
+++ b/web/src/components/layout/header.module.scss
@@ -12,6 +12,37 @@
     text-decoration: none;
   }
 
+  &[data-show=true] {
+    .mainMenu {
+      animation: slideOutRight .3s ease-out forwards;
+    }
+
+    .fullMenu {
+      right: 0;
+    }
+
+    .toggleMenu {
+      position: fixed;
+      right: var(--spacing-sitepadding-inline);
+    }
+
+    .menuIcon {
+      color: var(--color-betongGray);
+    }
+
+    &[data-small=true] {
+      .fullMenu {
+        .logoIcon {
+          display: none;
+        }
+      }
+
+      .toggleMenu {
+        top: .75rem;
+      }
+    }
+  }
+
   &[data-small=true] {
     .headerBar {
       animation: slideDown .6s ease forwards;
@@ -137,25 +168,6 @@
   margin-top: var(--spacing-m);
 }
 
-.header[data-show=true] {
-  .mainMenu {
-    animation: slideOutRight .3s ease-out forwards;
-  }
-
-  .fullMenu {
-    right: 0;
-  }
-
-  .toggleMenu {
-    position: fixed;
-    right: var(--spacing-sitepadding-inline);
-  }
-
-  .menuIcon {
-    color: var(--color-betongGray);
-  }
-}
-
 @media (max-width: 1200px) {
   .mainMenu {
     display: none;