Convert layout back to top navbar

It just looks so much better!!

static/src/scss/index.scss

@@ -2,8 +2,6 @@
 
 @import "homepage";
 
-$sidenav-width: 275px;
-
 body {
   @extend .grey-text, .text-lighten-3;
 
@@ -15,16 +13,10 @@ body {
 
 main {
   flex: 1 0 auto;
-
-  @media #{$large-and-up} {
-    margin-left: $sidenav-width;
-  }
-
 }
 
 footer.page-footer {
   padding-top: 0;
-  z-index: 1;
 }
 
 .sidenav {
@@ -33,23 +25,14 @@ footer.page-footer {
   li > a {
     @extend .grey-text, .text-lighten-3;
   }
-
-  width: $sidenav-width;
-
-  @media #{$large-and-up} {
-    transform: translateX(0) !important;
-    z-index: 0;
-  }
-}
-
-nav {
-  @media #{$large-and-up} {
-    display: none;
-  }
 }
 
 .header-image {
-  height: $sidenav-width * 1.5;
+  height: 40vh;
+
+  @media #{$medium-and-down} {
+    height: 60vh;
+  }
 
   // Fix darkreader weirdness
   .parallax {

templates/base.html

@@ -24,12 +24,17 @@
       <nav>
         <div class="nav-wrapper black">
           <a href="#" class="brand-logo right">Logo</a>
-          <a href="#" data-target="nav" class="sidenav-trigger">menu</a>
+          <a href="#" data-target="mobile-nav" class="sidenav-trigger">menu</a>
+          <ul class="left hide-on-med-and-down">
+            {% include "navigation/index.html" %}
+          </ul>
         </div>
       </nav>
     </header>
 
-    {% include "navigation/index.html" %}
+    <ul class="sidenav" id="mobile-nav">
+      {% include "navigation/index.html" %}
+    </ul>
 
     <main>
       {% block main %}{% endblock %}

templates/navigation/index.html

@@ -1,4 +1,2 @@
-<ul class="sidenav" id="nav">
+{% include "navigation/item.html" with reverse="homepage" text="Home" %}
-  {% include "navigation/item.html" with reverse="homepage" text="Home" %}
+{% include "navigation/item.html" with reverse="about" text="About" %}
-  {% include "navigation/item.html" with reverse="about" text="About" %}
-</ul>