<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <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="50" class="me-2">
            iFSR
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
            <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">
                                <a class="nav-link ps-0" href="{{ $i.url | relURL }}">{{ $i.name }}</a>
                                <ul class="dropdown-menu">
                                    {{ range $child := $children }}
                                        <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 }}
                                        <a class="nav-link ps-0" href="{{ $child.url | relURL }}">{{ $child.name }}</a>
                                    {{ end }}
                                </div>
                            </li>
                        {{ else }}
                            <li class="nav-item"><a class="nav-link" href="{{ $i.url | relURL }}">{{ $i.name }}</a></li>
                        {{ end }}
                    {{ end }}
                {{ end }}
            </ul>
        </div>
    </div>
</nav>