<nav class="navbar is-primary {% if site.fixed_navbar %} is-fixed-{{ site.fixed_navbar }} {% endif %}" x-data="{ openNav: false }">

<div class="container">

<div class="navbar-brand">

<a href="{{ site.baseurl }}/" class="navbar-item">

{{ site.title }}

</a>

<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu" :class="{ 'is-active': openNav }" x-on:click="openNav = !openNav">

<span aria-hidden="true"></span>

<span aria-hidden="true"></span>

<span aria-hidden="true"></span>

</a>

</div>

<div class="navbar-menu" id="navMenu">

<div class="navbar-start">

{% if site.data.navigation %}

{% for item in site.data.navigation %}

{% if item.dropdown %}

<!-- First-level dropdown (open on click) -->

<div class="navbar-item has-dropdown">

<a href="{{ item.link | relative_url }}" class="navbar-link {% if page.url contains item.link %}is-active{% endif %}" onclick="toggleDropdown(event)">

{{ item.name }}

</a>

<div class="navbar-dropdown">

{% 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">

{% for subsubitem in subitem.dropdown %}

<a href="{{ subsubitem.link | relative_url }}" class="navbar-item">{{ subsubitem.name }}</a>

{% endfor %}

</div>

</div>

{% else %}

<a href="{{ subitem.link | relative_url }}" class="navbar-item {% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a>

{% endif %}

{% endfor %}

</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>

</div>

function toggleDropdown(event) {

event.preventDefault();

// Find the parent dropdown container

const parentItem = event.target.closest('.has-dropdown');

// Toggle the active state

if (parentItem.classList.contains('is-active')) {

parentItem.classList.remove('is-active');

} else {

// Close all other dropdowns

document.querySelectorAll('.navbar-item.has-dropdown.is-active').forEach(item => {

item.classList.remove('is-active');

});

// Open the clicked dropdown

parentItem.classList.add('is-active');

}

}

// Close dropdowns when clicking outside

document.addEventListener('click', function (event) {

const target = event.target;

if (!target.closest('.has-dropdown')) {

document.querySelectorAll('.navbar-item.has-dropdown.is-active').forEach(item => {

item.classList.remove('is-active');

});

}

});

</script>