sticky menu fuckery

web/src/components/layout/header.module.scss

@@ -11,6 +11,40 @@
   a {
     text-decoration: none;
   }
+
+  &[data-small=true] {
+    .headerBar {
+      animation: slideDown .6s ease forwards;
+    }
+  }
+}
+
+.headerBar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999;
+  background: var(--color-chateauBlue);
+  color: var(--color-white);
+  padding: .5rem var(--spacing-sitepadding-inline);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  transform: translateY(-100%);
+  animation: slideUp .4s ease forwards;
+}
+
+@keyframes slideDown {
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  to {
+    transform: translateY(-100%);
+  }
 }
 
 .logo {
@@ -103,7 +137,7 @@
   margin-top: var(--spacing-m);
 }
 
-.siteMenu[data-show=true] {
+.header[data-show=true] {
   .mainMenu {
     animation: slideOutRight .3s ease-out forwards;
   }
@@ -156,4 +190,11 @@
     transform: translateX(0);
     opacity: 1;
   }
+}
+
+// observer to trigger small menu
+.observer {
+  position: absolute;
+  top: calc(100vh + 8rem);
+  height: calc(100% - 100vh - 8rem);
 }