<nav class="navbar navbar-expand-md">
    <div class="container {% unless page.title %}container-home{% endunless %}">
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
            <span>
                <i class="fa-solid fa-bars"></i>
            </span>
        </button>

        <div class="collapse navbar-collapse" id="navbar">
            <ul class="navbar-nav nav-main mr-auto">
                <li class="nav-item{% unless page.title %} active{% endunless %}"><a class="nav-link" href="/">Home</a></li>
                <li class="nav-item{% if page.title == 'Downloads' %} active{% endif %}"><a class="nav-link" href="/downloads">Downloads</a></li>
                <li class="nav-item{% if page.title == 'Changelog' %} active{% endif %}"><a class="nav-link" href="/changelog">Changelog</a></li>
                <li class="nav-item{% if page.title == 'Screenshots' %} active{% endif %}"><a class="nav-link" href="/screenshots">Screenshots</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Docs</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="/image-effects">Image effects</a>
                        <a class="dropdown-item" href="/actions">Actions</a>
                        <a class="dropdown-item" href="/docs/dev-builds">Dev builds</a>
                        <a class="dropdown-item" href="/docs/keybinds">Keybinds</a>
                        <a class="dropdown-item" href="/docs/scrolling-screenshot">Scrolling screenshot</a>
                        <a class="dropdown-item" href="/docs/command-line-arguments">Command line arguments</a>
                        <a class="dropdown-item" href="/docs/translation">Translation</a>
                        <a class="dropdown-item" href="/docs/ocr">OCR</a>
                        <a class="dropdown-item" href="/docs/custom-uploader">Custom uploader</a>
                        <a class="dropdown-item" href="/docs/amazon-s3">Amazon S3 guide</a>
                        <a class="dropdown-item" href="/docs/google-cloud-storage">Google Cloud Storage guide</a>
                        <a class="dropdown-item" href="/docs/cloudflare-r2">Cloudflare R2 guide</a>
                        <a class="dropdown-item" href="/brand-assets">Brand assets</a>
                    </div>
                </li>
                <li class="nav-item{% if page.title == 'Donate' %} active{% endif %}"><a class="nav-link" href="/donate">Donate</a></li>
            </ul>

            <ul class="navbar-nav nav-links">
                <li class="nav-item"><a class="nav-link" href="{{ site.github }}" data-toggle="tooltip" data-placement="bottom" title="GitHub">
                        <i class="fa-brands fa-github fa-fw"></i></a></li>
                <li class="nav-item"><a class="nav-link" href="https://x.com/{{ site.twitter }}" data-toggle="tooltip" data-placement="bottom" title="X">
                        <i class="fa-brands fa-x-twitter fa-fw"></i></a></li>
                <li class="nav-item"><a class="nav-link" href="https://discord.gg/ShareX" data-toggle="tooltip" data-placement="bottom" title="Discord">
                        <i class="fa-brands fa-discord fa-fw"></i></a></li>
                <li class="nav-item"><a class="nav-link" href="https://www.reddit.com/r/sharex" data-toggle="tooltip" data-placement="bottom" title="Reddit">
                        <i class="fa-brands fa-reddit-alien fa-fw"></i></a></li>
            </ul>
        </div>
    </div>
</nav>