Add support for (icon) tabs in top navbar

aleksis/core/static/public/style.scss

@@ -768,3 +768,29 @@ main figure.alert {
 .margin-bottom {
   margin-bottom: 0.7rem !important;
 }
+
+/* Tabs with icons */
+.tabs-icons, .tabs-icons .tab, .tabs-icons a {
+  height: 72px;
+}
+
+.tabs-icons .tab {
+  display: inline-flex;
+  flex-direction: column;
+
+}
+
+.tabs-icons .tab a {
+  padding-top: 12px;
+  line-height: 14px;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+}
+
+.tabs-icons .tab i {
+  font-size: 24px;
+  line-height: 1;
+  height: 24px;
+  margin-bottom: 8px;
+}

aleksis/core/templates/core/base.html

@@ -69,7 +69,7 @@
   </div>
 
   <!-- Nav bar (logged in as, logout) -->
-  <nav>
+  <nav class="nav-extended">
     <div class="nav-wrapper">
       <a class="brand-logo" href="/">{{ request.site.preferences.general__title }}</a>
 
@@ -82,6 +82,9 @@
         {% endif %}
       </ul>
     </div>
+    <div class="nav-content">
+      {% block nav_content %}{% endblock %}
+    </div>
   </nav>
 
   <!-- Main nav (sidenav) -->