Convert navigation to primarily sidebar

static/src/scss/index.scss

@@ -2,6 +2,8 @@
 
 @import "homepage";
 
+$sidenav-width: 275px;
+
 body {
   display: flex;
   min-height: 100vh;
@@ -10,8 +12,27 @@ body {
 
 main {
   flex: 1 0 auto;
+
+  @media #{$large-and-up} {
+    margin-left: $sidenav-width;
+  }
+
 }
 
 footer.page-footer {
   padding-top: 0;
 }
+
+.sidenav {
+  width: $sidenav-width;
+
+  @media #{$large-and-up} {
+    transform: translateX(0) !important;
+  }
+}
+
+nav {
+  @media #{$large-and-up} {
+    display: none;
+  }
+}

templates/base.html

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

templates/navigation/index.html

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