position menu toggler in small header bar

web/src/components/layout/Header.tsx

@@ -100,7 +100,9 @@ export const Header = () => {
             <MenuIcon showMenu={showMenu} />
           </button>
           <div className={styles.fullMenu}>
+            <div className={styles.logoIcon}>
               <LogoIcon face="right" />
+            </div>
             <ul>
               <li className={styles.menuItemLarge}>
                 <Link

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;