000-776: extra level navi

Author: PowershellScripts

_includes/header.html

@@ -15,11 +15,15 @@
                 {% if site.data.navigation %}
                 {% for item in site.data.navigation %}
                     {% if item.dropdown %}
-                    <div class="navbar-item has-dropdown is-hoverable {% if site.fixed_navbar == 'bottom' %} has-dropdown-up {% endif %}">
-                        <a href="{{ item.link | relative_url }}" class="navbar-link {% if page.url contains item.link %}is-active{% endif %}">{{ item.name }}</a>
-                        <div class="navbar-dropdown">
+                    <!-- First-level dropdown (open on click) -->
+                    <div class="navbar-item has-dropdown" :class="{ 'is-active': item.isActive }" x-data="{ open: false }">
+                        <a href="{{ item.link | relative_url }}" class="navbar-link {% if page.url contains item.link %}is-active{% endif %}" @click.prevent="open = !open">
+                            {{ item.name }}
+                        </a>
+                        <div class="navbar-dropdown" x-show="open" @click.outside="open = false" style="display: none;">
                             {% for subitem in item.dropdown %}
                                 {% if subitem.dropdown %}
+                                <!-- Second-level dropdown (hoverable) -->
                                 <div class="navbar-item has-dropdown is-hoverable">
                                     <a href="{{ subitem.link | relative_url }}" class="navbar-link">{{ subitem.name }}</a>
                                     <div class="navbar-dropdown">
@@ -35,11 +39,14 @@
                         </div>
                     </div>
                     {% else %}
+                    <!-- Non-dropdown first-level link -->
                     <a href="{{ item.link | relative_url }}" class="navbar-item {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
                     {% endif %}
                 {% endfor %}
                 {% endif %}
             </div>
+     
+        
             <div class="navbar-end">
                 <a href=""><img src="../../../../flag.png" /></a>
                 <a class="navbar-item" href="#">