{% assign page_url_path = page.url | regex_replace: '/index$|/index\.html$|\.html$|/$' -%}

<header class="site-header">

<nav class="navbar navbar-expand-md justify-content-start justify-content-md-between">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<i class="material-icons">menu</i>

</button>

<a class="navbar-brand" href="/">

{% asset 'flutter-lockup.png' alt='Flutter logo' height="37" width="129" class="align-middle" %}

</a>

<div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">

<div class="site-header__sheet-bg" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"></div>

<div class="site-header__sheet">

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link

{%- if page_url_path == '/docs' or page_url_path contains '/docs/' %} active {%- endif -%}" href="/docs">Docs</a>

</li>

<div class="site-sidebar site-sidebar--header d-md-none">

{% include shared/sidenav-level-1.html nav=site.data.sidenav %}

</div>

<li class="nav-item">

<a class="nav-link

{%- if page_url_path == '/showcase' %} active {%- endif -%}" href="/showcase">Showcase</a>

</li>

<li class="nav-item">

<a class="nav-link

{%- if page_url_path == '/community' %} active {%- endif -%}" href="/community">Community</a>

</li>

</ul>

<form action="/search/" class="site-header__search form-inline">

<input class="site-header__searchfield form-control" type="search" name="q" id="q" autocomplete="off" placeholder="Search" aria-label="Search">

</form>

</div>

</div>

<div class="site-header__social navbar-nav flex-row">

<a class="nav-item nav-link" href="{{site.social.twitter}}" aria-label="Twittter"><i class="fab fa-twitter fa-lg"></i></a>

<a class="nav-item nav-link" href="{{site.social.youtube}}" aria-label="YouTube"><i class="fab fa-youtube fa-lg"></i></a>

<a class="nav-item nav-link" href="{{site.repo.organization}}" aria-label="Github"><i class="fab fa-github fa-lg"></i></a>

</div>

{% if page.show-nav-get-started-button -%}

<a class="site-header__cta btn btn-primary" href="/docs/get-started/install/">Get started</a>

{% endif -%}

</nav>