menu icons, animations and color variable updates

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

@@ -22,10 +22,11 @@
 .siteMenu {
   display: flex;
   gap: var(--spacing-sitepadding);
-  align-items: flex-start;
+  align-items: center;
+  height: 3rem;
 
   a {
-    font-weight: 500;
+    font-weight: 600;
   }
 }
 
@@ -33,6 +34,14 @@
   list-style: none;
   display: flex;
   gap: var(--spacing-sitepadding);
+  animation: slideInFromRight .3s ease-out forwards;
+
+  a {
+    font-weight: 600;
+    /*font-size: var(--font-size-caption);
+    text-transform: uppercase;
+    letter-spacing: .05em;*/
+  }
 }
 
 .toggleMenu {
@@ -40,36 +49,20 @@
   z-index: 1001;
   background: none;
   margin-top: .2rem;
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  margin: 0;
 }
 
 .menuIcon {
-  --stroke-width: 0.12rem;
-  --icon-width: 1.75rem;
   display: block;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: var(--icon-width);
-  height: var(--stroke-width);
-  background: currentColor;
+  width: 3rem;
+  height: 3rem;
 
-  &:before,
-  &:after {
-    content: "";
-    display: block;
-    position: absolute;
-    left: 0;
-    width: var(--icon-width);
-    height: var(--stroke-width);
-    background: currentColor;
-  }
-
-  &:before {
-    top: -.5rem;
-  }
-
-  &:after {
-    bottom: -.5rem;
+  svg {
+    width: 100%;
+    height: 100%;
   }
 }
 
@@ -81,8 +74,8 @@
   z-index: 1000;
   width: 50%;
 
-  background: var(--color-chateauBlue);
-  color: var(--color-betongGray);
+  background: var(--color-menu-background);
+  color: var(--color-menu-text);
   padding: var(--spacing-sitepadding);
 
   transition: all var(--transition-easing);
@@ -111,7 +104,7 @@
 
 .siteMenu[data-show=true] {
   .mainMenu {
-    display: none;
+    animation: slideOutRight .3s ease-out forwards;
   }
 
   .fullMenu {
@@ -138,4 +131,28 @@
   .fullMenu {
     width: 100%;
   }
+}
+
+@keyframes slideOutRight {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }