navbar.html

<!-- MOBILE MENU -->

{% if page.alert %}
  <div role="banner" class="banner-alert">
    <div class="container">
      {{ page.alert | markdownify }}
    </div>
  </div>
{% endif %}
{% if site.data.alert.message %}
  <div role="banner" class="banner-alert">
    <div class="container">
      {{site.data.alert.message | markdownify}}
    </div>
  </div>
{% endif %}


{% assign datafile = "header_navmenu_datafile.json" %}
{% assign data_mobile_nav = site.data.header_navmenu_datafile.Mobile  %}
<!-- MOBILE ACCORDION NAV MENU -->
<div class="mobile-nav-topLevel-wrapper d-block d-lg-none mb-5">
    <div class="accordion accordion-flush mobile-nav-topLevel-accordion" id="mobile-nav-topLevel">

        <!-- OPENSEARCH ICON AND TOP LEVEL NAV ICON -->
        <div class="accordion-item">
            
            <div class="mobile-nav-topLevel accordion-header">

                <!-- TOGGLER -->
                <button 
                    class="accordion-button collapsed mobile-nav-topLevel-accordion-toggler" 
                    type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#mobile-nav-contentSection" 
                    aria-controls="mobile-nav-contentSection" 
                    aria-expanded="false" 
                    aria-label="Toggle navigation">
                    <a class="navbar-brand" href="{{ '/' | relative_url }}">
                        {% include icons_navbar.html type='opensearch-logo-default-1' %}          
                    </a>
                </button> 

            </div>    
            
            <div id="mobile-nav-contentSection" class="accordion-collapse collapse  mobile-nav-contentSection" data-bs-parent="#mobile-nav-topLevel">
                <div class="accordion-body collapsed">



                    <!-- TOP-NAV DROP DOWN  -->
                    <div class="container mobile-nav-contentSection-accordion accordion accordion-flush mb-4" id="mobile-nav-contentSection-accordion">


                        <!-- CONTENT SECTION ACCORDION -->

                        {% for sub_category in data_mobile_nav %}
                            <div class="accordion-item">
                                <h2 class="accordion-header row">
                                    <div class="col-3 px-0 ms-1 me-0 pt-3 icon-div-box-mobile">
                                        {% include icons_navbar.html type=sub_category.Icon %} 
                                    </div>
                                    <div class="col">
                                        <button class="accordion-button collapsed mobile-nav-contentSection-accordion-toggler ps-2" type="button" data-bs-toggle="collapse" data-bs-target="#{{sub_category.collapse-data-target}}" aria-expanded="false" aria-controls="{{sub_category.collapse-data-target}}">
                                            <div class="mobile-content-header">{{sub_category.Title}}</div>
                                        </button>
                                    </div>

                                </h2>
                                <div id="{{sub_category.collapse-data-target}}" class="accordion-collapse collapse" data-bs-parent="#mobile-nav-contentSection-accordion">
                                    <div class="accordion-body">

                                        {% for nav_link in sub_category.SubNav %}
                                            <div class="row">
                                                <a href='{{ nav_link.URL }}' class="ms-4 pb-3 mobile-content-text-link">{{ nav_link.Name }}</a>
                                            </div>
                                        {% endfor %}

                                    </div>
                                </div>
                            </div>


                        {% endfor %}


                    </div>

                    <!-- BLOG BUTTON -->
                    <div class="row px-4">
                        <a type="button" href="/blog/" class="btn button-dark rounded-pill mx-auto">
                            Visit the OpenSearch Blog
                        </a>
                    </div>





                </div>
            </div> 
        </div>            


        
    </div>
</div>


<!-- DESKTOP MENU -->
<div class="nav-drawer accordion mb-3 d-none d-lg-block" id="accordion-megamenu">


    <nav class="navbar top-nav-desktop navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="{{ '/' | relative_url }}">
                {% include icons_navbar.html type='opensearch-logo-default-1' %}          
            </a>

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item accordion-header my-auto mx-2">
                    <a class="nav-link btn  accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent-Platform" aria-controls="navbarToggleExternalContent-Platform" aria-expanded="false" aria-label="Toggle navigation Platform" href="#">Platform</a>
                </li>
                <li class="nav-item accordion-header my-auto mx-2">
                    <a class="nav-link btn accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent-Blog" aria-controls="navbarToggleExternalContent-Blog" aria-expanded="false" aria-label="Toggle navigation Blog" href="#">Blog</a>
                </li>
                <li  class="nav-item accordion-header my-auto mx-2">
                    <a class="nav-link btn accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent-Community" aria-controls="navbarToggleExternalContent-Community" aria-expanded="false" aria-label="Toggle navigation Community" href="#">Community</a>
                </li >
                <li  class="nav-item accordion-header my-auto ms-2">
                    <a class="nav-link btn accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent-Documentation" aria-controls="navbarToggleExternalContent-Documentation" aria-expanded="false" aria-label="Toggle navigation Documentation" href="#">Documentation</a>
                </li >

            </ul>
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">


                <div class="my-auto pt-2 pb-2 me-3">
                    <a class="btn btn-primary-dark my-1 py-1" href="/downloads.html" aria-current="Download">
                        
                        <div class="row button-content">
                            <div class="button-content-text col-auto d-none d-xxl-block">
                                Download OpenSearch 
                            </div>
                            <div class="button-content-text col-auto d-block d-xxl-none pe-1">
                                Download
                            </div>
                            <div class="button-content-icon col-auto px-0 ms-1 me-1 align-self-center">
                                {% include icons_navbar.html type='chevron-in-circle' %}
                            </div>
                            
                        </div>

                    </a>
                </div>


                <div class="accordion-header my-auto mx-auto">
                    <button class="btn accordion-button nav-search-icon collapsed my-auto p-0 rounded-circle" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent-Search" aria-controls="navbarToggleExternalContent-Search" aria-current="Toggle navigation Search" aria-expanded="false" >
                        {% include icons_navbar.html type='search-magnifying-glass-navbar' %}
                    </button>
                </div>


            </ul> 

        </div>
    </nav>





    <div class="container accordion">

        {% assign data_platform_dropdown = site.data.header_navmenu_datafile.Desktop['Platform']  %}
        {% assign left_column = data_platform_dropdown['LeftColumn'] %}
        {% assign center_column = data_platform_dropdown['CenterColumn'] %}
        {% assign right_column = data_platform_dropdown['RightColumn'] %}
        <!-- PLATFORM -->
        <div class="accordion-item">
            <div id="navbarToggleExternalContent-Platform" class="accordion-collapse collapse" data-bs-parent="#accordion-megamenu">
                <div class="accordion-body nav-drawer-body-tall">
                    <div class="row mb-5">

                        <!-- LEFT COLUMN -->
                        <div class="col-md-4 col-12">

                            {% for content_section in left_column %}

                                {% if content_section.URL %}
                                    <div class="mb-4">
                                        <a href="{{content_section.URL}}" class="{{ content_section.ClassValue }} mb-4">{{content_section.Title}}</a>
                                    </div>
                                {% else %}
                                    <div class="mb-4">
                                        <span class="{{ content_section.ClassValue }}">{{content_section.Title}}</span>
                                    </div>
                                {% endif %}

                                <div>
                                    {% for nav_link in content_section.SubNav %}
                                        <div class="mb-5 row">
                                            <div class="col-2 icon-div-box">
                                                {% include icons_navbar.html type=nav_link.Icon %}
                                            </div>
                                            <div class="col-10">
                                                <div class="row mb-1">
                                                    <a href='{{ nav_link.URL }}' class="{{ nav_link.ClassValue }}">{{ nav_link.Name }}</a>
                                                </div>
                                                <div class="row">
                                                    <span class="mb-0 drawer-content-text">{{ nav_link.SubText }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>

                            {% endfor %}
                        </div>

                        <!-- CENTER COLUMN -->
                        <div class="col-md-3 col-12">
                            {% for content_section in center_column %}
                                {% if content_section.URL %}
                                    <div class="mb-4">
                                        <a href="{{content_section.URL}}" class="{{ content_section.ClassValue }} mb-4">{{content_section.Title}}</a>
                                    </div>
                                {% else %}
                                    <div class="mb-4">
                                        <span class="{{ content_section.ClassValue }}">{{content_section.Title}}</span>
                                    </div>
                                {% endif %}


                                <div>
                                    {% for nav_link in content_section.SubNav %}
                                        
                                        <div class="mb-3 row">
                                            <div class="col-2 icon-div-box">
                                                {% include icons_navbar.html type=nav_link.Icon %}
                                            </div>
                                            <div class="col">
                                                <div class="row mb-2">
                                                    <a href='{{ nav_link.URL }}' class="{{ nav_link.ClassValue }}">{{ nav_link.Name }}</a>
                                                </div>


                                                {% for sub_nav_link in nav_link.SubLinks %}
                                                    <div class="row mb-1 ps-3">
                                                        <a href='{{ sub_nav_link.URL }}' class="drawer-content-text-link">{{ sub_nav_link.Name }}</a>
                                                    </div>
                                                {% endfor %}



                                            </div>
                                        </div>

                                    {% endfor %}
                                </div>
                            {% endfor %}
                        </div>

                        <!-- RIGHT COLUMN -->
                        <div class="col-md-4 offset-md-1 col-12">
                            {% for content_section in right_column %}
                                {% if content_section.URL %}
                                    <div class="mb-4">
                                        <a href="{{content_section.URL}}" class="{{ content_section.ClassValue }} mb-4">{{content_section.Title}}</a>
                                    </div>
                                {% else %}
                                    <div class="mb-4">
                                        <span class="{{ content_section.ClassValue }}">{{content_section.Title}}</span>
                                    </div>
                                {% endif %}

                                <div>
                                    {% for nav_link in content_section.SubNav %}
                                        
                                        <div class="mb-2 row">
                                            <div class="col-2 icon-div-box">
                                                {% include icons_navbar.html type=nav_link.Icon %}
                                            </div>
                                            <div class="col">
                                                <div class="row mb-2">
                                                    <a href='{{ nav_link.URL }}' class="{{ nav_link.ClassValue }}">{{ nav_link.Name }}</a>
                                                </div>
                                            </div>
                                        </div>

                                    {% endfor %}
                                </div>
    
                                <div class="px-5">
                                    <a href="/benchmarks/" class="btn button-light">View Data</a>
                                </div>
                                
                            {% endfor %}
                        </div>


                    </div>


                </div>

                <!-- BOTTOM TRIANGLE ICON -->
                <div class="position-relative">
                    <div class="nav-drawer-triangle position-absolute bottom-0 end-0" >
                        {% include icons_navbar.html type=data_platform_dropdown.BottomTriangleIcon %}
                    </div>
                </div>
    
            </div>
        </div>
    

        {% assign data_blog_dropdown = site.data.header_navmenu_datafile.Desktop['Blog']  %}
        {% assign left_column = data_blog_dropdown['LeftColumn'] %}
        {% assign right_column = data_blog_dropdown['RightColumn'] %}

        {% assign paginator = paginator %}
        {% assign featured_post = site.posts | where: "featured_blog_post", true | first %}
        <!-- BLOG -->
        <div class="accordion-item">
            <div id="navbarToggleExternalContent-Blog"  class="accordion-collapse collapse" data-bs-parent="#accordion-megamenu" >
                <div class="accordion-body nav-drawer-body-tall">
                    <div class="row mb-5">
    
                        <!-- LEFT COLUMN -->
                        <div class="col-md-8 col-12">

                            {% for content_section in left_column %}
                                {% if content_section.URL %}
                                    <div class="mb-4">
                                        <a href="{{content_section.URL}}" class="{{ content_section.ClassValue }} mb-4">{{content_section.Title}}</a>
                                    </div>
                                {% else %}
                                    <div class="mb-4">
                                        <span class="{{ content_section.ClassValue }}">{{content_section.Title}}</span>
                                    </div>
                                {% endif %}

                                <!-- TABLE -->
                                <table class="table table-hover blog-table shadow">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="megamenu-table-heading">{{ content_section.TableHeading }}</th>
                                            <th scope="col" class="megamenu-table-heading"></th>
                                        </tr>
                                    </thead>
                                    <tbody class="table-group-divider">
                                        {% for post in site.posts limit: content_section.NumberPostsShown %}
                                            {% if post != featured_post %}
                                                {% assign post_metadata_date_string = "" %}

                                                <!-- Date -->
                                                {% assign post_metadata_date_string = post_metadata_date_string | append: post.date | date: "%b %d, %Y" %}
                            

                                                <tr>
                                                    <td scope="row"><a class="megamenu-blog-title" href="{{  post.url }}" >{{ post.title }}</a></td>
                                                    <td class="megamenu-blog-date">{{ post_metadata_date_string }}</td>
                                                </tr>

                                            {% endif %}
                                        {% endfor %}
                                    </tbody>
                                </table>


                            {% endfor %}


                        </div>



                        <!-- RIGHT COLUMN -->
                        <div class="col-lg-4 col-12">

                            {% for content_section in right_column %}
                                {% if content_section.URL %}
                                    <div class="mb-4">
                                        <a href="{{content_section.URL}}" class="{{ content_section.ClassValue }} mb-4">{{content_section.Title}}</a>
                                    </div>
                                {% else %}
                                    <div class="mb-4">
                                        <span class="{{ content_section.ClassValue }}">{{content_section.Title}}</span>
                                    </div>
                                {% endif %}

                                <!-- FEATURED POST -->
                                {% assign post_metadata_string = "" %}
                                <!-- Date -->
                                {% assign post_metadata_string = post_metadata_string | append: featured_post.date | date: "%b %d %Y" %}
                
                                {% assign post_metadata_string = post_metadata_string | append: " &bull; " %}
                                <!-- Categories -->
                                {% for category in featured_post.categories %}
                                    {% assign post_metadata_string = post_metadata_string | append: category %}
                                    {% if forloop.length > 1 and forloop.last != true %}
                                        {% assign post_metadata_string = post_metadata_string | append: ", " %}
                                    {% endif %}
                                {% endfor %}

                                <div class="card border shadow-sm rounded bg-body-secondary">
                                    <img class="card-img object-fit-cover navbar-featured-post-image" src="{{featured_post.featured_image | default: '/assets/img/blog-hero-placeholder.png'}}" alt="Card image cap">
                                    <div class="card-body">
                                        <div class="p-0">
                                            <span class="navbar-featured-post-title">{{ featured_post.title }}</span>
                                            <a href="{{  featured_post.url }}" class="stretched-link"></a>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}

                        </div>
                    </div>


                </div>
                <!-- BOTTOM TRIANGLE ICON -->
                <div class="position-relative">
                    <div class="nav-drawer-triangle position-absolute bottom-0 end-0" >
                        {% include icons_navbar.html type=data_blog_dropdown.BottomTriangleIcon %}
                    </div>
                </div>
    
            </div>
        </div>
    

        {% assign data_community_dropdown = site.data.header_navmenu_datafile.Desktop['Community']  %}
        {% assign left_column = data_community_dropdown['LeftColumn'] %}
        {% assign right_column = data_community_dropdown['RightColumn'] %}
        <!-- COMMUNITY -->
        <div class="accordion-item">
            <div id="navbarToggleExternalContent-Community" class="accordion-collapse collapse" data-bs-parent="#accordion-megamenu"  >
                <div class="accordion-body nav-drawer-body-tall">
                    <div class="row mb-5">
    
                        <!-- LEFT COLUMN -->
                        <div class="col-md-8 col-12">

                            {% for content_section in left_column %}
                                {% if content_section.URL %}
                                    <div class="mb-4">
                                        <a href="{{content_section.URL}}" class="{{ content_section.ClassValue }} mb-4">{{content_section.Title}}</a>
                                    </div>
                                {% else %}
                                    <div class="mb-4">
                                        <span class="{{ content_section.ClassValue }}">{{content_section.Title}}</span>
                                    </div>
                                {% endif %}

                                <div class="row row-cols-1 row-cols-lg-2">    
                                    {% for nav_link in content_section.SubNav %}
                                        <div class="row mb-4">
                                            <div class="col-4 icon-div-box">
                                                {% include icons.html type=nav_link.Icon class='object-fit-contain' %}
                                            </div>
                                            <div class="col pe-0">


                                                {% if nav_link.ID %}
                                                    <div class="row mb-1">
                                                        <a id='{{ nav_link.ID }}' href='{{ nav_link.URL }}' class="{{ nav_link.ClassValue }}">{{ nav_link.Name }}</a>
                                                    </div>
                                                {% else %}
                                                    <div class="row mb-1">
                                                        <a href='{{ nav_link.URL }}' class="{{ nav_link.ClassValue }}">{{ nav_link.Name }}</a>
                                                    </div>
                                                {% endif %}

                                                <div class="row">
                                                    <span class="mb-0 pe-0 drawer-content-text">{{ nav_link.SubText }}</span>
                                                </div>



                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
        
                            {% endfor %}
                        </div>

                        <!-- RIGHT COLUMN -->
                        <div class="col-lg-4 col-12">

                            {% for content_section in right_column %}
                                {% if content_section.URL %}
                                    <div class="mb-4">
                                        <a href="{{content_section.URL}}" class="{{ content_section.ClassValue }} mb-4">{{content_section.Title}}</a>
                                    </div>
                                {% else %}
                                    <div class="mb-4">
                                        <span class="{{ content_section.ClassValue }}">{{content_section.Title}}</span>
                                    </div>
                                {% endif %}

                                <div class="card mb-4 card-img rounded">
                                    <img src="{{ content_section.OpenSearchCon_HeroBanner }}" class="h-100" alt="{{ content_section.OpenSearchCon_ButtonText}}">
                                        <a href="{{ content_section.OpenSearchCon_Link }}" class="stretched-link"></a>
                                </div>

                                <div class="row mb-1">
                                    <span class="drawer-content-subheader">{{ content_section.Name }}</span>
                                </div>
                                {% for nav_link in content_section.SubNav %}
                                    <div class="row mb-1 ps-2">
                                        <a href='{{ nav_link.URL }}' class="drawer-content-text-link">{{ nav_link.Name }}</a>
                                    </div>
                                {% endfor %}
                            {% endfor %}

                        </div>


    
                    </div>



    
                </div>

                <!-- BOTTOM TRIANGLE ICON -->
                <div class="position-relative">
                    <div class="nav-drawer-triangle position-absolute bottom-0 end-0" >
                        {% include icons_navbar.html type=data_community_dropdown.BottomTriangleIcon %}
                    </div>
                </div>
    
            </div>
        </div>    
    
        

        {% assign data_documentation_dropdown = site.data.header_navmenu_datafile.Desktop['Documentation']  %}
        {% assign left_column = data_documentation_dropdown['LeftColumn'] %}
        {% assign right_column = data_documentation_dropdown['RightColumn'] %}
        <!-- DOCUMENTATION -->
        <div class="accordion-item">
            <div id="navbarToggleExternalContent-Documentation" class="accordion-collapse collapse" data-bs-parent="#accordion-megamenu"   >
                <div class="accordion-body nav-drawer-body-med">
                    
                    <div class="row mb-5">
                        <!-- LEFT COLUMN -->
                        <div class="col-md-8 col-12">

                            {% for content_section in left_column %}
                                {% if content_section.URL %}
                                    <div class="mb-4">
                                        <a href="{{content_section.URL}}" class="{{ content_section.ClassValue }}">{{content_section.Title}}</a>
                                    </div>
                                {% else %}
                                    <div class="mb-4">
                                        <span class="{{ content_section.ClassValue }}">{{content_section.Title}}</span>
                                    </div>
                                {% endif %}
                                
                                <div class="row row-cols-1 row-cols-lg-2 g-4">    
                                    {% for nav_link in content_section.SubNav %}
                                        <div class="col">
                                            <div class="row mb-4">
                                                <div class="col-4 icon-div-box">
                                                    {% include icons_navbar.html type=nav_link.Icon class='object-fit-contain' %}
                                                </div>
                                                <div class="col-8">
                                                    <div class="row mb-1">
                                                        <a href='{{ nav_link.URL }}' class="{{ nav_link.ClassValue }}">{{ nav_link.Name }}</a>
                                                    </div>
                                                    <div class="row">
                                                        <span class="mb-0 drawer-content-text">{{ nav_link.SubText }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    {% endfor %}
                                </div>
        
                            {% endfor %}
                        </div>

                        <!-- RIGHT COLUMN -->
                        <div class="col-lg-4 col-12">

                            {% for content_section in right_column %}


                                <div class="card card-img rounded border border-0 pe-5 mb-2">
                                    <img src="{{ content_section.Roadmap_HeroBanner }}" class="h-100 card-img " alt="{{ content_section.Title }}">
                                        <a href="{{ content_section.Roadmap_Link }}" class="stretched-link"></a>
                                </div>


                                {% if content_section.URL %}
                                    <div class="row mb-1">
                                        <a href="{{content_section.URL}}" class="{{ content_section.ClassValue }}">{{content_section.Title}}</a>
                                    </div>
                                    <div class="row pe-5">
                                        <span class="mb-0 drawer-content-text">{{ content_section.SubText }}</span>
                                    </div>
                                {% else %}
                                    <div class="mb-1">
                                        <span class="{{ content_section.ClassValue }}">{{content_section.Title}}</span>
                                    </div>
                                    <div class="row pe-5">
                                        <span class="mb-0 drawer-content-text">{{ content_section.SubText }}</span>
                                    </div>
                                {% endif %}   
                            {% endfor %}

                        </div>

                    </div>
                </div>

                <!-- BOTTOM TRIANGLE ICON -->
                <div class="position-relative">
                    <div class="nav-drawer-triangle position-absolute bottom-0 end-0" >
                        {% include icons_navbar.html type=data_documentation_dropdown.BottomTriangleIcon %}
                    </div>
                </div>
    
            </div>
        </div>    
    

        {% assign data_search_dropdown = site.data.header_navmenu_datafile.Desktop['Search']  %}
        <!-- SEARCH -->
        <div class="accordion-item">
            <div id="navbarToggleExternalContent-Search" class="accordion-collapse collapse" data-bs-parent="#accordion-megamenu"  >
                <div class="accordion-body nav-drawer-body-short">
                    <div class="row mb-5">
                        <!-- LEFT COLUMN -->
                        <div class="col-md-11 col-12">
                            <div class="search-wrapper ms-4 my-5">
                                <div class="top-banner-search mb-5">
                                    <div class="top-banner-search--field-with-results">
                                        <div class="top-banner-search--field-with-results--field">
                                            <div class="top-banner-search--field-with-results--field--wrapper">
                                                <div class="top-banner-search--field-with-results--field--wrapper--search-component">
                                                    <div class="top-banner-search--field-with-results--field--wrapper--search-component--input-wrap">
                                                        <div class="input-group mb-5 top-banner-search--field-with-results--field--wrapper--search-component--search-input search-form">
                                                            <span class="input-group-text search-form-icon bg-transparent border-end-0">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="top-banner-search--field-with-results--field--wrapper--search-component--search-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
                                                                    <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                                                                </svg>
                                                            </span>
                                                            <input 
                                                                type="text" 
                                                                id="search-input" 
                                                                class="form-control border-start-0 search-form search-form-input" 
                                                                placeholder="Search" 
                                                                aria-label="Search" 
                                                                aria-describedby="search-input-form"
                                                                data-docs-version="latest" 
                                                                autocomplete="off"
                                                            >
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="top-banner-search--overlay"></div>
                                </div>

                                <!-- SEARCH RESULTS -->
                                <div class="div search-results-wrapper">
                                    <div class="row mb-5">
                                        <div id="search-results" class="top-banner-search--field-with-results--field--wrapper--search-component--search-results">
                                            <div class="top-banner-search--field-with-results--field--wrapper--search-component--search-results-wrapper">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- BOTTOM TRIANGLE ICON -->
                <div class="position-relative">
                    <div class="nav-drawer-triangle position-absolute bottom-0 end-0" >
                        {% include icons_navbar.html type=data_search_dropdown.BottomTriangleIcon %}
                    </div>
                </div>
    
            </div>
        </div>
    </div>

</div>

<script type="module">

    // Initialize the calendar view menu item to target the current month's calendar
    document.addEventListener('DOMContentLoaded', () => {

        let eventsLinkSelector = document.getElementById('events-link');
        let currentDate = new Date();
        let month = currentDate.toLocaleString('default', { month: 'long' });
        let year = currentDate.getFullYear();
        eventsLinkSelector.setAttribute("href", `/events/calendar/${year}/${month.toLowerCase()}/`);

    });
</script>