<%
' --- START OF MENU TEMPLATES --- '
' (SS,13/8/14) for use with Bootstrap, individual categories are listed
' (SS,07/06/24) added Cookie Settings to ShowMenuFooter
' (SS,18/06/24) Bootstrap 5 changes
' (SS,18/06/24) this template file renamed from inc-template-category-menu.asp to inc-template-menu.asp 
' (SS,14/05/26) HyperFlight version (used VDK version as the foundation)

' (SS,6/3/24) new version
' (SS,3/6/24) changed wording Cast Iron Radiators to Cast Iron Radiator Centre
' (SS,1/8/24) added flex-wrap for correct wrapping to prevent horizontal scrollbars
Sub ShowMenuHeader_old
%>
<!-- START OF MENU -->
          
    <nav class="navbar navbar-expand-md main-menu">
      <div class="container px-0">

        <a class="navbar-brand d-md-none" href="/">HyperFlight</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerMain" aria-controls="navbarTogglerMain" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    
        <div class="navbar-collapse collapse" id="navbarTogglerMain">
          <ul class="navbar-nav flex-wrap">
<%
End Sub

' (SS,12/6/26) modified to show logo instead of just text, added mobileHeaderControls
Sub ShowMenuHeader_old2
%>
<!-- START OF MENU -->

    <nav class="navbar navbar-expand-md main-menu">
      <div class="container px-0">

        <a class="navbar-brand mobile-menu-brand d-md-none" href="/">
          <img class="mobile-menu-logo" src="/images/logo.png" alt="<%=GetStoreName%>">
        </a>
        
        <div id="mobileBasketSlot" class="mobile-basket-slot d-md-none"></div>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerMain" aria-controls="navbarTogglerMain" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-collapse collapse" id="navbarTogglerMain">

          <div id="mobileHeaderControls"
               class="mobile-header-controls d-md-none">
          </div>

          <ul class="navbar-nav flex-wrap">
<%
End Sub

' (SS,12/6/26) modified to show mobile header controls
' (SS,15/6/26) compact mobile ecommerce header
Sub ShowMenuHeader
%>
<!-- START OF MENU -->

<nav class="navbar navbar-expand-md main-menu">
  <div class="container px-0">

    <div class="mobile-topbar d-md-none">

      <div class="mobile-topbar-left">

        <button class="navbar-toggler mobile-menu-toggle"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarTogglerMain"
                aria-controls="navbarTogglerMain"
                aria-expanded="false"
                aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <button class="btn mobile-search-toggle"
                type="button"
                aria-expanded="false"
                aria-label="Search">
          <i class="fa-regular fa-magnifying-glass"
             aria-hidden="true"></i>
        </button>

      </div>

      <a class="mobile-menu-brand" href="/">
        <img class="mobile-menu-logo"
             src="/images/logo.png"
             alt="<%=GetStoreName%>">
      </a>

      <div class="mobile-topbar-right">

        <div id="mobileCurrencySlot"
             class="mobile-topbar-currency">
        </div>

        <div id="mobileBasketSlot"
             class="mobile-topbar-actions">
        </div>

      </div>

    </div>


    <div id="mobileSearchPanel"
         class="collapse mobile-search-panel d-md-none">
      <div id="mobileSearchSlot" class="mobile-search-slot"></div>
    </div>

    <div class="navbar-collapse collapse" id="navbarTogglerMain">

      <div id="mobileHeaderControls"
           class="mobile-header-controls d-md-none">
      </div>

      <ul class="navbar-nav flex-wrap">
<%
End Sub

' (SS,18/7/24) Bootstrap 5 version, removed Brexit Update and Useful Links
' (SS,20/5/26) Removed dropdown-menu-end after dropdown-menu for HyperFlight (may need to add back)
Sub ShowMenuFooter
%>
            <li class="nav-item dropdown">
              <a href="#" class="nav-link dropdown-toggle text-black" role="button" data-bs-toggle="dropdown" aria-expanded="false">Help</a>              
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="products.asp?page=account" rel="nofollow">Account</a></li>                   
                <li><a class="dropdown-item" href="products.asp?page=contact">Contact Us</a></li>
                <li><a class="dropdown-item" href="products.asp?page=customerinfo">Customer Info</a></li>
                <li><a class="dropdown-item" href="products.asp?page=privacy">Privacy Policy</a></li>
              </ul>
            </li>
            
          </ul>          
          
        </div><!--/.nav-collapse -->          
 
      </div><!--container-->
    </nav>
   
<!-- END OF MENU -->
<%
 AddScript "ScriptMenuDropdownHover"
 AddScript "ScriptMobileHeaderControls"
End Sub

Sub ScriptMenuDropdownHover
%>
<script>
document.addEventListener("DOMContentLoaded", function () {
  // Only enable hover menus when the navbar is in desktop/expanded mode.
  const canHover = window.matchMedia("(hover: hover) and (pointer: fine) and (min-width: 768px)").matches;
  if (!canHover || !window.bootstrap) return;

  const menu = document.querySelector(".main-menu");
  if (!menu) return;

  const dropdowns = menu.querySelectorAll(".nav-item.dropdown");

  dropdowns.forEach(function (dropdown) {
    const toggle = dropdown.querySelector('[data-bs-toggle="dropdown"]');
    if (!toggle) return;

    const bsDropdown = bootstrap.Dropdown.getOrCreateInstance(toggle);

    dropdown.addEventListener("mouseenter", function () {
      // Close any other open dropdown first.
      menu.querySelectorAll(".dropdown-toggle.show").forEach(function (openToggle) {
        if (openToggle !== toggle) {
          bootstrap.Dropdown.getOrCreateInstance(openToggle).hide();
          openToggle.blur();
        }
      });

      bsDropdown.show();
      toggle.blur();
    });

    dropdown.addEventListener("mouseleave", function () {
      bsDropdown.hide();
      toggle.blur();
    });

    // On desktop, click the top-level category link to navigate.
    toggle.addEventListener("click", function (e) {
      const href = toggle.getAttribute("href");

      if (href && href !== "#") {
        window.location.href = href;
      }
    });
  });
});
</script>
<%
End Sub

' (SS,12/6/26) for mobile menu
' (SS,15/6/26) compact mobile header and separate search panel
' (SS,21/7/26) modified to proper focus on search box on iPhone
Sub ScriptMobileHeaderControls
%>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const desktopHeader = document.getElementById("desktopHeaderControls");
  const mobileSearch = document.getElementById("mobileSearchSlot");
  const mobileBasket = document.getElementById("mobileBasketSlot");
  const mobileCurrency = document.getElementById("mobileCurrencySlot");

  if (!desktopHeader || !mobileSearch || !mobileBasket || !mobileCurrency) {
    return;
  }

  const currency = document.querySelector(".header-currency");
  const search = document.querySelector(".header-search");
  const status = document.querySelector(".header-status");

  if (!currency || !search || !status) {
    return;
  }

  const mobileQuery = window.matchMedia("(max-width: 767.98px)");

  function updateHeaderPosition() {
    if (mobileQuery.matches) {
      mobileCurrency.appendChild(currency);
      mobileSearch.appendChild(search);
      mobileBasket.appendChild(status);
    }
    else {
      desktopHeader.appendChild(search);
      desktopHeader.appendChild(currency);
      desktopHeader.appendChild(status);
    }
  }

  updateHeaderPosition();

  if (mobileQuery.addEventListener) {
    mobileQuery.addEventListener("change", updateHeaderPosition);
  }
  else {
    mobileQuery.addListener(updateHeaderPosition);
  }

  const searchPanel = document.getElementById("mobileSearchPanel");
  const menuPanel = document.getElementById("navbarTogglerMain");
  const searchToggle = document.querySelector(".mobile-search-toggle");

  if (!searchPanel || !menuPanel || !searchToggle) {
    return;
  }

  function focusMobileSearchInput() {
    const searchInput = search.querySelector('input[name="search"]');

    if (!searchInput) {
      return;
    }

    try {
      searchInput.focus({ preventScroll: true });
    }
    catch (e) {
      searchInput.focus();
    }

    try {
      const len = searchInput.value.length;
      searchInput.setSelectionRange(len, len);
    }
    catch (e) {
      // Not critical. Some browsers/input types may not support this.
    }
  }

  function showMobileSearchPanel() {
    if (menuPanel.classList.contains("show") && window.bootstrap) {
      bootstrap.Collapse.getOrCreateInstance(
        menuPanel,
        { toggle: false }
      ).hide();
    }

    searchPanel.classList.add("show");
    searchToggle.setAttribute("aria-expanded", "true");

    focusMobileSearchInput();
  }

  function hideMobileSearchPanel() {
    searchPanel.classList.remove("show");
    searchToggle.setAttribute("aria-expanded", "false");
  }

  searchToggle.addEventListener("click", function (event) {
    event.preventDefault();

    if (searchPanel.classList.contains("show")) {
      hideMobileSearchPanel();
    }
    else {
      showMobileSearchPanel();
    }
  });

  menuPanel.addEventListener("show.bs.collapse", function () {
    if (searchPanel.classList.contains("show")) {
      hideMobileSearchPanel();
    }
  });
});
</script>
<%
End Sub

' (SS,18/5/15) ALevelNo can be used to provide tidy indenting depending on no
Sub ShowMenuSingle(ACaption, AHRef, ALevelNo)
%>
                <li><a class="dropdown-item" href="<%=AHRef%>"><%=ACaption%></a></li>
<%
End Sub

' (SS,18/5/15)
' (SS,6/3/24) replaced <li class="divider"></li> with this new Bootstrap 5 version
Sub ShowMenuDivider
%>
  <li><hr class="dropdown-divider"></li>
<%
End Sub


' (SS,18/5/15) ALevelNo can be used to provide tidy indenting depending on no
' (SS,21/5/20) Change to show "Ex-Stock Sale" in red
' (SS,18/7/24) Bootstrap 5, added class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false"                                                                                                            
' (SS,18/7/24) added mx-2
' (SS,20/5/26) Cleaned up for HyperFlight, removing the red style used for CIRC/VDK
' (SS,21/5/26) Added an additional All ... clickable item for the top level with divider
Sub ShowMenuDropdownHeader(ACaption, AHRef, ALevelNo)
%>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="<%=AHRef%>"><%=ACaption%></a>
              <ul class="dropdown-menu">
<%
End Sub

' (SS,18/5/15)
Sub ShowMenuDropdownFooter
%>
              </ul>
            </li>
<%
End Sub

' --- END OF MENU TEMPLATES --- '
If Not ForProductList Then
  'ShowMenuForCategories "" '"Cast Iron Radiators;Radiator Valves;Radiator Accessories"
  'ShowMenuForGroups ""
  StartMultiMenu "CA"
  'AddMultiMenu "RC Gliders", "", ""  
  'AddMultiMenu "Electric RC Gliders", "", ""
 ' 'AddMultiMenu "Racers & Birds", "", ""
  'AddMultiMenu "Servos & Accessories", "Servos", ""
  'AddMultiMenu "Electronics", "", ""
  'AddMultiMenu "Batteries", "", ""
  'AddMultiMenu "Electric Motors & Acces's", "Electric Motors", ""
  'AddMultiMenu "Spinners & Props", "Spinners", ""
  'AddMultiMenu "Carbon Materials", "", ""
  
  AddMultiMenu "RC Models", "", ""  
  AddMultiMenu "Servos", "", ""
  AddMultiMenu "Electronics", "", ""
  AddMultiMenu "Powertrains", "", ""
  AddMultiMenu "Bags", "", ""
  AddMultiMenu "Materials", "", ""   
  AddMultiMenu "Other", "", "" 
  AddMultiMenu "Parts", "", ""
  
  'AddMultiMenu "Electric RC Gliders", "", ""
  'AddMultiMenu "Servos & Accessories", "Servos", ""
  
 ' AddMultiMenu "Batteries", "", ""
  'AddMultiMenu "Electric Motors & Acces's", "Electric Motors", ""
  'AddMultiMenu "Electric Motors & Acces's", "Powertrains", ""
  ' AddMultiMenu "Transport & Protection", "Bags", ""
  'AddMultiMenu "Carbon Materials", "Materials", ""  
  'AddMultiMenu "Other RC Products", "Other", "" 
  'AddMultiMenu "Replacement Parts", "Parts", ""  
  EndMultiMenu
  
Else
  Response.Write("<a href=""products.asp?cmd=cat"">Browse Products</a>")
End If

%>