{% assign lang = page.lang %}
{% assign dataToShow = site.data.header[lang].data %}
{%- assign CustomColor = site.data.theme.colors -%}

<!-- header starts -->
<header id="header">
    <!-- navigation startss -->
    <nav class="navbar navbar-expand-lg navbar-dark" style="background: {{CustomColor.navbarBg}}">

        <a class="navbar-brand" href="/" title="{{dataToShow.tooltip}}">
            <img src="{{ site.favicon | relative_url }}" alt="{{site.name}}" style="width:35px; height:35px;">
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
            <i class="bi bi-list bi-2x bars"></i>
        </button>

        {%- if site.MonumetricID -%}
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/blog">Blog</a>
                </li>


                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
                        aria-expanded="false">
                        More
                    </a>
                    {%- if dataToShow.megaMenu -%}
                    <ul class="dropdown-menu top_tool_bar" aria-labelledby="dropdownMenuButton">
                        {%- for item in dataToShow.megaMenu.dropdown -%}
                        <div class="catPad mb-4">
                            <li style="margin: 0 0 20px;" class="text-muted">{{item.categoryName}}</li>
                            {%- for item in item.links -%}
                            <li style="margin:0 0 15px">
                                <a class="dropdown-item p-0" href="{{item.url}}">
                                    {{item.name}}
                                </a>
                            </li>
                            {%- endfor -%}
                        </div>
                        {%- endfor -%}
                    </ul>
                    {%- endif -%}
                </li>
            </ul>
        </div>
        {% else %}
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/blog">Blog</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" role="button"
                        aria-haspopup="true" aria-expanded="false">
                        More
                    </a>
                    <div class="top_tool_bar dropdown-menu" aria-labelledby="navbarDropdown">

                        {% for item in dataToShow.more %}
                        <a class="dropdown-item" href="{{item.url}}">
                            {{item.name}}
                        </a>
                        {% endfor %}

                    </div>
                </li>
            </ul>
        </div>
        {%- endif -%}
    </nav>
    <!-- navbar close -->
</header>
<!-- header close -->