{% for menu in site.data.menus %}
{% if menu.name == "navSearch" %}
{% if menu.switch == true %}
{% assign navSearch = true %}
{% else %}
{% assign navSearch = false %}
{% endif %}
{% endif %}
{% endfor %}
<header mdui-headroom class="mdui-appbar mdui-shadow-0 mdui-appbar-fixed">
    <div class="mdui-toolbar">
        <a href="javascript:;" class="mdui-btn mdui-btn-icon mdui-hidden-sm-up" mdui-drawer="{target: '#k-menu'}"><i class="mdui-icon material-icons">&#xe5d2;</i></a>
        <a href="{{site.url}}" class="mdui-typo-title">{{site.title |upcase }}</a>
        <div class="mdui-toolbar-spacer"></div>
        <div class="mdui-hidden-xs-down">
        {% for menu in site.data.menus %}
        {% if menu.name != "navSearch" %}
        <a href="{{menu.url | prepend: site.baseurl }}" class="mdui-btn {% if menu.url  == page.url %}mdui-list-item-active{% endif %}">{{menu.name}}</a>
        {% endif %}
        {% endfor %}
        {% if navSearch == true %}
        <div class="mdui-textfield k-navsearch-btn mdui-textfield-expandable">
            <button class="mdui-textfield-icon k-navsearch-open mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">&#xe8b6;</i></button>
            <div class="typeahead__container">
                <div class="typeahead__field">
                    <span class="typeahead__query">
                        <input class="mdui-textfield-input k-nav-search" type="text" placeholder="Search"/>
                    </span>
                </div>
            </div>
            <button class="mdui-textfield-close k-navsearch-close mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">&#xe5cd;</i></button>
        </div>
        {% endif %}
        </div>
    </div>
</header>
<div class="mdui-drawer mdui-drawer-close" id="k-menu">
    {% if navSearch == true %}
    <div class="mdui-textfield">
        <div class="typeahead__container">
            <div class="typeahead__field">
                <span class="typeahead__query">
                    <i class="mdui-icon material-icons">&#xe8b6;</i>
                    <input class="mdui-textfield-input k-nav-search" type="text" placeholder="Search"/>
                </span>
            </div>
        </div>
    </div>
    {% endif %}
    <ul class="mdui-list">
        {% for menu in site.data.menus %}
        {% if menu.name != "navSearch" %}
        <a href="{{menu.url | prepend: site.baseurl }}" class="mdui-list-item mdui-ripple {% if menu.url == page.url %}mdui-list-item-active{% endif %}">
            <i class="mdui-list-item-icon mdui-icon material-icons">{{menu.icon}}</i>
            <div class="mdui-list-item-content">{{menu.name}}</div>
        </a>
        {% endif %}
        {% endfor %}
    </ul>
</div>