Refactored navigation code

app/config.yaml

@@ -17,16 +17,27 @@ accounts:
       url: https://microblog.veen.world/@kevinveenbirkenbach
       
     - name: Pictures
-      description: View my photo gallery
       icon:
-          class: fa-solid fa-camera
+        class: fa-solid fa-images
-      url: https://picture.veen.world/kevinveenbirkenbach
+      subitems:
+      - name: Pixelfed  
+        description: View my photo gallery
+        icon:
+            class: fa-solid fa-camera
+        url: https://s.veen.world/pictures
+      - name: Instagram
+        description: Follow me on Instagram
+        icon:
+          class: fa-brands fa-instagram
+        url: https://www.instagram.com/kevinveenbirkenbach/
+        identifier: kevinveenbirkenbach
+        warning: Using software and platforms from the Meta corporation (e.g., Facebook, Instagram, WhatsApp) may compromise your data privacy and digital freedom due to centralized control, extensive data collection practices, and inconsistent moderation policies. These platforms often fail to adequately address harmful content, misinformation, and abuse.
       
     - name: Videos
       description: Watch my videos
       icon:
           class: fa-solid fa-video
-      url: https://video.veen.world/a/kevinveenbirkenbach
+      url: https://s.veen.world/videos
       
     - name: Blog
       description: Read my blog
@@ -56,13 +67,6 @@ accounts:
       class: fa-brands fa-meta
     url: 
     subitems:
-    - name: Instagram
-      description: Follow me on Instagram
-      icon:
-        class: fa-brands fa-instagram
-      url: https://www.instagram.com/kevinveenbirkenbach/
-      identifier: kevinveenbirkenbach
-      warning: Using software and platforms from the Meta corporation (e.g., Facebook, Instagram, WhatsApp) may compromise your data privacy and digital freedom due to centralized control, extensive data collection practices, and inconsistent moderation policies. These platforms often fail to adequately address harmful content, misinformation, and abuse.
     - name: Facebook
       description: Like my Facebook page
       icon:

app/static/css/default.css

@@ -1,3 +1,5 @@
+@import url("navigation.css");
+
 /* General link styles */
 a {
   text-decoration: none;
@@ -77,40 +79,4 @@ h3.card-title {
 
 h3.footer-title {
   font-size: 1.3em;
-}
+}
-/* Dropdown-Menüs verstecken */
-.dropdown-menu {
-  display: none;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.3s ease, visibility 0.3s ease;
-}
-
-/* Dropdown-Menü beim Hover anzeigen */
-.nav-item.dropdown:hover > .dropdown-menu,
-.dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-  opacity: 1;
-  visibility: visible;
-}
-
-/* Dropdown-Menü bei der Klasse "open" anzeigen */
-.nav-item.dropdown.open > .dropdown-menu,
-.dropdown-submenu.open > .dropdown-menu {
-  display: block;
-  opacity: 1;
-  visibility: visible;
-}
-
-/* Positionierung von Submenüs */
-.dropdown-submenu > .dropdown-menu {
-  position: absolute;
-  top: 0;
-  left: 100%; /* Rechts ausklappen */
-}
-
-.dropdown-submenu.open > .dropdown-menu {
-  display: block;
-  opacity: 1;
-  visibility: visible;
-}

app/static/css/navigation.css

@@ -0,0 +1,36 @@
+/* Dropdown-Menüs verstecken */
+.dropdown-menu {
+    display: none;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+  }
+  
+  /* Dropdown-Menü beim Hover anzeigen */
+  .nav-item.dropdown:hover > .dropdown-menu,
+  .dropdown-submenu:hover > .dropdown-menu {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  /* Dropdown-Menü bei der Klasse "open" anzeigen */
+  .nav-item.dropdown.open > .dropdown-menu,
+  .dropdown-submenu.open > .dropdown-menu {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  /* Positionierung von Submenüs */
+  .dropdown-submenu > .dropdown-menu {
+    position: absolute;
+    top: 0;
+    left: 100%; /* Rechts ausklappen */
+  }
+  
+  .dropdown-submenu.open > .dropdown-menu {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+  }  

app/templates/moduls/base.html.j2

@@ -41,7 +41,7 @@
         <!-- Include modal -->
         {% include "moduls/modal.html.j2" %}
         <script src="{{ url_for('static', filename='js/modal.js') }}"></script>
-        <script src="{{ url_for('static', filename='js/submenus.js') }}"></script>
+        <script src="{{ url_for('static', filename='js/navigation.js') }}"></script>
         <script src="{{ url_for('static', filename='js/tooltip.js') }}"></script>
     </body>
 </html>