From cc04bbf0f5233b547b56b712c274377a45306bf0 Mon Sep 17 00:00:00 2001
From: Kevin Veen-Birkenbach <kevin@veen.world>
Date: Wed, 8 Jan 2025 18:06:08 +0100
Subject: [PATCH] Implemented header and footer menu

---
 app/static/css/default.css        |   6 ++
 app/static/js/dynamic-modal.js    |  18 ++++++
 app/templates/base.html           |  23 ++++---
 app/templates/modal.html.j2       |  20 ++++++
 app/templates/navigation.html.j2  | 101 +++++++++---------------------
 app/templates/pages/index.html.j2 |  14 -----
 6 files changed, 87 insertions(+), 95 deletions(-)
 create mode 100644 app/static/js/dynamic-modal.js
 create mode 100644 app/templates/modal.html.j2

diff --git a/app/static/css/default.css b/app/static/css/default.css
index f67da11..6930d98 100644
--- a/app/static/css/default.css
+++ b/app/static/css/default.css
@@ -68,10 +68,16 @@ h3.footer-title{
 
 .dropdown-submenu {
   position: relative;
+  list-style: none;
 }
 
 .dropdown-submenu > .dropdown-menu {
     top: 0;
     left: 100%;
     margin-top: -0.5rem;
+}
+
+.navbar-nav {
+  padding: 0;
+  margin: 0;
 }
\ No newline at end of file
diff --git a/app/static/js/dynamic-modal.js b/app/static/js/dynamic-modal.js
new file mode 100644
index 0000000..0294f71
--- /dev/null
+++ b/app/static/js/dynamic-modal.js
@@ -0,0 +1,18 @@
+function openDynamicPopup(subitem) {
+    // Set modal title and content
+    document.getElementById('dynamicModalLabel').innerText = subitem.description;
+    const modalContent = document.getElementById('dynamicModalContent');
+    modalContent.value = subitem.address;
+
+    // Add copy functionality
+    document.getElementById('dynamicCopyButton').addEventListener('click', function () {
+      modalContent.select();
+      navigator.clipboard.writeText(modalContent.value)
+        .then(() => alert('Content copied to clipboard!'))
+        .catch(() => alert('Failed to copy content.'));
+    });
+
+    // Show the modal
+    const modal = new bootstrap.Modal(document.getElementById('dynamicModal'));
+    modal.show();
+  }
\ No newline at end of file
diff --git a/app/templates/base.html b/app/templates/base.html
index 389994b..cb94675 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -20,18 +20,23 @@
               <img src="{{company.logo}}" alt="logo"/>
               <h1>{{company.titel}}</h1>
               <h2>{{company.subtitel}}</h2>
-              {% include "navigation.html.j2" %}
             </header>
-            
-
+            {% set menu = "top" %}
+            {% include "navigation.html.j2"%}
             {% block content %}{% endblock %}
-
-            <footer class="footer" itemscope itemtype="http://schema.org/LocalBusiness" class="small">
-                <p itemprop="name">{{ company.titel }} <br />
-                {{ company.subtitel }}</p>
-                <span><i class="fa-solid fa-location-dot"></i> {{ company.address.values() | join(", ") }}</span>
-                <p><a href="/imprint"><i class="fa-solid fa-scale-balanced"></i> Imprint</a></p>
+            {% set menu = "bottom" %}
+            {% include "navigation.html.j2" %}
+            <footer class="footer">
+                <div itemscope itemtype="http://schema.org/LocalBusiness" class="small">
+                    <p itemprop="name">{{ company.titel }} <br />
+                    {{ company.subtitel }}</p>
+                    <span><i class="fa-solid fa-location-dot"></i> {{ company.address.values() | join(", ") }}</span>
+                    <p><a href="/imprint"><i class="fa-solid fa-scale-balanced"></i> Imprint</a></p>
+                </div>
             </footer>
         </div>
+        <!-- Include modal -->
+        {% include "modal.html.j2" %}
+        <script src="{{ url_for('static', filename='js/dynamic-modal.js') }}"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/app/templates/modal.html.j2 b/app/templates/modal.html.j2
new file mode 100644
index 0000000..4314f7f
--- /dev/null
+++ b/app/templates/modal.html.j2
@@ -0,0 +1,20 @@
+<!-- Universal Modal Structure -->
+<div class="modal fade" id="dynamicModal" tabindex="-1" aria-labelledby="dynamicModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="dynamicModalLabel"></h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="input-group">
+          <input type="text" id="dynamicModalContent" class="form-control" readonly>
+          <button class="btn btn-outline-secondary" type="button" id="dynamicCopyButton">Copy</button>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/templates/navigation.html.j2 b/app/templates/navigation.html.j2
index 7d296f3..216b29f 100644
--- a/app/templates/navigation.html.j2
+++ b/app/templates/navigation.html.j2
@@ -1,30 +1,30 @@
-    <!-- Template for Subitems -->
-    {% macro render_subitems(subitems) %}
-        {% for subitem in subitems %}
-            {% if subitems.subitems %}
-                <li class="dropdown-submenu">
-                    <a class="dropdown-item dropdown-toggle" href="#">
-                        <i class="{{ subitem.icon_class }}"></i> {{ subitem.name }}
-                    </a>
-                    <ul class="dropdown-menu">
-                        {{ render_subitems(subitem.subitems) }}
-                    </ul>
-                </li>
-            {% elif subitem.popup %}
-                <li>
-                    <a class="dropdown-item" onclick='openDynamicPopup({{subitem|tojson|safe}})''>
-                        <i class="{{ subitem.icon_class }}"></i> {{ subitem.name }}
-                    </a>
-                </li>
-            {% else %}
-                <li>
-                    <a class="dropdown-item" href="{{ subitem.href }}" {% if subitem.target %} target="{{subitem.target}}" {% endif %}>
-                        <i class="{{ subitem.icon_class }}"></i> {{ subitem.name }}
-                    </a>
-                </li>
-            {% endif %}
-        {% endfor %}
-    {% endmacro %}
+<!-- Template for Subitems -->
+{% macro render_subitems(subitems) %}
+    {% for subitem in subitems %}
+        {% if subitems.subitems %}
+            <li class="dropdown-submenu">
+                <a class="dropdown-item dropdown-toggle" href="#">
+                    <i class="{{ subitem.icon_class }}"></i> {{ subitem.name }}
+                </a>
+                <ul class="dropdown-menu">
+                    {{ render_subitems(subitem.subitems) }}
+                </ul>
+            </li>
+        {% elif subitem.popup %}
+            <li>
+                <a class="dropdown-item" onclick='openDynamicPopup({{subitem|tojson|safe}})''>
+                    <i class="{{ subitem.icon_class }}"></i> {{ subitem.name }}
+                </a>
+            </li>
+        {% else %}
+            <li>
+                <a class="dropdown-item" href="{{ subitem.href }}" {% if subitem.target %} target="{{subitem.target}}" {% endif %}>
+                    <i class="{{ subitem.icon_class }}"></i> {{ subitem.name }}
+                </a>
+            </li>
+        {% endif %}
+    {% endfor %}
+{% endmacro %}
 
  <!-- Navigation Bar -->
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
@@ -36,7 +36,7 @@
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav ms-auto">
+            <ul class="navbar-nav {% if menu == 'top' %}ms-auto{% endif %}">
                 {% for item in navigation %}
                     {% if item.href %}
                         <!-- Single Item -->
@@ -60,47 +60,4 @@
             </ul>
         </div>
     </div>
-</nav>
-
-    <!-- Universal Modal Structure -->
-<div class="modal fade" id="dynamicModal" tabindex="-1" aria-labelledby="dynamicModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="dynamicModalLabel"></h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <div class="input-group">
-          <input type="text" id="dynamicModalContent" class="form-control" readonly>
-          <button class="btn btn-outline-secondary" type="button" id="dynamicCopyButton">Copy</button>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Script for Dynamic Modal -->
-<script>
-  function openDynamicPopup(subitem) {
-    // Set modal title and content
-    document.getElementById('dynamicModalLabel').innerText = subitem.description;
-    const modalContent = document.getElementById('dynamicModalContent');
-    modalContent.value = subitem.address;
-
-    // Add copy functionality
-    document.getElementById('dynamicCopyButton').addEventListener('click', function () {
-      modalContent.select();
-      navigator.clipboard.writeText(modalContent.value)
-        .then(() => alert('Content copied to clipboard!'))
-        .catch(() => alert('Failed to copy content.'));
-    });
-
-    // Show the modal
-    const modal = new bootstrap.Modal(document.getElementById('dynamicModal'));
-    modal.show();
-  }
-</script>
+</nav>
\ No newline at end of file
diff --git a/app/templates/pages/index.html.j2 b/app/templates/pages/index.html.j2
index 7872efd..f3b67d3 100644
--- a/app/templates/pages/index.html.j2
+++ b/app/templates/pages/index.html.j2
@@ -6,18 +6,4 @@
         {% include "card.html.j2" %}
     {% endfor %}
 </div>
-<div class="row">
-    <div class="col">
-        <h3>Networks</h3>
-        <ul>
-            {% for network in networks %}
-                <li>
-                    <a href="{{ network.link }}">
-                        <i class="{{ network.icon }}"></i> {{ network.name }}
-                    </a>
-                </li>
-            {% endfor %}
-        </ul>
-    </div>
-</div>
 {% endblock %}