{{ $colorScheme := default "dark" .Site.Params.header.colorScheme }}

<header class="blog-header">
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark flex-column align-items-stretch"
        style="padding-top: 0;padding-bottom: 0;">
        <div class="d-flex justify-content-between">
            <a class="navbar-brand mx-sm-auto mr-auto" href="{{ .Site.BaseURL | relLangURL }}">
                {{ partial "brand" . }}
            </a>

            <button class="navbar-toggler" data-toggle="collapse" data-bs-toggle="collapse" data-bs-target="#navbarMenu"
                data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

        </div>
        <div class="collapse navbar-collapse w-100 sticky-top justify-content-center" id="navbarMenu"
            style="background:#dc3545;">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="/tags/ai/" class="nav-link" style="color: white;">Technology News</a>
                </li>
                <li class="nav-item">
                    <a href="/categories/video-news/" class="nav-link" style="color: white;">Video News</a>
                </li>
                <li class="nav-item">
                    <a href="/tags/interior-design/" class="nav-link" style="color: white;">Consumer News</a>
                </li>
                <li class="nav-item">
                    <a href="/tags/esg/" class="nav-link" style="color: white;">ESG News</a>
                </li>
            </ul>
        </div>
    </nav>
</header>