perf(shian): switch back to usual nav menu

BREAKING CHANGE: please update your stylesheets accordingly

src/sass/components/_header.scss

@@ -34,6 +34,8 @@
     z-index: 1;
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
     @include transition;
   }
 
@@ -48,12 +50,16 @@
 .header {
   display: flex;
   flex-direction: column;
-  height: 100%;
   @include transition;
 
+  @include screen(md) {
+    height: 4rem;
+    flex-direction: row;
+  }
   &__top {
     display: flex;
     flex-direction: row;
+    flex-grow: 1;
     height: 3rem;
     @include screen(md) {
       height: 4rem;
@@ -89,8 +95,10 @@
     cursor: pointer;
     text-align: center;
     white-space: nowrap;
-
     @include transition;
+    @include screen(md) {
+      display: none; 
+    }
     &:hover {
       background-color: $theme-blue;
     }

src/sass/components/_menu.scss

@@ -1,11 +1,48 @@
 .menu {
-  max-height: 0px;
   display: flex;
   flex-direction: column;
   @include transition;
-  overflow: hidden;
-  &.enabled {
-    max-height: 100vh;
+
+  @include screen(md) {
+    flex-direction: row;
+  }
+
+  // Dark mode special menu
+  &--dark-mode {
+    .menu__text {
+      display: block;
+      @include screen(md) {
+        display: none;
+      }
+    }
+    .menu__icon {
+      display: inline-block;
+    }
+  }
+
+  &__nav {
+    display: flex;
+    flex-direction: column;
+
+    @include screen(md) {
+      flex-direction: row;
+    }
+  }
+  &__nav-main {
+    display: flex;
+    flex-direction: column;
+
+    @include screen(md) {
+      flex-direction: row;
+    }
+
+    &.hidden {
+      display: none;
+
+      @include screen(md) {
+        display: flex;
+      }
+    }
   }
   &__item {
     color: $white;
@@ -16,6 +53,10 @@
     cursor: pointer;
     @include transition;
 
+    @include screen(md) {
+      height: 4rem;
+    }
+
     &:hover {
       background-color: $theme-blue;
     }
@@ -42,6 +83,10 @@
     text-align: center;
     @include px(0.5rem);
     @include py(0.75rem);
+    
+    @include screen(md) {
+      display: none;
+    }
   }
   &__text {
     display: inline-block;
@@ -94,4 +139,4 @@
       text-decoration: underline;
     }
   }
-}
+}

src/sass/components/_postheader.scss

@@ -8,7 +8,7 @@
       align-items: center;
     }
     &--tag-text {
-      margin-left: 0.5rem;
+      margin-right: 0.5rem;
       color: $white;
     }
     &--tag-color {

src/sass/ghost.scss

@@ -131,3 +131,12 @@
     white-space: nowrap;
   }
 }
+
+#darkMode {
+  .menu__text {
+    display: block;
+    @include screen(md) {
+      display: none;
+    }
+  }
+}