{% assign lang = page.lang %}
{% assign dataToShow = site.data.header[lang].data %}
{%- assign CustomColor = site.data.theme.colors -%}
{% assign file = page.fileName %}
{% assign folder = page.folderName %}
{% assign Data= site.data[folder][lang][file] %}
<header id="header">
    <nav class="navbar navbar-expand-lg">
        {% if dataToShow.navbarBrandText != "" %}
        <a id="home-link" class="navbar-brand" href="/"
            title="{{dataToShow.navbarBrandText}}">{{dataToShow.navbarBrandText}}</a>
        {% else %}
        <a id="home-link" href="/">
            <img width="90%" height="90%" class="header-logo-height" width="{{dataToShow.navbarBrandLogoWidth  }}"
                height="{{dataToShow.navbarBrandLogoHeight | default: logovalue }}"
                src="{{ dataToShow.navbarBrandLogo }}" alt="{{ dataToShow.navbarBrandLogo }}" {%- if site.crossorigin
                -%} crossorigin {%- endif -%}>
        </a>
        {% endif %}
        <button id="button-toggle" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent" aria-label="bars-toggle-icon">
            <img src="/assets/images/hamburger-menu.svg" alt="hamburger-menu">
        </button>
        <div class="mobile-top-bar collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
            <div class="navbar-nav">
                <div class="nav-item">
                    <a class="blog-link nav-link" href="/blog">Blog</a>
                </div>
                <div class="nav-item dropdown" id="navbarDropdown">
                    <span class="nav-link dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
                        Tools
                    </span>
                </div>

                {%- if Data.megaMenu -%}
                <div class="dropmenu dropdown-menu top_tool_bar" aria-labelledby="navbarDropdown">
                    {%- for item in Data.megaMenu.dropdown -%}
                    <div class="catPad mb-4">
                        <div style="margin: 0 0 20px;" class="text-muted font-weight-bold">{{item.categoryName}}</div>
                        {%- for item in item.links -%}
                        <a class="dropdown-item my-3 p-0" href="{{item.url}}">
                            {%- if item.iconSrc -%}
                            <img class="d-inline mr-2" loading="lazy" style="height:20px;width:20px;"
                                src="{{item.iconSrc}}" {%- if site.crossorigin -%} crossorigin {%- endif -%}>
                            {%- endif -%}
                            {{item.name}}
                        </a>
                        {%- endfor -%}
                    </div>
                    {%- endfor -%}
                </div>
                {%- else -%}
                {%- if dataToShow.megaMenu -%}
                <div class="dropmenu dropdown-menu top_tool_bar" aria-labelledby="dropdownMenuButton">
                    {%- for item in dataToShow.megaMenu.dropdown -%}
                    <div class="catPad mb-4">
                        <div style="margin: 0 0 20px;" class="text-muted font-weight-bold">{{item.categoryName}}</div>
                        {%- for item in item.links -%}
                        <a class="dropdown-item my-3 p-0" href="{{item.url}}">
                            {{item.name}}
                        </a>
                        {%- endfor -%}
                    </div>
                    {%- endfor -%}
                </div>
                {%- endif -%}
                {%- endif -%}
            </div>
        </div>
    </nav>
</header>