app/config.yaml

@@ -1,171 +1,136 @@
 ---
 accounts:
-  name: Online Accounts
+  name: Accounts
-  description: Discover my online presence.
+  description: My Online Accounts
   icon:
       class: fa-solid fa-users
-  children:
+  subitems:
-  - name: Channels
+  - name: Publications
-    description: Platforms where I share content.
+    description: My Publications
     icon:
-      class: fas fa-newspaper
+        class: fas fa-newspaper
-    children:
+    subitems:
-    - name: Microblogs
+    - name: Microblog
-      description: Stay updated with my microblog posts.
+      description: Read my microblogs
       icon:
-        class: fa-solid fa-pen-nib
-      children:
-      - name: Mastodon
-        description: Follow my updates on Mastodon.
-        icon:
           class: fa-brands fa-mastodon
-        url: https://microblog.veen.world/@kevinveenbirkenbach
+      url: https://microblog.veen.world/@kevinveenbirkenbach
-        identifier: "@kevinveenbirkenbach@microblog.veen.world"
+      
-      - name: Twitter
-        description: Follow me on Twitter (limited use).
-        icon:
-          class: fa-brands fa-twitter
-        url: https://s.veen.world/twitter
-        identifier: kevinbirkenbach
-        warning: I rarely use X/Twitter and recommend alternative platforms like Mastodon.
-        alternatives:
-        - link: accounts.channels.microblogs.mastodon
-      - name: Bluesky
-        description: Follow me on Bluesky (coming soon).
-        icon:
-          class: fa-brands fa-bluesky
-        alternatives:
-        - link: accounts.channels.microblogs.mastodon
-
     - name: Pictures
-      description: View my photography.
       icon:
         class: fa-solid fa-images
-      children:
+      subitems:
-      - name: Pixelfed
+      - name: Pixelfed  
-        description: Explore my photo gallery on 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.
+        description: Follow me on Instagram
         icon:
           class: fa-brands fa-instagram
         url: https://www.instagram.com/kevinveenbirkenbach/
         identifier: kevinveenbirkenbach
-        warning: Platforms by Meta (e.g., Instagram, Facebook) may compromise your data privacy. Consider using decentralized alternatives.
+        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.
-        alternatives:
+      
-        - link: accounts.channels.pictures.pixelfed
-
     - name: Videos
-      description: Watch my video content.
+      description: Watch my videos
       icon:
           class: fa-solid fa-video
-      children:
+      url: https://s.veen.world/videos
-      - name: Peertube
+      
-        description: Discover my videos on Peertube.
-        icon:
-          class: fa-solid fa-video
-        url: https://s.veen.world/videos
-      - name: YouTube
-        description: Follow me on YouTube (inactive).
-        icon:
-          class: fa-brands fa-youtube
-        url: https://s.veen.world/youtube
-        warning: I no longer publish videos on YouTube. Please visit my Peertube channel instead.
-        alternatives:
-        - link: accounts.channels.videos.peertube
-
     - name: Blog
-      description: Read my articles and stories.
+      description: Read my blog
       icon:
           class: fa-solid fa-blog
       url: https://blog.veen.world
-
+      
     - name: Code
-      description: Access my coding projects.
       icon:
           class: fa-solid fa-laptop-code
-      children:
+      description: Check out my Code
-      - name: GitHub
+      subitems:
-        description: View my GitHub repositories.
+      - name: Github
+        description: View my GitHub profile
         icon:
           class: bi bi-github
         url: https://github.com/kevinveenbirkenbach
+        
       - name: Gitea
-        description: Explore my self-hosted repositories.
+        description: Explore my code repositories
         icon:
           class: fa-solid fa-code
         url: https://git.veen.world/kevinveenbirkenbach
-
   - name: Social Media
-    description: Social and developer platforms.
+    description: Social and developer networks
     icon:
       class: fa-brands fa-meta
-    children:
+    url: 
+    subitems:
     - name: Facebook
-      description: Visit my Facebook page.
+      description: Like my Facebook page
       icon:
         class: fa-brands fa-facebook
       url: https://www.facebook.com/kevinveenbirkenbach
-
   - link: navigation.header.contact.messenger
-
+  - name: Carreer Profiles
-  - name: Career Profiles
-    description: Professional networking profiles.
     icon:
       class: fa-solid fa-user-tie
-    children:
+    subitems:
     - name: XING
-      description: View my XING profile.
+      description: Visit my XING profile
       icon:
         class: bi bi-building
       url: https://www.xing.com/profile/Kevin_VeenBirkenbach
+      
     - name: LinkedIn
-      description: Connect with me on LinkedIn.
+      description: Connect on LinkedIn
       icon:
         class: bi bi-linkedin
       url: https://www.linkedin.com/in/kevinveenbirkenbach
-
+      
   - name: Sports
-    description: My sports activities and logs.
+    description: My sport activities
     icon:
       class: fa-solid fa-running
-    children:
+    url: 
+    subitems:
     - name: Garmin
-      description: Explore my Garmin activity records.
+      description: My Garmin activities
       icon:
         class: fa-solid fa-person-running
       url: https://s.veen.world/garmin
+      
     - name: Eversports
-      description: View my Eversports sessions.
+      description: My Eversports sessions
       icon:
         class: fa-solid fa-dumbbell
       url: https://s.veen.world/eversports
-
+      
   - name: Duolingo
-    description: Join me in language learning.
+    description: Learn with me on Duolingo
     icon:
       class: fa-solid fa-language
     url: https://www.duolingo.com/profile/kevinbirkenbach
-
+    
   - name: Spotify
-    description: Listen to my playlists.
+    description: Listen to my playlists
     icon:
       class: fa-brands fa-spotify
     url: https://open.spotify.com/user/31vebfzbjf3p7oualis76qfpr5ty
-
+    
   - name: Patreon
-    description: Support my work on Patreon.
+    description: Support me on Patreon
     icon:
       class: fa-brands fa-patreon
     url: https://patreon.com/kevinveenbirkenbach
-
+    
   - name: Discourse
-    description: Join discussions on my forum.
+    description: Follow me on Discourse
     icon:
       class: fa-brands fa-discourse
     url: https://forum.veen.world/u/kevinveenbirkenbach
+    
 
 cards:
 - icon: 
@@ -285,280 +250,263 @@ company:
     country: Germany
   imprint_url: https://s.veen.world/imprint
 navigation:
-  header:
+  header:      
-    children:
+  - name: Contact
-    - link: accounts.channels.children
+    description: Get in touch
-    - name: Contact
+    icon:
-      description: Get in touch
+        class: fa-solid fa-envelope
+    subitems:
+    - name: Email
+      description: Send me an email
       icon:
-          class: fa-solid fa-envelope
+        class: fa-solid fa-envelope
-      children:
+      subitems:
       - name: Email
         description: Send me an email
         icon:
           class: fa-solid fa-envelope
-        children:
+        url: mailto:kevin@veen.world
-        - name: Email
+        identifier: kevin@veen.world
-          description: Send me an email
+        alternatives:
-          icon:
+          - link: navigation.header.contact.messenger.matrix
-            class: fa-solid fa-envelope
+      - name: Encrypted Email (PGP)
-          url: mailto:kevin@veen.world
+        description: Download my PGP key
-          identifier: kevin@veen.world
-          alternatives:
-            - link: navigation.header.contact.messenger.matrix
-        - name: Encrypted Email (PGP)
-          description: Download my PGP key
-          icon:
-            class: fa-solid fa-key
-          url: https://s.veen.world/pgp
-          identifier: kevin@veen.world
-          info: |
-            #### Why Use PGP?
-            PGP ensures your email content stays private, protecting against surveillance, data breaches, and unauthorized access.
-
-            #### Protect Your Privacy
-            In an age of mass data collection, PGP empowers you to communicate securely and assert control over your information. For insights on protecting your digital rights, visit the [Electronic Frontier Foundation (EFF)](https://www.eff.org/).
-
-            #### Build Trust
-            Encrypting emails demonstrates a commitment to privacy and security, fostering trust in professional and personal communication.
-
-            #### Stand for Security
-            Using PGP is more than a tool—it's a statement about valuing freedom, privacy, and the security of digital communication. Explore the principles of secure communication with [privacy guides](https://privacyguides.org/).
-      - name: Mobile
-        description: Call me
         icon:
-          class: fa-solid fa-phone
+          class: fa-solid fa-key
-        url: "tel:+491781798023"
+        url: https://s.veen.world/pgp
-        identifier: "+491781798023"
+        identifier: kevin@veen.world
-        target: _top
+        info: |
-      - name: Messenger
+          #### Why Use PGP?
-        description: Social and developer networks
+          PGP ensures your email content stays private, protecting against surveillance, data breaches, and unauthorized access.
-        icon:
-          class: fa-solid fa-comments
-        children: 
-        - name: Matrix
-          description: Chat with me on Matrix
-          icon:
-            class: fa-solid fa-cubes
-          identifier: "@kevinveenbirkenbach:veen.world"
-          info: |
-            #### Why Use Matrix?
-            Matrix is a secure, decentralized communication platform that ensures privacy and control over your data. Learn more about [Matrix](https://matrix.org/).
 
-            #### Privacy and Security
+          #### Protect Your Privacy
-            End-to-end encryption keeps your conversations private and secure.
+          In an age of mass data collection, PGP empowers you to communicate securely and assert control over your information. For insights on protecting your digital rights, visit the [Electronic Frontier Foundation (EFF)](https://www.eff.org/).
 
-            #### Decentralized and Open
+          #### Build Trust
-            Matrix's federated network means you can host your own server or use any provider while staying connected.
+          Encrypting emails demonstrates a commitment to privacy and security, fostering trust in professional and personal communication.
 
-            #### A Movement for Digital Freedom
+          #### Stand for Security
-            By using Matrix, you support open, transparent, and secure communication.
+          Using PGP is more than a tool—it's a statement about valuing freedom, privacy, and the security of digital communication. Explore the principles of secure communication with [privacy guides](https://privacyguides.org/).
-        - name: Signal
+    - name: Mobile
-          description: Message me on Signal
+      description: Call me
-          icon:
-            class: fa-brands fa-signal-messenger
-          identifier: "+491781798023"
-          warning: Signal is not hosted by me!
-          alternatives:
-            - link: navigation.header.contact.messenger.matrix
-        - name: Telegram
-          description: Message me on Telegram
-          icon:
-            class: fa-brands fa-telegram
-          target: _blank
-          url: https://t.me/kevinveenbirkenbach
-          identifier: kevinveenbirkenbach
-          warning: Telegram is not hosted by me!
-          alternatives:
-            - link: navigation.header.contact.messenger.matrix
-        - name: WhatsApp
-          description: Chat with me on WhatsApp
-          icon:
-            class: fa-brands fa-whatsapp
-          url: https://wa.me/491781798023
-          identifier: "+491781798023"
-          info: Consider using decentralized and privacy-respecting alternatives to maintain control over your data, improve security, and foster healthier online interactions.
-          alternatives:
-            - link: navigation.header.contact.messenger.matrix
-            - link: navigation.header.contact.messenger.signal
-            - link: navigation.header.contact.messenger.telegram
-  footer:
-    children:
-    - link: accounts
-    - name: Solution Hub
-      description: Curated collection of self hosted tools
       icon:
-          class: fa-solid fa-network-wired
+        class: fa-solid fa-phone
-      url: 
+      url: "tel:+491781798023"
-      children:
+      identifier: "+491781798023"
-      - name: Community
+      target: _top
-        description: Tools to manage the community
+    - name: Messenger
+      description: Social and developer networks
+      icon:
+        class: fa-solid fa-comments
+      subitems: 
+      - name: Matrix
+        description: Chat with me on Matrix
         icon:
-            class: fa-solid fa-users
+          class: fa-solid fa-cubes
-        children:
+        identifier: "@kevinveenbirkenbach:veen.world"
-        - name: Forum
+        info: |
-          description: Join the discussion
+          #### Why Use Matrix?
-          icon:
+          Matrix is a secure, decentralized communication platform that ensures privacy and control over your data. Learn more about [Matrix](https://matrix.org/).
-            class: fa-brands fa-discourse
+
-          url: https://forum.veen.world/
+          #### Privacy and Security
-        - name: Learning Platform
+          End-to-end encryption keeps your conversations private and secure.
-          description: Learn with my academy
+
+          #### Decentralized and Open
+          Matrix's federated network means you can host your own server or use any provider while staying connected.
+
+          #### A Movement for Digital Freedom
+          By using Matrix, you support open, transparent, and secure communication.
+      - name: Signal
+        description: Message me on Signal
+        icon:
+          class: fa-brands fa-signal-messenger
+        identifier: "+491781798023"
+        warning: Signal is not hosted by me!
+        alternatives:
+          - link: navigation.header.contact.messenger.matrix
+      - name: Telegram
+        description: Message me on Telegram
+        icon:
+          class: fa-brands fa-telegram
+        target: _blank
+        url: https://t.me/kevinveenbirkenbach
+        identifier: kevinveenbirkenbach
+        warning: Telegram is not hosted by me!
+        alternatives:
+          - link: navigation.header.contact.messenger.matrix
+      - name: WhatsApp
+        description: Chat with me on WhatsApp
+        icon:
+          class: fa-brands fa-whatsapp
+        url: https://wa.me/491781798023
+        identifier: "+491781798023"
+        info: Consider using decentralized and privacy-respecting alternatives to maintain control over your data, improve security, and foster healthier online interactions.
+        alternatives:
+          - link: navigation.header.contact.messenger.matrix
+          - link: navigation.header.contact.messenger.signal
+          - link: navigation.header.contact.messenger.telegram
+
+  footer:
+  - link: accounts
+  - name: Solution Hub
+    description: Curated collection of self hosted tools
+    icon:
+        class: fa-solid fa-network-wired
+    url: 
+    subitems:
+    - name: Community
+      description: Tools to manage the community
+      icon:
+          class: fa-solid fa-users
+      subitems:
+      - name: Forum
+        description: Join the discussion
+        icon:
+          class: fa-brands fa-discourse
+        url: https://forum.veen.world/
+      - name: Learning Platform
+        description: Learn with my academy
+        icon:
+          class: fa-solid fa-graduation-cap
+        url: https://academy.veen.world/
+      - name: Newsletter
+        description: Subscribe to my newsletter
+        icon:
+          class: fa-solid fa-envelope-open-text
+        url: https://newsletter.veen.world/subscription/form
+    - name: Project Management
+      description: Project Management Tools
+      icon:
+          class: fa-solid fa-chart-line
+      subitems:
+      - name: Open Project
+        description: Explore my projects
+        icon:
+          class: fa-solid fa-tasks
+        url: https://project.veen.world/
+        
+      - name: Taiga
+        description: View my Kanban board
+        icon:
+          class: bi bi-clipboard2-check-fill
+        url: https://kanban.veen.world/
+        
+    - name: Communication
+      icon:
+        class: fa-solid fa-comments
+      subitems:
+      - name: Elements
+        description: Chat with me
+        icon:
+          class: fa-solid fa-comment
+        url: https://element.veen.world/
+        
+      - name: Big Blue Button
+        description: Join live events
+        icon:
+          class: fa-solid fa-video
+        url: https://meet.veen.world/
+        
+      - name: Mailu
+        description: Send me a mail
+        icon:
+          class: fa-solid fa-envelope
+        url: https://mail.veen.world/
+    - name: Tools
+      icon:
+        class: fas fa-tools
+      subitems:
+      - name: Matomo
+        description: Analyze with Matomo
+        icon:
+          class: fa-solid fa-chart-simple
+        url: https://matomo.veen.world/
+        
+      - name: Baserow
+        description: Organize with Baserow
+        icon:
+          class: fa-solid fa-table
+        url: https://baserow.veen.world/    
+      - name: Yourls
+        description: Find my curated links
+        icon:
+          class: bi bi-link
+        url: https://s.veen.world/admin/
+        
+      - name: Nextcloud
+        description: Access my cloud storage
+        icon:
+          class: fa-solid fa-cloud
+        url: https://cloud.veen.world/
+        
+  - name: About
+    description: All information about me
+    icon:
+        class: fa-solid fa-user
+    subitems:
+    - name: Logbooks
+      description: Access my personal logbooks (diving, flying, sailing)
+      icon:
+          class: fa-solid fa-book
+      subitems:
+      - name: Skydiver
+        description: View my skydiving logs
+        icon:
+          class: fa-solid fa-parachute-box
+        url: https://s.veen.world/skydiverlog
+        
+      - name: Skipper
+        description: See my sailing records
+        icon:
+          class: fa-solid fa-sailboat
+        url: https://s.veen.world/meilenbuch
+        
+      - name: Diver
+        description: Check my diving logs
+        icon:
+          class: fa-solid fa-fish
+        url: https://s.veen.world/diverlog
+        
+      - name: Pilot
+        description: Review my flight logs
+        icon:
+          class: fa-solid fa-plane
+        url: https://s.veen.world/pilotlog
+        
+      - name: Nature
+        description: Explore my nature logs
+        icon:
+          class: fa-solid fa-tree
+        url: https://s.veen.world/naturejournal
+    - name: Vita
+      description: View my CV
+      icon:
+          class: fa-solid fa-file-lines
+      url: https://s.veen.world/lebenslauf
+    - name: Credentials
+      description: Access my certifications, degrees, and professional records
+      icon:
+        class: fa-solid fa-id-card
+      subitems:
+        - name: Degrees
+          description: View my academic degrees
           icon:
             class: fa-solid fa-graduation-cap
-          url: https://academy.veen.world/
+          url: https://s.veen.world/degrees
-        - name: Newsletter
+        - name: Certificates
-          description: Subscribe to my newsletter
+          description: View my training and professional development records
           icon:
-            class: fa-solid fa-envelope-open-text
+            class: fa-solid fa-certificate
-          url: https://newsletter.veen.world/subscription/form
+          url: https://s.veen.world/certificates
-      - name: Project Management
+        - name: Certifications
-        description: Project Management Tools
+          description: Browse all my certifications
-        icon:
-            class: fa-solid fa-chart-line
-        children:
-        - name: Open Project
-          description: Explore my projects
           icon:
-            class: fa-solid fa-tasks
+            class: fa-solid fa-scroll
-          url: https://project.veen.world/
+          url: https://s.veen.world/certifications
-          
+    - link: accounts
-        - name: Taiga
+      
-          description: View my Kanban board
+  - name: Imprint
-          icon:
+    description: Check out the imprint information
-            class: bi bi-clipboard2-check-fill
+    icon:
-          url: https://kanban.veen.world/
+        class: fa-solid fa-scale-balanced
-          
+    url: https://s.veen.world/imprint
-      - name: Communication
-        icon:
-          class: fa-solid fa-comments
-        children:
-        - name: Elements
-          description: Chat with me
-          icon:
-            class: fa-solid fa-comment
-          url: https://element.veen.world/
-          
-        - name: Big Blue Button
-          description: Join live events
-          icon:
-            class: fa-solid fa-video
-          url: https://meet.veen.world/
-          
-        - name: Mailu
-          description: Send me a mail
-          icon:
-            class: fa-solid fa-envelope
-          url: https://mail.veen.world/
-      - name: Tools
-        icon:
-          class: fas fa-tools
-        children:
-        - name: Matomo
-          description: Analyze with Matomo
-          icon:
-            class: fa-solid fa-chart-simple
-          url: https://matomo.veen.world/
-          
-        - name: Baserow
-          description: Organize with Baserow
-          icon:
-            class: fa-solid fa-table
-          url: https://baserow.veen.world/    
-        - name: Yourls
-          description: Find my curated links
-          icon:
-            class: bi bi-link
-          url: https://s.veen.world/admin/
-          
-        - name: Nextcloud
-          description: Access my cloud storage
-          icon:
-            class: fa-solid fa-cloud
-          url: https://cloud.veen.world/
-          
-    - name: About
-      description: All information about me
-      icon:
-          class: fa-solid fa-user
-      children:
-      - name: Logbooks
-        description: Access my personal logbooks (diving, flying, sailing)
-        icon:
-            class: fa-solid fa-book
-        children:
-        - name: Skydiver
-          description: View my skydiving logs
-          icon:
-            class: fa-solid fa-parachute-box
-          url: https://s.veen.world/skydiverlog
-          
-        - name: Skipper
-          description: See my sailing records
-          icon:
-            class: fa-solid fa-sailboat
-          url: https://s.veen.world/meilenbuch
-          
-        - name: Diver
-          description: Check my diving logs
-          icon:
-            class: fa-solid fa-fish
-          url: https://s.veen.world/diverlog
-          
-        - name: Pilot
-          description: Review my flight logs
-          icon:
-            class: fa-solid fa-plane
-          url: https://s.veen.world/pilotlog
-          
-        - name: Nature
-          description: Explore my nature logs
-          icon:
-            class: fa-solid fa-tree
-          url: https://s.veen.world/naturejournal
-      - name: Vita
-        description: View my CV
-        icon:
-            class: fa-solid fa-file-lines
-        url: https://s.veen.world/lebenslauf
-      - name: Languages
-        icon:
-          class: fa-solid fa-language
-        children:
-        - link: accounts.duolingo
-        - name: Languages Credentials
-          description: Check out which languages I speak
-          url: https://s.veen.world/languages
-          icon:
-            class: fa-solid fa-language
-      - name: Credentials
-        description: Access my certifications, degrees, and professional records
-        icon:
-          class: fa-solid fa-id-card
-        children:
-          - name: Degrees
-            description: View my academic degrees
-            icon:
-              class: fa-solid fa-graduation-cap
-            url: https://s.veen.world/degrees
-          - name: Certificates
-            description: View my training and professional development records
-            icon:
-              class: fa-solid fa-certificate
-            url: https://s.veen.world/certificates
-          - name: Certifications
-            description: Browse all my certifications
-            icon:
-              class: fa-solid fa-scroll
-            url: https://s.veen.world/certifications
-      - name: Skill Matrix
-        description: Checkout my skills
-        icon:
-          class: fa-solid fa-layer-group
-        url: https://s.veen.world/skillmatrix
-      - link: accounts 
-    - name: Imprint
-      description: Check out the imprint information
-      icon:
-          class: fa-solid fa-scale-balanced
-      url: https://s.veen.world/imprint
-  

app/static/css/default.css

@@ -23,17 +23,13 @@ a {
   flex: 1;
 }
 
-/* Subtle shadow effect */
-.navbar, .card, .dropdown-menu{
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-}
-
 /* Card styles */
 .navbar, .card {
   flex: 1; /* Ensures cards fill the height of their container */
   border-radius: 5px; /* Rounded corners */
   border: 1px solid #ccc; /* Optional border color */
   padding: 10px; /* Inner spacing */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Subtle shadow effect */
   color: #000000 !important;
   background-color: #f9f9f9;
 }

app/static/css/navigation.css

@@ -3,13 +3,34 @@
     display: none;
     opacity: 0;
     visibility: hidden;
-    width: max-content !important; /* Passt die Breite an das breiteste Item an */
-    box-sizing: border-box; /* Berücksichtigt Innenabstand und Rahmen */
-}
-
-/* Positionierung von Submenüs */
-.dropdown-submenu > .dropdown-menu {
-    position: absolute;
     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/js/navigation.js

@@ -2,47 +2,57 @@ document.addEventListener('DOMContentLoaded', () => {
   const menuItems = document.querySelectorAll('.nav-item.dropdown');
   const subMenuItems = document.querySelectorAll('.dropdown-submenu');
 
-  function addMenuEventListeners(items, isTopLevel) {
+  menuItems.forEach(item => {
-    items.forEach(item => {
+    let timeout;
-      let timeout;
 
-      function onMouseEnter() {
+    // Öffnen beim Hovern
-        clearTimeout(timeout);
+    item.addEventListener('mouseenter', () => {
-        openMenu(item, isTopLevel);
+      clearTimeout(timeout);
-      }
+      openMenu(item, true);
-
-      function onMouseLeave() {
-        timeout = setTimeout(() => {
-          closeMenu(item);
-        }, 500);
-      }
-
-      // Öffnen beim Hovern
-      item.addEventListener('mouseenter', onMouseEnter);
-
-      // Verzögertes Schließen beim Verlassen
-      item.addEventListener('mouseleave', onMouseLeave);
-
-      // Öffnen und Position anpassen beim Klicken
-      item.addEventListener('click', (e) => {
-        e.stopPropagation(); // Verhindert das Schließen von Menüs bei Klick
-        if (item.classList.contains('open')) {
-          closeMenu(item);
-        } else {
-          openMenu(item, isTopLevel);
-        }
-      });
     });
-  }
 
-  function addAllMenuEventListeners() {
+    // Verzögertes Schließen beim Verlassen
-    const updatedMenuItems = document.querySelectorAll('.nav-item.dropdown');
+    item.addEventListener('mouseleave', () => {
-    const updatedSubMenuItems = document.querySelectorAll('.dropdown-submenu');
+      timeout = setTimeout(() => closeMenu(item), 500);
-    addMenuEventListeners(updatedMenuItems, true);
+    });
-    addMenuEventListeners(updatedSubMenuItems, false);
-  }
 
-  addAllMenuEventListeners();
+    // Öffnen und Position anpassen beim Klicken
+    item.addEventListener('click', (e) => {
+      e.preventDefault(); // Verhindert die Standardaktion
+      e.stopPropagation(); // Verhindert das Schließen von Menüs bei Klick
+      if (item.classList.contains('open')) {
+        closeMenu(item);
+      } else {
+        openMenu(item, true);
+      }
+    });
+  });
+
+  subMenuItems.forEach(item => {
+    let timeout;
+
+    // Öffnen beim Hovern
+    item.addEventListener('mouseenter', () => {
+      clearTimeout(timeout);
+      openMenu(item, false);
+    });
+
+    // Verzögertes Schließen beim Verlassen
+    item.addEventListener('mouseleave', () => {
+      timeout = setTimeout(() => closeMenu(item), 500);
+    });
+
+    // Öffnen und Position anpassen beim Klicken
+    item.addEventListener('click', (e) => {
+      e.preventDefault(); // Verhindert die Standardaktion
+      e.stopPropagation(); // Verhindert das Schließen von Menüs bei Klick
+      if (item.classList.contains('open')) {
+        closeMenu(item);
+      } else {
+        openMenu(item, false);
+      }
+    });
+  });
 
   // Globale Klick-Listener, um Menüs zu schließen, wenn außerhalb geklickt wird
   document.addEventListener('click', () => {
@@ -53,10 +63,10 @@ document.addEventListener('DOMContentLoaded', () => {
     item.classList.add('open');
     const submenu = item.querySelector('.dropdown-menu');
     if (submenu) {
+      adjustMenuPosition(submenu, item, isTopLevel);
       submenu.style.display = 'block';
       submenu.style.opacity = '1';
       submenu.style.visibility = 'visible';
-      adjustMenuPosition(submenu, item, isTopLevel);
     }
   }
 
@@ -89,7 +99,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (isTopLevel) {
       // Top-Level-Menüs öffnen nur nach oben oder unten
       if (spaceBelow < rect.height && spaceAbove > rect.height) {
-        submenu.style.bottom = `${window.innerHeight - parentRect.bottom - parentRect.height}px`;
+        submenu.style.bottom = '100%';
         submenu.style.top = 'auto';
       } else {
         submenu.style.top = `${parentRect.height}px`;
@@ -101,14 +111,9 @@ document.addEventListener('DOMContentLoaded', () => {
       submenu.style.left = prefersRight ? '100%' : 'auto';
       submenu.style.right = prefersRight ? 'auto' : '100%';
 
-      // Öffnen nach oben, wenn unten kein Platz ist
+      const prefersBelow = spaceBelow >= spaceAbove;
-      if (spaceBelow < rect.height && spaceAbove > rect.height) {
+      submenu.style.top = prefersBelow ? '0' : 'auto';
-        submenu.style.top = 'auto';
+      submenu.style.bottom = prefersBelow ? 'auto' : '100%';
-        submenu.style.bottom = `${parentRect.bottom - parentRect.top - rect.height}px`; // Höhe des Submenüs wird berücksichtigt
-      } else {
-        submenu.style.top = '0';
-        submenu.style.bottom = 'auto';
-      }
     }
   }
 });

app/templates/moduls/navigation.html.j2

@@ -1,33 +1,33 @@
-{% macro render_icon_and_name(item) %}
+<!-- Template for Subitems -->
-    <i class="{{ item.icon.class if item.icon is defined and item.icon.class is defined else 'fa-solid fa-link' }}"></i>
+{% macro render_subitems(subitems) %}
-    {% if item.name is defined %}
+    {% for subitem in subitems %}
-        {{ item.name }}
+        {% if subitem.subitems %}
-    {% else %}
-        Unnamed Item: {{item}}
-    {% endif %}
-{% endmacro %}
-<!-- Template for children -->
-{% macro render_children(children) %}
-    {% for children in children %}
-        {% if children.children %}
             <li class="dropdown-submenu position-relative">
-                <a class="dropdown-item dropdown-toggle" title="{{ children.description }}">
+                <a class="dropdown-item dropdown-toggle" href="#" title="{{ subitem.description }}">
-                    {{ render_icon_and_name(children) }}
+                    {% if subitem.icon is defined and subitem.icon.class is defined %}
+                        <i class="{{ subitem.icon.class }}"></i> {{ subitem.name }}
+                    {% else %}
+                        <p>Missing icon in subitem: {{ subitem }}</p>
+                    {% endif %}
                 </a>
                 <ul class="dropdown-menu">
-                    {{ render_children(children.children) }}
+                    {{ render_subitems(subitem.subitems) }}
                 </ul>
             </li>
-        {% elif children.identifier or children.warning or children.info %}
+        {% elif subitem.identifier or subitem.warning or subitem.info %}
             <li>
-                <a class="dropdown-item" onclick='openDynamicPopup({{ children|tojson|safe }})' data-bs-toggle="tooltip" title="{{ children.description }}">
+                <a class="dropdown-item" onclick='openDynamicPopup({{ subitem|tojson|safe }})' data-bs-toggle="tooltip" title="{{ subitem.description }}">
-                    {{ render_icon_and_name(children) }}
+                    <i class="{{ subitem.icon.class }}"></i> {{ subitem.name }}
                 </a>
             </li>
         {% else %}
             <li>
-                <a class="dropdown-item" href="{{ children.url }}" target="{{ children.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ children.description }}">
+                <a class="dropdown-item" href="{{ subitem.url }}" target="{{ subitem.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ subitem.description }}">
-                     {{ render_icon_and_name(children) }}
+                    {% if subitem.icon is defined and subitem.icon.class is defined %}
+                        <i class="{{ subitem.icon.class }}"></i> {{ subitem.name }}
+                    {% else %}
+                        <p>Missing icon in subitem: {{ subitem }}</p>
+                    {% endif %}
                 </a>
             </li>
         {% endif %}
@@ -42,26 +42,26 @@
         </button>
         <div class="collapse navbar-collapse" id="navbarNav{{menu_type}}">
             <ul class="navbar-nav {% if menu_type == 'header' %}ms-auto{% endif %}">
-                {% for item in navigation[menu_type].children %}
+                {% for item in navigation[menu_type] %}
                     {% if item.url %}
                         <!-- Single Item -->
                         <li class="nav-item">
                             <a class="nav-link" href="{{ item.url }}" target="{{ item.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ item.description }}">
-                                {{ render_icon_and_name(item) }}
+                                <i class="{{ item.icon.class }}"></i> {{ item.name }}
                             </a>
                         </li>
                     {% else %}
                         <!-- Dropdown Menu -->
                         <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" id="navbarDropdown{{ loop.index }}" role="button" data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown{{ loop.index }}" role="button" data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false">
                                 {% if item.icon is defined and item.icon.class is defined %}
-                                    {{ render_icon_and_name(item) }}
+                                    <i class="{{ item.icon.class }}"></i> {{ item.name }}
                                 {% else %}
                                     <p>Missing icon in item: {{ item }}</p>
                                 {% endif %}
                             </a>
                             <ul class="dropdown-menu">
-                                {{ render_children(item.children) }}
+                                {{ render_subitems(item.subitems) }}
                             </ul>
                         </li>
                     {% endif %}

app/utils/configuration_resolver.py

@@ -2,7 +2,7 @@ from pprint import pprint
 class ConfigurationResolver:
     """
     A class to resolve `link` entries in a nested configuration structure.
-    Supports navigation through dictionaries, lists, and `children`.
+    Supports navigation through dictionaries, lists, and `subitems`.
     """
 
     def __init__(self, config):
@@ -14,56 +14,23 @@ class ConfigurationResolver:
         """
         self._recursive_resolve(self.config, self.config)
 
-    def __load_children(self,path):
-        """
-        Check if explicitly children should be loaded and not parent
-        """
-        return path.split('.').pop() == "children"
-        
-    def _replace_in_dict_by_dict(self, dict_origine, old_key, new_dict):
-        if old_key in dict_origine:
-            # Entferne den alten Key
-            old_value = dict_origine.pop(old_key)
-            # Füge die neuen Key-Value-Paare hinzu
-            dict_origine.update(new_dict)
-
-    def _replace_in_list_by_list(self, list_origine, old_element, new_elements):
-        index = list_origine.index(old_element)
-        list_origine[index:index+1] = new_elements
-
-    def _replace_element_in_list(self, list_origine, old_element, new_element):
-        index = list_origine.index(old_element)
-        list_origine[index] = new_element
-
     def _recursive_resolve(self, current_config, root_config):
         """
         Recursively resolves `link` entries in the configuration.
         """
         if isinstance(current_config, dict):
             for key, value in list(current_config.items()):
-                if key == "children":
+                if key == "link":
-                    if value is None or not isinstance(value, list):
-                        raise ValueError(f"Expected 'children' to be a list, but got {type(value).__name__} instead.")
-                    for item in value:
-                        if "link" in item:
-                            loaded_link = self._find_entry(root_config, item['link'].lower(), False)
-                            if isinstance(loaded_link, list):
-                                self._replace_in_list_by_list(value,item,loaded_link)
-                            else:
-                                self._replace_element_in_list(value,item,loaded_link)  
-                        else:
-                            self._recursive_resolve(value, root_config)            
-                elif key == "link":
                     try:
-                        loaded = self._find_entry(root_config, value.lower(), True)
+                        target = self._find_entry(root_config, value.lower(), True)
-                        if isinstance(loaded, list) and len(loaded) > 2:
+                        if isinstance(target, list) and len(target) > 2:
-                            loaded = self._find_entry(root_config, value.lower(), False)  
+                            target = self._find_entry(root_config, value.lower(), False)    
                         current_config.clear()
-                        current_config.update(loaded)
+                        current_config.update(target)
                     except Exception as e: 
                         raise ValueError(
                             f"Error resolving link '{value}': {str(e)}. "
-                            f"Current path: {key}, Current config: {current_config}" + (f", Loaded: {loaded}" if 'loaded' in locals() or 'loaded' in globals() else "")
+                            f"Current path: {key}, Current config: {current_config}"
                         )
                 else:
                     self._recursive_resolve(value, root_config)
@@ -71,9 +38,9 @@ class ConfigurationResolver:
             for item in current_config:
                 self._recursive_resolve(item, root_config)
 
-    def _get_children(self,current):
+    def _get_subitems(self,current):
-        if isinstance(current, dict) and ("children" in current and current["children"]):
+        if isinstance(current, dict) and ("subitems" in current and current["subitems"]):
-            current = current["children"]
+            current = current["subitems"]
         return current
 
     def _find_by_name(self,current, part):
@@ -82,35 +49,33 @@ class ConfigurationResolver:
                     None
                 )
 
-    def _find_entry(self, config, path, children):
+    def _find_entry(self, config, path, subitems):
         """
         Finds an entry in the configuration by a dot-separated path.
-        Supports both dictionaries and lists with `children` navigation.
+        Supports both dictionaries and lists with `subitems` navigation.
         """
         parts = path.split('.')
         current = config
         for part in parts:
             if isinstance(current, list):
-                # If children explicit declared just load children
+                # Look for a matching name in the list
-                if part != "children":
+                found = self._find_by_name(current,part)
-                    # Look for a matching name in the list
+                if found:
-                    found = self._find_by_name(current,part)
+                    print(
-                    if found:
+                        f"Matching entry for '{part}' in list. Path so far: {' > '.join(parts[:parts.index(part)+1])}. "
-                        current = found
+                        f"Current list: {current}"
-                        print(
+                    )
-                            f"Matching entry for '{part}' in list. Path so far: {' > '.join(parts[:parts.index(part)+1])}. "
+                else:
-                            f"Current list: {current}"
+                    raise ValueError(
-                        )
+                        f"No matching entry for '{part}' in list. Path so far: {' > '.join(parts[:parts.index(part)+1])}. "
-                    else:
+                        f"Current list: {current}"
-                        raise ValueError(
+                    )
-                            f"No matching entry for '{part}' in list. Path so far: {' > '.join(parts[:parts.index(part)+1])}. "
+                current = found
-                            f"Current list: {current}"
-                        )
             elif isinstance(current, dict):
                 # Case-insensitive dictionary lookup
                 key = next((k for k in current if k.lower() == part), None)
                 if key is None:
-                    current = self._find_by_name(current["children"],part)
+                    current = self._find_by_name(current["subitems"],part)
                     if not current:
                         raise KeyError(
                             f"Key '{part}' not found in dictionary. Path so far: {' > '.join(parts[:parts.index(part)+1])}. "
@@ -124,8 +89,8 @@ class ConfigurationResolver:
                     f"Invalid path segment '{part}'. Current type: {type(current)}. "
                     f"Path so far: {' > '.join(parts[:parts.index(part)+1])}"
                 )
-            if children:
+            if subitems:
-                current = self._get_children(current)
+                current = self._get_subitems(current)
 
         return current