From 949f289d3cc3df778088f462dcaec3a2d8933ecc Mon Sep 17 00:00:00 2001
From: Valentin Popov <info@valentineus.link>
Date: Sun, 24 Mar 2019 22:10:30 +0400
Subject: [PATCH] Add a header in the navbar

Signed-off-by: Valentin Popov <info@valentineus.link>
---
 _includes/navbar.html             |  2 ++
 _scss/components/_navigation.scss | 45 +++++++++++++++++--------------
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/_includes/navbar.html b/_includes/navbar.html
index bac694d..145d77f 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -1,6 +1,8 @@
 {% assign pages = site.pages | where: "show", true %}
 
 <div class="navigation-container">
+    <h1 class="navigation-header">Header</h1>
+
     <input id="toggle-button" class="toggle-button" type="checkbox" />
 
     <label class="toggle-label" for="toggle-button">
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%;
-}