Add a header in the navbar

Signed-off-by: Valentin Popov <info@valentineus.link>

1 files changed, 25 insertions, 20 deletions

diff --git a/_scss/components/_navigation.scss b/_scss/components/_navigation.scss
index 19d37f2..4edf502 100644
--- a/_scss/components/_navigation.scss
+++ b/_scss/components/_navigation.scss
@@ -13,6 +13,30 @@
   width: 100%;
 }
 
+.navigation {
+  background: $color-bg;
+  border-left: 1px solid $color-bg-alt;
+  border-right: 1px solid $color-bg-alt;
+  height: 100%;
+  left: 0;
+  margin: auto;
+  max-width: 52em;
+  padding: 0;
+  position: fixed;
+  right: 0;
+  top: 100px;
+  transform: scale(.1, 0);
+  transform-origin: 100% 0%;
+  transition: none;
+  width: 100%;
+}
+
+.navigation-header {
+  margin: 30px;
+  position: fixed;
+  text-transform: uppercase;
+}
+
 .toggle-button {
   display: none;
 
@@ -42,9 +66,8 @@
 .toggle-label {
   float: right;
   height: 20px;
+  margin: 40px;
   position: relative;
-  right: 40px;
-  top: 40px;
   width: 15px;
 
   &:hover {
@@ -67,21 +90,3 @@
     }
   }
 }
-
-.navigation {
-  background: $color-bg;
-  border-left: 1px solid $color-bg-alt;
-  border-right: 1px solid $color-bg-alt;
-  height: 100%;
-  left: 0;
-  margin: auto;
-  max-width: 52em;
-  padding: 0;
-  position: fixed;
-  right: 0;
-  top: 100px;
-  transform: scale(.1, 0);
-  transform-origin: 100% 0%;
-  transition: none;
-  width: 100%;
-}