<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
        <a class="navbar-brand d-flex align-items-center" href="{{ "/" | relURL }}">
            <img src="{{ "images/logo.svg" | relURL }}" alt="iFSR Logo" height="42">
            iFSR
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-label="Navigation ein-/ausklappen">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="mainNav">
            {{ $items := site.Data.navigation.menu.main }}
            <ul class="navbar-nav ms-auto align-items-lg-center">
                {{ range $i := $items }}
                    {{ if not $i.parent }}
                        {{ $children := where $items "parent" $i.name }}
                        {{ if gt (len $children) 0 }}
                            <li class="nav-item dropdown d-flex align-items-center show-on-hover">
                                <!-- Dropdown Parent -->
                                <a class="nav-link" href="{{ $i.url | relURL }}">{{ $i.name }}</a>
                                <svg class="dropdown-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg>
                                <ul class="dropdown-menu">
                                    {{ range $child := $children }}
                                        <!-- Dropdown Child Desktop -->
                                        <li><a class="dropdown-item" href="{{ $child.url | relURL }}">{{ $child.name }}</a></li>
                                    {{ end }}
                                </ul>
                            </li>
                            <li>
                                <div class="d-lg-none d-flex flex-column dropdown-item-mobile">
                                    {{ range $child := $children }}
                                        <!-- Dropdown Child Mobile -->
                                    <div class="nav-item-mobile"><a class="nav-link" href="{{ $child.url | relURL }}">{{ $child.name }}</a></div>
                                    {{ end }}
                                </div>
                            </li>
                        {{ else }}
                            <!-- Nav Item -->
                            <li class="nav-item"><a class="nav-link" href="{{ $i.url | relURL }}">{{ $i.name }}</a></li>
                        {{ end }}
                    {{ end }}
                {{ end }}
            </ul>
        </div>
        <div class="d-none d-lg-flex ms-3">
            <button id="theme-switch" class="btn btn-link nav-link">
                <img id="light-icon" src="{{ "/icons/light.svg" | relURL }}" alt="Light Mode Icon" class="theme-icon">
                <img id="dark-icon" src="{{ "/icons/dark.svg" | relURL }}" alt="Dark Mode Icon" class="theme-icon">
            </button>
        </div>

    </div>
</nav>