Merge branch 'feature/top-nav-tabs' into 'master'

Support (icon) tabs in top navbar

See merge request !789

CHANGELOG.rst

@@ -14,6 +14,7 @@ Added
 
 * Support config files in sub-directories
 * Provide views for assigning/managing permissions in frontend
+* Support (icon) tabs in the top navbar.
 
 Fixed
 ~~~~~

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) -->

docs/dev/04_materialize_templates.rst

@@ -29,6 +29,51 @@ To fully remove page or browser title, use these template tags::
     {% block no_browser_title %}{% endblock %}
     {% block no_page_title %}{% endblock %}
 
+
+Extended navbar
+---------------
+
+The top navbar with the site title and the login status can be extended by an additional tab bar, for example.
+
+To add normal Materialize tabs without icons, you can use a snippet like described in `Extended Navbar with Tabs`_:
+
+.. code-block:: html+django
+
+    {% block nav_content %}
+        <ul class="tabs tabs-transparent">
+            <li class="tab"><a href="#test1">Test 1</a></li>
+            <li class="tab"><a class="active" href="#test2">Test 2</a></li>
+            <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
+            <li class="tab"><a href="#test4">Test 4</a></li>
+        </ul>
+    {% endblock %}
+
+Furthermore, you can use tabs with integrated icons that are higher, but more compact in width:
+
+.. code-block:: html+django
+
+    {% block nav_content %}
+        <ul class="tabs tabs-transparent tabs-icons tabs-fixed-width">
+            <li class="tab">
+                <a href="#test1">
+                    <i class="material-icons">speaker_notes</i>
+                    Test 1
+                </a>
+            </li>
+            <li class="tab">
+                <a href="#test2">
+                    <i class="material-icons">people</i>
+                    Test 2
+                </a>
+            </li>
+        </ul>
+    {% endblock %}
+
+
+.. warning::
+
+    Don't define the ``nav_content`` block within the ``content`` block – that won't work.
+
 Forms in templates
 ------------------
 
@@ -91,3 +136,4 @@ After you've loaded the template tag, you can simply generate the table like thi
 
 .. _MaterializeCSS: https://materializecss.com/
 .. _django-material: https://pypi.org/project/django-material/
+.. _Extended Navbar with Tabs: https://materializecss.com/navbar.html#navbar-tabs
\ No newline at end of file