
<header
  class="z-50 fixed top-0 left-0 w-full bg-[#E5DCD2]"
  data-component-type="Navigation"
>

  <!-- NAVBAR -->
  <nav
    class="lg:max-w-[90%] md:max-w-[95%] mx-auto px-5 h-[100px] flex items-center justify-between"
  >

    <!-- MOBILE MENU BUTTON -->
    <button
      id="menu-btn"
      class="md:hidden focus:outline-none"
    >
      <svg
        class="w-8 h-8"
        fill="none"
        stroke="#534931"
        stroke-width="2"
        viewBox="0 0 24 24"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>

    <a
      data-node="nav_logo_link"
      data-node-type="page_links"
      data-node-label="Logo Link"
      data-node-default="/"
      href="{{nav_logo_link}}"
      class="flex items-center"
    >
      <img
        data-node="nav_logo"
        data-node-type="file"
        data-node-label="Logo Image"
        data-node-default="../assets/Logo.png"
        src="{{nav_logo}}"
        class="w-[130px]"
        alt="Logo"
      />
    </a>

    <!-- DESKTOP NAV -->
    <ul class="hidden md:flex items-center space-x-8">

      <!-- HOME -->
      <li>
        <a
          data-node="nav_link_home"
          data-node-type="page_links"
          data-node-label="Nav Link Home"
          data-node-default="/"
          href="{{nav_link_home}}"
          class="text-[#B38E6A] text-[18px] font-bold"
        >
          <span
            data-node="nav_text_home"
            data-node-type="text"
            data-node-label="Nav Text Home"
            data-node-default="Home"
          >
            {{nav_text_home}}
          </span>
        </a>
      </li>

      <!-- ABOUT -->
      <li>
        <a
          data-node="nav_link_about"
          data-node-type="page_links"
          data-node-label="Nav Link About"
          data-node-default="/about"
          href="{{nav_link_about}}"
          class="text-[#534931] text-[18px]"
        >
          <span
            data-node="nav_text_about"
            data-node-type="text"
            data-node-label="Nav Text About"
            data-node-default="About"
          >
            {{nav_text_about}}
          </span>
        </a>
      </li>

      <!-- MENU -->
      <li>
        <a
          data-node="nav_link_menu"
          data-node-type="page_links"
          data-node-label="Nav Link Menu"
          data-node-default="/menu"
          href="{{nav_link_menu}}"
          class="text-[#534931] text-[18px]"
        >
          <span
            data-node="nav_text_menu"
            data-node-type="text"
            data-node-label="Nav Text Menu"
            data-node-default="Menu"
          >
            {{nav_text_menu}}
          </span>
        </a>
      </li>

      <!-- SERVICES -->
      <li>
        <a
          data-node="nav_link_services"
          data-node-type="page_links"
          data-node-label="Nav Link Services"
          data-node-default="/services"
          href="{{nav_link_services}}"
          class="text-[#534931] text-[18px]"
        >
          <span
            data-node="nav_text_services"
            data-node-type="text"
            data-node-label="Nav Text Services"
            data-node-default="Services"
          >
            {{nav_text_services}}
          </span>
        </a>
      </li>

      <!-- CONTACT -->
      <li>
        <a
          data-node="nav_link_contact"
          data-node-type="page_links"
          data-node-label="Nav Link Contact"
          data-node-default="/contact"
          href="{{nav_link_contact}}"
          class="text-[#534931] text-[18px]"
        >
          <span
            data-node="nav_text_contact"
            data-node-type="text"
            data-node-label="Nav Text Contact"
            data-node-default="Contact Us"
          >
            {{nav_text_contact}}
          </span>
        </a>
      </li>

      <!-- SOCIAL ICONS -->
      <li class="flex items-center gap-2">
        <img data-node="nav_social_1" data-node-type="file" data-node-default="../assets/Navicons/t.png" src="{{nav_social_1}}" class="w-6" />
        <img data-node="nav_social_2" data-node-type="file" data-node-default="../assets/Navicons/f.png" src="{{nav_social_2}}" class="w-6" />
        <img data-node="nav_social_3" data-node-type="file" data-node-default="../assets/Navicons/inst.png" src="{{nav_social_3}}" class="w-6" />
      </li>

    </ul>
  </nav>

  <!-- MOBILE MENU -->
  <div
    id="mobile-menu"
    class="fixed top-0 left-0 w-64 h-full bg-[#E5DCD2] -translate-x-full transition-transform duration-300 z-[900]"
  >

    <!-- MOBILE HEADER -->
    <div class="flex justify-between items-center px-6 py-4 border-b border-white">
      <span class="text-xl font-bold text-[#534931]">Menu</span>
      <button id="close-btn">
        <svg class="w-6 h-6" fill="none" stroke="#534931" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- MOBILE LINKS -->
    <ul class="flex flex-col space-y-6 mt-6 px-6">

       <!-- HOME -->
      <li>
        <a
          data-node="nav_link_home"
          data-node-type="page_links"
          data-node-label="Nav Link Home"
          data-node-default="/"
          href="{{nav_link_home}}"
          class="text-[#B38E6A] text-[18px] font-bold"
        >
          <span
            data-node="nav_text_home"
            data-node-type="text"
            data-node-label="Nav Text Home"
            data-node-default="Home"
          >
            {{nav_text_home}}
          </span>
        </a>
      </li>

      <!-- ABOUT -->
      <li>
        <a
          data-node="nav_link_about"
          data-node-type="page_links"
          data-node-label="Nav Link About"
          data-node-default="/about"
          href="{{nav_link_about}}"
          class="text-[#534931] text-[18px]"
        >
          <span
            data-node="nav_text_about"
            data-node-type="text"
            data-node-label="Nav Text About"
            data-node-default="About"
          >
            {{nav_text_about}}
          </span>
        </a>
      </li>

      <!-- MENU -->
      <li>
        <a
          data-node="nav_link_menu"
          data-node-type="page_links"
          data-node-label="Nav Link Menu"
          data-node-default="/menu"
          href="{{nav_link_menu}}"
          class="text-[#534931] text-[18px]"
        >
          <span
            data-node="nav_text_menu"
            data-node-type="text"
            data-node-label="Nav Text Menu"
            data-node-default="Menu"
          >
            {{nav_text_menu}}
          </span>
        </a>
      </li>

      <!-- SERVICES -->
      <li>
        <a
          data-node="nav_link_services"
          data-node-type="page_links"
          data-node-label="Nav Link Services"
          data-node-default="/services"
          href="{{nav_link_services}}"
          class="text-[#534931] text-[18px]"
        >
          <span
            data-node="nav_text_services"
            data-node-type="text"
            data-node-label="Nav Text Services"
            data-node-default="Services"
          >
            {{nav_text_services}}
          </span>
        </a>
      </li>

      <!-- CONTACT -->
      <li>
        <a
          data-node="nav_link_contact"
          data-node-type="page_links"
          data-node-label="Nav Link Contact"
          data-node-default="/contact"
          href="{{nav_link_contact}}"
          class="text-[#534931] text-[18px]"
        >
          <span
            data-node="nav_text_contact"
            data-node-type="text"
            data-node-label="Nav Text Contact"
            data-node-default="Contact Us"
          >
            {{nav_text_contact}}
          </span>
        </a>
      </li>

      <!-- SOCIAL ICONS -->
      <li class="flex items-center gap-2">
        <img data-node="nav_social_1" data-node-type="file" data-node-default="../assets/Navicons/t.png" src="{{nav_social_1}}" class="w-6" />
        <img data-node="nav_social_2" data-node-type="file" data-node-default="../assets/Navicons/f.png" src="{{nav_social_2}}" class="w-6" />
        <img data-node="nav_social_3" data-node-type="file" data-node-default="../assets/Navicons/inst.png" src="{{nav_social_3}}" class="w-6" />
      </li>

    </ul>
  </div>

</header>



  <script>

    //  <!-- Header Module -->

    // mobile menu
    const menuBtn = document.getElementById("menu-btn");
    const closeBtn = document.getElementById("close-btn");
    const mobileMenu = document.getElementById("mobile-menu");
    const overlay = document.getElementById("overlay");

    function toggleMenu() {
      mobileMenu.classList.toggle("-translate-x-full");
      overlay.classList.toggle("hidden");
    }

    menuBtn.addEventListener("click", toggleMenu);
    closeBtn.addEventListener("click", toggleMenu);
    overlay.addEventListener("click", toggleMenu);




    // active path set bg
    const links = document.querySelectorAll(".nav-link");
    const currentPage = window.location.pathname.split("/").pop();

    links.forEach(link => {
      if (link.getAttribute("href") === currentPage) {
        link.classList.add("bg-red-600", "px-3", "py-1", "rounded-md");
      }
    });


  </script>