From c68286e010a7620cf67c215954d90b990410b68e Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Wed, 8 May 2024 14:01:01 +0200
Subject: [PATCH] more flexible navbar code in base template

---
 .../css => css/materialize}/fixes.css         |  0
 .../css => css/materialize}/sidenav-fixed.css |  0
 .../css => css/materialize}/sticky-footer.css |  0
 app/templates/_base/navbar.html.j2            | 44 -------------------
 .../_base/navbar_primary_content.html.j2      | 38 ++++++++++++++++
 app/templates/_base/stylesheets.html.j2       |  6 +--
 app/templates/base.html.j2                    | 42 +++++++++++++++---
 7 files changed, 76 insertions(+), 54 deletions(-)
 rename app/static/{materialize/css => css/materialize}/fixes.css (100%)
 rename app/static/{materialize/css => css/materialize}/sidenav-fixed.css (100%)
 rename app/static/{materialize/css => css/materialize}/sticky-footer.css (100%)
 delete mode 100644 app/templates/_base/navbar.html.j2
 create mode 100644 app/templates/_base/navbar_primary_content.html.j2

diff --git a/app/static/materialize/css/fixes.css b/app/static/css/materialize/fixes.css
similarity index 100%
rename from app/static/materialize/css/fixes.css
rename to app/static/css/materialize/fixes.css
diff --git a/app/static/materialize/css/sidenav-fixed.css b/app/static/css/materialize/sidenav-fixed.css
similarity index 100%
rename from app/static/materialize/css/sidenav-fixed.css
rename to app/static/css/materialize/sidenav-fixed.css
diff --git a/app/static/materialize/css/sticky-footer.css b/app/static/css/materialize/sticky-footer.css
similarity index 100%
rename from app/static/materialize/css/sticky-footer.css
rename to app/static/css/materialize/sticky-footer.css
diff --git a/app/templates/_base/navbar.html.j2 b/app/templates/_base/navbar.html.j2
deleted file mode 100644
index 50763f4e..00000000
--- a/app/templates/_base/navbar.html.j2
+++ /dev/null
@@ -1,44 +0,0 @@
-<div class="navbar-fixed">
-  <nav>
-    <div class="nav-wrapper primary-color">
-      {% if current_user.is_authenticated %}
-      <!-- menu icon -->
-      <!-- small/medium devices -->
-      <a href="#!" class="sidenav-trigger" data-target="sidenav"><i class="material-icons">menu</i></a>
-      {% endif %}
-
-      <!-- nopaque logo+wordmark -->
-      <!-- small/medium devices -->
-      <a href="{{ url_for('main.index') }}" class="brand-logo center hide-on-large-only" style="height: 100%;">
-        <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="py-3" style="height: 100%;">
-      </a>
-      <!-- large devices -->
-      <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%;">
-        <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="p-3" style="height: 100%;">
-      </a>
-
-      <!-- right aligned navigation links -->
-      <!-- large devices -->
-      <ul class="right hide-on-med-and-down" style="height: 100%;">
-        {% if current_user.is_authenticated %}
-        <!-- avatar, username and email -->
-        <li style="height: 100%;">
-          <a href="#!" class="dropdown-trigger no-autoinit" data-target="nav-account-dropdown-content" id="nav-account-dropdown-trigger" style="height: 100%;">
-            <img src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt="" class="left circle py-3" style="height: 100%;">
-            <span class="ml-1">{{ current_user.username }} ({{ current_user.email }})</span>
-          </a>
-        </li>
-        {% else %}
-        <!-- log in -->
-        <li {% if request.path == url_for('auth.login') %}class="active"{% endif %}>
-          <a href="{{ url_for('auth.login') }}"><i class="material-icons left">login</i>Log in</a>
-        </li>
-        <!-- register -->
-        <li {% if request.path == url_for('auth.register') %}class="active"{% endif %}>
-          <a href="{{ url_for('auth.register') }}"><i class="material-icons left">assignment</i>Register</a>
-        </li>
-        {% endif %}
-      </ul>
-    </div>
-  </nav>
-</div>
diff --git a/app/templates/_base/navbar_primary_content.html.j2 b/app/templates/_base/navbar_primary_content.html.j2
new file mode 100644
index 00000000..0df9b5dc
--- /dev/null
+++ b/app/templates/_base/navbar_primary_content.html.j2
@@ -0,0 +1,38 @@
+{% if current_user.is_authenticated %}
+<!-- menu icon -->
+<!-- small/medium devices -->
+<a href="#!" class="sidenav-trigger" data-target="sidenav"><i class="material-icons">menu</i></a>
+{% endif %}
+
+<!-- nopaque logo+wordmark -->
+<!-- small/medium devices -->
+<a href="{{ url_for('main.index') }}" class="brand-logo center hide-on-large-only" style="height: 100%;">
+  <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="py-3" style="height: 100%;">
+</a>
+<!-- large devices -->
+<a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down ml-2" style="height: 100%;">
+  <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="py-3" style="height: 100%;">
+</a>
+
+<!-- right aligned navigation links -->
+<!-- large devices -->
+<ul class="right hide-on-med-and-down" style="height: 64px;">
+  {% if current_user.is_authenticated %}
+  <!-- avatar, username and email -->
+  <li style="height: 100%;">
+    <a href="#!" class="dropdown-trigger no-autoinit" data-target="nav-account-dropdown-content" id="nav-account-dropdown-trigger" style="height: 100%;">
+      <img src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt="" class="left circle py-3" style="height: 100%;">
+      <span class="ml-2">{{ current_user.username }} ({{ current_user.email }})</span>
+    </a>
+  </li>
+  {% else %}
+  <!-- log in -->
+  <li {% if request.path == url_for('auth.login') %}class="active"{% endif %}>
+    <a href="{{ url_for('auth.login') }}"><i class="material-icons left">login</i>Log in</a>
+  </li>
+  <!-- register -->
+  <li {% if request.path == url_for('auth.register') %}class="active"{% endif %}>
+    <a href="{{ url_for('auth.register') }}"><i class="material-icons left">assignment</i>Register</a>
+  </li>
+  {% endif %}
+</ul>
diff --git a/app/templates/_base/stylesheets.html.j2 b/app/templates/_base/stylesheets.html.j2
index d8adca98..1e0b3659 100644
--- a/app/templates/_base/stylesheets.html.j2
+++ b/app/templates/_base/stylesheets.html.j2
@@ -1,10 +1,10 @@
 <link href="{{ url_for('static', filename='external/material-design-icons/css/material-icons.css') }}" rel="stylesheet">
 <link href="{{ url_for('static', filename='external/materialize/css/materialize.min.css') }}" rel="stylesheet">
 {% if current_user.is_authenticated -%}
-<link href="{{ url_for('static', filename='materialize/css/sidenav-fixed.css') }}" rel="stylesheet">
+<link href="{{ url_for('static', filename='css/materialize/sidenav-fixed.css') }}" rel="stylesheet">
 {% endif -%}
-<link href="{{ url_for('static', filename='materialize/css/sticky-footer.css') }}" rel="stylesheet">
-<link href="{{ url_for('static', filename='materialize/css/fixes.css') }}" rel="stylesheet">
+<link href="{{ url_for('static', filename='css/materialize/sticky-footer.css') }}" rel="stylesheet">
+<link href="{{ url_for('static', filename='css/materialize/fixes.css') }}" rel="stylesheet">
 <link href="{{ url_for('static', filename='nopaque-icons/css/nopaque-icons.css') }}" rel="stylesheet">
 <link href="{{ url_for('static', filename='css/queryBuilder.css') }}" rel="stylesheet">
 {% assets
diff --git a/app/templates/base.html.j2 b/app/templates/base.html.j2
index 6890f9af..6b20a0a6 100644
--- a/app/templates/base.html.j2
+++ b/app/templates/base.html.j2
@@ -2,6 +2,14 @@
 {% set title = 'nopaque' %}
 {% endif %}
 
+{% if navbar_fixed is not defined %}
+{% set navbar_fixed = true %}
+{% endif %}
+
+{% if navbar_extended is not defined %}
+{% set navbar_extended = false %}
+{% endif %}
+
 {% block doc %}
 <!DOCTYPE html>
 <html {% block html_attribs %}lang="en"{% endblock html_attribs %}>
@@ -27,9 +35,27 @@
     {% block body %}
     <header {% block header_attribs %}{% endblock header_attribs %}>
       {% block header %}
-      {% block navbar %}
-      {% include "_base/navbar.html.j2" %}
-      {% endblock navbar %}
+      {% if navbar_fixed %}
+      <div class="navbar-fixed">
+      {% endif %}
+        <nav {% block navbar_attribs %}{% if navbar_extended %}class="nav-extended"{% endif %}{% endblock navbar_attribs %}>
+        {% block navbar %}
+          <div {% block navbar_primary_content_attribs %}class="nav-wrapper primary-color"{% endblock navbar_primary_content_attribs %}>
+            {% block navbar_primary_content %}
+            {% include "_base/navbar_primary_content.html.j2" %}
+            {% endblock navbar_primary_content %}
+          </div>
+          {% if navbar_extended %}
+          <div {% block navbar_secondary_content_attribs %}class="nav-content primary-variant-color"{% endblock navbar_secondary_content_attribs %}>
+            {% block navbar_secondary_content %}
+            {% endblock navbar_secondary_content %}
+          </div>
+          {% endif %}
+        {% endblock navbar %}
+        </nav>
+      {% if navbar_fixed %}
+      </div>
+      {% endif %}
       {% block sidenav %}
       {% if current_user.is_authenticated %}
       {% include "_base/sidenav.html.j2" %}
@@ -41,6 +67,7 @@
     <main {% block main_attribs %}class="background-color"{% endblock main_attribs %}>
       {% block main %}
       {% block page_content %}{% endblock page_content %}
+      {% endblock main %}
 
       <div id="dropdowns">
         {% block dropdowns %}
@@ -53,7 +80,6 @@
         {% include "_base/modals.html.j2" %}
         {% endblock modals %}
       </div>
-      {% endblock main %}
     </main>
 
     <footer {% block footer_attribs %}class="page-footer primary-variant-color"{% endblock footer_attribs %}>
@@ -62,9 +88,11 @@
       {% endblock footer %}
     </footer>
 
-    {% block scripts %}
-    {% include "_base/scripts.html.j2" %}
-    {% endblock scripts %}
+    <div id="scripts">
+      {% block scripts %}
+      {% include "_base/scripts.html.j2" %}
+      {% endblock scripts %}
+    </div>
     {% endblock body %}
   </body>
   {% endblock html %}