Nav struct (unfinished)

templates/home.html

@@ -1,6 +1,6 @@
 {% set title = "Home" %}
 
-{% extends "layout/bootstrap.html" %}
+{% extends "layout/dash.html" %}
 
 {% block content %}
 <p>Template usage</p>

templates/layout/includes/nav.html

@@ -0,0 +1,107 @@
+<style>
+#sidenav {
+    background-color: #df34fd;
+    border-radius: 4px;
+
+    position: fixed;
+    top: 30px;
+    bottom: 30px;
+    left: 30px;
+    z-index: 100;
+
+    display: flex;
+    flex-direction: column;
+
+    max-width: 100%;
+    width: 280px;
+}
+
+#sidenav ul > li {
+    display: flex;
+    flex-direction: column;
+}
+
+#sidenav a, #sidenav h4 {
+    color: white;
+}
+
+.navlist ul > li, .navlist ul > li > a {
+    display: flex;
+    flex-grow: 1;
+}
+
+.navlist ul > li > a > span {
+    flex-grow: 1;
+}
+
+.navlist ul > li > a > i:last-child {
+    justify-content: flex-end;
+}
+
+.hidden {
+    display: none;
+}
+</style>
+<div class="d-flex flex-row" id="sidenav">
+    <div class="top">
+        <!-- Here be logo area -->
+    </div>
+    <div class="navlist">
+        <!-- Here be dropdown menus -->
+        <div class="p-2"> <!-- Padding -->
+            <ul>
+                <li> <!-- Collection -->
+                    <a href="#dash">
+                        <i class="fa fa-chart-bar"></i><span>Dashboard</span>
+                        <i class="fas fa-chevron-right"></i>
+                    </a>
+                    <div class="hidden"> <!-- Hidden until clicked #dash -->
+                        <ul>
+                            <li>
+                                <a href="#dash-test">Test</a> <!-- TODO: Add dot prefix -->
+                            </li>
+                            <li>
+                                <a href="#dash-demo">Demo</a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <h4>Title card</h4> <!-- TODO: Padding and such -->
+                </li>
+                <li>
+                    <a href="#bills">
+                        <i class="fa fa-chart-bar"></i><span>Bills</span>
+                        <i class="fas fa-chevron-right"></i>
+                    </a>
+                    <div class="hidden">
+                        <ul>
+                            <li>
+                                <a href="#bills-bills">Bills</a>
+                            </li>
+                            <li>
+                                <a href="#bills-log">Log</a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <a href="#recieps">
+                        <i class="fa fa-chart-bar"></i><span>Recieps</span>
+                        <i class="fas fa-chevron-right"></i>
+                    </a>
+                    <div class="hidden">
+                        <ul>
+                            <li>
+                                <a href="#recieps-recieps">Recieps</a>
+                            </li>
+                            <li>
+                                <a href="#recieps-log">Log</a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>