<clr-header class="header-6 header">
    <button class="header-hamburger-trigger" type="button">
        <span></span>
    </button>

    <div class="branding">
        <a class="logo-and-title" routerlink="/" href="{{ site.github.repository_url }}">
            <!-- <span class="clr-icon clarity-logo"></span>
            <span class="title">Project Dispatch</span> -->
            <img class="dispatch-logo" src="{{ '/assets/images/logo-small-200.png' | relative_url }}">
        </a>
    </div>
    <div class="divider"></div>
    <div class="header-nav clr-nav-level-1">
        <a class="nav-link {% if page.url == "/" %}active{% endif %}" id="home-link" routerlink="/" routerlinkactive="active" href="{{ site.baseurl }}/"><span class="nav-text">Home</span></a>
        <a class="nav-link {% if page.url contains "documentation" %}active{% endif %}" routerlink="/documentation" routerlinkactive="active" href="{{ site.baseurl }}/documentation/front/overview"><span class="nav-text">Documentation</span></a>
        <a class="nav-link {% if page.url contains "code" %}active{% endif %}" routerlink="/code" routerlinkactive="active" href="{{ site.baseurl }}/code"><span class="nav-text">Code</span></a>
        <a class="nav-link {% if page.url contains "community" %}active{% endif %}" routerlink="/community" routerlinkactive="active" href="{{ site.baseurl }}/community"><span class="nav-text">Community</span></a>
        <a class="nav-link {% if page.url contains "news" %}active{% endif %}" routerlink="/news" routerlinkactive="active" href="{{ site.baseurl }}/news"><span class="nav-text">What's New</span></a>
    </div>
    <div class="settings">
        <iframe class="github-btn" frameborder="0" height="20px" scrolling="0" src="https://ghbtns.com/github-btn.html?user=vmware&repo=dispatch&type=star&count=true" width="170px"></iframe>
    </div>

    <button class="header-overflow-trigger" type="button">
        <span></span>
    </button>
    <div class="header-backdrop"></div>
</clr-header>