From 59eebbeb92f846b5982a59d223d8a5ac66170c12 Mon Sep 17 00:00:00 2001
From: Kevin Veen-Birkenbach <kevin@veen.world>
Date: Wed, 8 Jan 2025 17:09:45 +0100
Subject: [PATCH] Implemented draft for contacts

---
 app/app.py                                    |   2 +-
 app/config.json                               | 315 +++++++++++++++++-
 app/static/css/default.css                    | 124 +++----
 app/templates/base.html                       |   2 +
 app/templates/index.html.backup               |  13 +-
 app/templates/navigation.html.j2              | 106 ++++++
 app/templates/pages/{agb.html.j2 => agb.html} |   0
 7 files changed, 502 insertions(+), 60 deletions(-)
 create mode 100644 app/templates/navigation.html.j2
 rename app/templates/pages/{agb.html.j2 => agb.html} (100%)

diff --git a/app/app.py b/app/app.py
index 9798fda..cda8a91 100644
--- a/app/app.py
+++ b/app/app.py
@@ -56,7 +56,7 @@ def reload_config_in_dev():
 
 @app.route('/')
 def index():
-    return render_template("pages/index.html.j2", cards=config_data.get("cards", []), networks=config_data.get("networks", []), company=config_data["company"])
+    return render_template("pages/index.html.j2", cards=config_data.get("cards", []), networks=config_data.get("networks", []), company=config_data["company"], navigation=config_data["navigation"])
 
 @app.route('/imprint')
 def imprint():
diff --git a/app/config.json b/app/config.json
index 0761ba6..127071b 100644
--- a/app/config.json
+++ b/app/config.json
@@ -108,5 +108,318 @@
             "city": "Berlin",
             "country": "Germany"
         }
-    }
+    },
+    "navigation": [
+        {
+        "name": "Networks",
+        "description": "Social and developer networks",
+        "icon_class": "fa-solid fa-network-wired",
+        "href": null,
+        "subitems": [
+            {
+            "name": "GitHub",
+            "description": "View my GitHub profile",
+            "icon_class": "bi bi-github",
+            "href": "https://github.com/kevinveenbirkenbach",
+            "subitems": []
+            },
+            {
+            "name": "Instagram",
+            "description": "Follow me on Instagram",
+            "icon_class": "fa-brands fa-instagram",
+            "href": "https://www.instagram.com/kevinveenbirkenbach/",
+            "subitems": []
+            },
+            {
+            "name": "XING",
+            "description": "Visit my XING profile",
+            "icon_class": "bi bi-building",
+            "href": "https://www.xing.com/profile/Kevin_VeenBirkenbach",
+            "subitems": []
+            },
+            {
+            "name": "LinkedIn",
+            "description": "Connect on LinkedIn",
+            "icon_class": "bi bi-linkedin",
+            "href": "https://www.linkedin.com/in/kevinveenbirkenbach",
+            "subitems": []
+            },
+            {
+            "name": "Facebook",
+            "description": "Like my Facebook page",
+            "icon_class": "fa-brands fa-facebook",
+            "href": "https://www.facebook.com/kevinveenbirkenbach",
+            "subitems": []
+            },
+            {
+            "name": "Duolingo",
+            "description": "Learn with me on Duolingo",
+            "icon_class": "fa-solid fa-language",
+            "href": "https://www.duolingo.com/profile/kevinbirkenbach",
+            "subitems": []
+            },
+            {
+            "name": "Spotify",
+            "description": "Listen to my playlists",
+            "icon_class": "fa-brands fa-spotify",
+            "href": "https://open.spotify.com/user/31vebfzbjf3p7oualis76qfpr5ty",
+            "subitems": []
+            }
+        ]
+        },
+        {
+        "name": "Fediverse",
+        "description": "My presence in the Fediverse",
+        "icon_class": "fa-brands fa-mastodon",
+        "href": null,
+        "subitems": [
+            {
+            "name": "Microblog",
+            "description": "Read my microblogs",
+            "icon_class": "fa-brands fa-mastodon",
+            "href": "https://microblog.veen.world/@kevinveenbirkenbach",
+            "subitems": []
+            },
+            {
+            "name": "Pictures",
+            "description": "View my photo gallery",
+            "icon_class": "fa-solid fa-camera",
+            "href": "https://picture.veen.world/kevinveenbirkenbach",
+            "subitems": []
+            },
+            {
+            "name": "Videos",
+            "description": "Watch my videos",
+            "icon_class": "fa-solid fa-video",
+            "href": "https://video.veen.world/a/kevinveenbirkenbach",
+            "subitems": []
+            },
+            {
+            "name": "Blog",
+            "description": "Read my blog",
+            "icon_class": "fa-solid fa-blog",
+            "href": "https://blog.veen.world",
+            "subitems": []
+            },
+            {
+            "name": "Code",
+            "description": "Explore my code repositories",
+            "icon_class": "fa-solid fa-code",
+            "href": "https://git.veen.world/kevinveenbirkenbach",
+            "subitems": []
+            },
+            {
+            "name": "Forum",
+            "description": "Join the discussion",
+            "icon_class": "fa-brands fa-discourse",
+            "href": "https://forum.veen.world/u/kevinveenbirkenbach",
+            "subitems": []
+            }
+        ]
+        },
+        {
+        "name": "Engagement",
+        "description": "Opportunities to interact",
+        "icon_class": "fa-solid fa-handshake",
+        "href": null,
+        "subitems": [
+            {
+            "name": "Newsletter",
+            "description": "Subscribe to my newsletter",
+            "icon_class": "fa-solid fa-envelope-open-text",
+            "href": "https://newsletter.veen.world/subscription/form",
+            "subitems": []
+            },
+            {
+            "name": "Summits",
+            "description": "Join live events",
+            "icon_class": "fa-solid fa-video",
+            "href": "https://meet.veen.world/",
+            "subitems": []
+            },
+            {
+            "name": "Mail",
+            "description": "Send me a mail",
+            "icon_class": "fa-solid fa-envelope",
+            "href": "https://mail.veen.world/",
+            "subitems": []
+            },
+            {
+            "name": "Academy",
+            "description": "Learn with my academy",
+            "icon_class": "fa-solid fa-graduation-cap",
+            "href": "https://academy.veen.world/",
+            "subitems": []
+            },
+            {
+            "name": "Chat",
+            "description": "Chat with me",
+            "icon_class": "fa-solid fa-comment",
+            "href": "https://element.veen.world/",
+            "subitems": []
+            },
+            {
+            "name": "Links",
+            "description": "Find my curated links",
+            "icon_class": "bi bi-link",
+            "href": "https://s.veen.world/admin/",
+            "subitems": []
+            },
+            {
+            "name": "Patreon",
+            "description": "Support me on Patreon",
+            "icon_class": "fa-brands fa-patreon",
+            "href": "https://patreon.com/kevinveenbirkenbach",
+            "subitems": []
+            }
+        ]
+        },
+        {
+        "name": "Workflow",
+        "description": "My tools and projects",
+        "icon_class": "fa-solid fa-briefcase",
+        "href": null,
+        "subitems": [
+            {
+            "name": "Projects",
+            "description": "Explore my projects",
+            "icon_class": "fa-solid fa-chart-line",
+            "href": "https://project.veen.world/",
+            "subitems": []
+            },
+            {
+            "name": "Kanban",
+            "description": "View my Kanban board",
+            "icon_class": "bi bi-clipboard2-check-fill",
+            "href": "https://kanban.veen.world/",
+            "subitems": []
+            },
+            {
+            "name": "Matomo",
+            "description": "Analyze with Matomo",
+            "icon_class": "fa-solid fa-chart-simple",
+            "href": "https://matomo.veen.world/",
+            "subitems": []
+            },
+            {
+            "name": "Baserow",
+            "description": "Organize with Baserow",
+            "icon_class": "fa-solid fa-table",
+            "href": "https://baserow.veen.world/",
+            "subitems": []
+            },
+            {
+            "name": "Cloud",
+            "description": "Access my cloud storage",
+            "icon_class": "fa-solid fa-cloud",
+            "href": "https://cloud.veen.world/u/kevinveenbirkenbach",
+            "subitems": []
+            }
+        ]
+        },
+        {
+        "name": "Logbooks",
+        "description": "My activity logs",
+        "icon_class": "fa-solid fa-book",
+        "href": null,
+        "subitems": [
+            {
+            "name": "Skydiver",
+            "description": "View my skydiving logs",
+            "icon_class": "fa-solid fa-parachute-box",
+            "href": "https://s.veen.world/skydiverlog",
+            "subitems": []
+            },
+            {
+            "name": "Skipper",
+            "description": "See my sailing records",
+            "icon_class": "fa-solid fa-sailboat",
+            "href": "https://s.veen.world/meilenbuch",
+            "subitems": []
+            },
+            {
+            "name": "Diver",
+            "description": "Check my diving logs",
+            "icon_class": "fa-solid fa-fish",
+            "href": "https://s.veen.world/diverlog",
+            "subitems": []
+            },
+            {
+            "name": "Pilot",
+            "description": "Review my flight logs",
+            "icon_class": "fa-solid fa-plane",
+            "href": "https://s.veen.world/pilotlog",
+            "subitems": []
+            },
+            {
+            "name": "Nature",
+            "description": "Explore my nature logs",
+            "icon_class": "fa-solid fa-tree",
+            "href": "https://s.veen.world/naturejournal",
+            "subitems": []
+            }
+        ]
+        },
+        {
+        "name": "Contact",
+        "description": "Get in touch",
+        "icon_class": "fa-solid fa-envelope",
+        "href": null,
+        "subitems": [
+            {
+            "name": "Email",
+            "description": "Send me an email",
+            "icon_class": "fa-solid fa-envelope",
+            "href": "kevin@veen.world",
+            "href_praefix": "mailto",
+            "subitems": []
+            },
+            {
+            "name": "Matrix",
+            "description": "Chat with me on Matrix",
+            "icon_class": "fa-solid fa-cubes",
+            "popup": true,
+            "address": "@kevinveenbirkenbach:veen.world"
+            },
+            {
+            "name": "Mobile",
+            "description": "Call me",
+            "icon_class": "fa-solid fa-phone",
+            "href": "+491781798023",
+            "href_praefix": "tel",
+            "subitems": []
+            },
+            {
+            "name": "PGP",
+            "description": "Access my PGP key",
+            "icon_class": "fa-solid fa-key",
+            "href": "https://s.veen.world/pgp",
+            "subitems": []
+            },
+            {
+            "name": "Signal",
+            "description": "Message me on Signal",
+            "icon_class": "fa-brands fa-signal-messenger",
+            "popup": true,
+            "href": "+491781798023",
+            "subitems": []
+            },
+            {
+            "name": "Telegram",
+            "description": "Message me on Telegram",
+            "icon_class": "fa-brands fa-telegram",
+            "target":"_blank",
+            "href": "https://t.me/kevinveenbirkenbach",
+            "subitems": []
+            },
+            {
+            "name": "WhatsApp",
+            "description": "Chat with me on WhatsApp",
+            "icon_class": "fa-brands fa-whatsapp",
+            "href": "https://wa.me/491781798023",
+            "subitems": []
+            }
+        ]
+        }
+    ]    
   }
\ No newline at end of file
diff --git a/app/static/css/default.css b/app/static/css/default.css
index 8d8c800..f67da11 100644
--- a/app/static/css/default.css
+++ b/app/static/css/default.css
@@ -1,67 +1,77 @@
 a {
-    text-decoration: none;
-    color: #000000;
-  }
-  .header img {
-    float: right;
-    width: 100px;
-    height: 100px;
-  }
+  text-decoration: none;
+  color: #000000;
+}
+.header img {
+  float: right;
+  width: 100px;
+  height: 100px;
+}
 
-  .header h1 {
-    position: relative;
-  }
-  .equal-height {
-    display: flex;
-    flex: 1;
-  }
-  .card-body {
-    display: flex;
-    flex-direction: column;
-    align-items: center; /* Zentriert die Inhalte horizontal */
-    text-align: center; /* Zentriert den Text */
-  }
+.header h1 {
+  position: relative;
+}
+.equal-height {
+  display: flex;
+  flex: 1;
+}
+.card-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Zentriert die Inhalte horizontal */
+  text-align: center; /* Zentriert den Text */
+}
 
-  .card-icon {
-    display: flex;
-    justify-content: center; /* Zentriert das Icon horizontal */
-  }
-  
-  .card-text,
-  .card ul {
-    text-align: left; /* Stellt sicher, dass der Text linksbündig ist */
-  }
+.card-icon {
+  display: flex;
+  justify-content: center; /* Zentriert das Icon horizontal */
+}
 
-  .card{
-    flex: 1; /* Stellt sicher, dass die Karten die ganze Höhe ihrer Container ausfüllen */
-    border-width: 3px;
-    /*border-color: #000000;*/
-  }
+.card-text,
+.card ul {
+  text-align: left; /* Stellt sicher, dass der Text linksbündig ist */
+}
 
-  h3.card-title{
-    font-size: 1.3em;
-  }
+.card{
+  flex: 1; /* Stellt sicher, dass die Karten die ganze Höhe ihrer Container ausfüllen */
+  border-width: 3px;
+  /*border-color: #000000;*/
+}
 
-  .card .stretched-link{
-    font-size: 0.7em;
-  }
+h3.card-title{
+  font-size: 1.3em;
+}
 
-  .card-column{
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
+.card .stretched-link{
+  font-size: 0.7em;
+}
 
-  h3.footer-title{
-    font-size: 1.3em;
-  }
+.card-column{
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
 
-  .footer {
-    margin-top: 12px;
-    text-align: center;
-    font-size:  0.7em;
-  }
+h3.footer-title{
+  font-size: 1.3em;
+}
 
-  .footer p, h3{
-    margin: 0px;
-    padding: 0px;
-  }
\ No newline at end of file
+.footer {
+  margin-top: 12px;
+  text-align: center;
+  font-size:  0.7em;
+}
+
+.footer p, h3{
+  margin: 0px;
+  padding: 0px;
+}
+
+.dropdown-submenu {
+  position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+    top: 0;
+    left: 100%;
+    margin-top: -0.5rem;
+}
\ No newline at end of file
diff --git a/app/templates/base.html b/app/templates/base.html
index 47a404a..389994b 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -20,7 +20,9 @@
               <img src="{{company.logo}}" alt="logo"/>
               <h1>{{company.titel}}</h1>
               <h2>{{company.subtitel}}</h2>
+              {% include "navigation.html.j2" %}
             </header>
+            
 
             {% block content %}{% endblock %}
 
diff --git a/app/templates/index.html.backup b/app/templates/index.html.backup
index 7fb0676..9918752 100644
--- a/app/templates/index.html.backup
+++ b/app/templates/index.html.backup
@@ -1,5 +1,16 @@
 <html>
-
+  <head>
+    <title>Kevin Veen-Birkenbach - Consulting and Coaching Solutions</title>
+    <meta charset="utf-8" >
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <!-- Bootstrap CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+    <!-- Bootstrap JavaScript Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
+    <!-- Fontawesome -->
+    <script src="https://kit.fontawesome.com/56f96da298.js" crossorigin="anonymous"></script>
   </head>
   <body>
     <div class="container">
diff --git a/app/templates/navigation.html.j2 b/app/templates/navigation.html.j2
new file mode 100644
index 0000000..7d296f3
--- /dev/null
+++ b/app/templates/navigation.html.j2
@@ -0,0 +1,106 @@
+    <!-- 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">
+    <div class="container-fluid">
+    <!--
+        <a class="navbar-brand" href="#">Navbar</a>
+    -->    
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav ms-auto">
+                {% for item in navigation %}
+                    {% if item.href %}
+                        <!-- Single Item -->
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ item.href }}">
+                                <i class="{{ item.icon_class }}"></i> {{ item.name }}
+                            </a>
+                        </li>
+                    {% else %}
+                        <!-- Dropdown Menu -->
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown{{ loop.index }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                <i class="{{ item.icon_class }}"></i> {{ item.name }}
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown{{ loop.index }}">
+                                {{ render_subitems(item.subitems) }}
+                            </ul>
+                        </li>
+                    {% endif %}
+                {% endfor %}
+            </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>
diff --git a/app/templates/pages/agb.html.j2 b/app/templates/pages/agb.html
similarity index 100%
rename from app/templates/pages/agb.html.j2
rename to app/templates/pages/agb.html