---

// interface Routes {
//   frontmatter.path: string;
//   name: string;
// }frontmatter.

// import navbarJson from '../../public/jsonData/navbar.json'

// const navbarContent : Routes[] = navbarJson;

var navbarContent = await Astro.glob("../content/navbarRoute/*.md");
---

<!-- web navbar -->
<div class="navbar">{
  navbarContent.map(route => (
    <a href={ route.frontmatter.path } class="text-blue-800">{ route.frontmatter.name }</a>
  ))
}</div>


<!--  hamburger menu -->
<div class="hamburger-navbar">
  <nav>
    <div class="ham-menu">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </nav>
</div>
<div class="off-screen-menu">
  {
    navbarContent.map(route => (
      <a href={ route.frontmatter.path } class="text-blue-800">{ route.frontmatter.name }</a>
    ))
  }
</div>
<style>
  .hamburger-navbar{
    position: fixed;
    right: 0;
    display: none;
    z-index: 1001;
  }
  .off-screen-menu{
    background-color: orange;
    height: 100%;
    display: none;
    width: 100%;
    top: 20%;
    position: sticky;
    right: -450px;
    flex-direction: column;
    justify-content: center;
    font-size: 3rem;
    z-index: 1001;
  }

  .off-screen-menu a{
    font-size: 2.9vh;
    text-decoration: none;
    color: black;
    /* color: blue; */
    font-weight: 500;
    padding: 1vh 4vh;
  }
  .off-screen-menu a:hover{
    background-color: rgb(5, 5, 95);
    color: white;
  }

  .off-screen-menu a.active-link {
    color: red;
    font-size: 3vh;
  }

  .off-screen-menu:active{
    right: 0;
  }
  .active{
    display: flex;
  }

  nav{
    display: block;
    background-color: orange;
    padding: 1rem;
    width: 100vw;
    z-index: 1000;
  }
  .ham-menu{
    height: 40px;
    width: 40px;
    margin-left: auto;
    position: sticky;
    top: 0;
    cursor: pointer;
  }

  .ham-menu span{
    height: 5px;
    width: 100%;
    background-color: #6f86ff;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    /* transition: .3s ease; */
    transform: translate(-50%, -50%);
  }

  .ham-menu span:nth-child(1){
    top: 25%;
  }
  .ham-menu span:nth-child(3){
    top: 75%;
  }

  .ham-menu.active span:nth-child(1){
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .ham-menu.active span:nth-child(2){
    opacity: 0;
  }

  .ham-menu.active span:nth-child(3){
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .navbar {
    /* font-family: 'Roboto Slab', serif !important; */
    display: flex;
    justify-content: center;
    padding: 0;
    background-color: rgb(252, 230, 188);
    position: sticky;
    top: 0%; /* Add this line */
    z-index: 1000;
  } 
  .navbar a {
    font-size: 2.5vh;
    color: blue;
    font-weight:600;
    text-decoration: none;
    padding: 1.7vh 1.5vw;
  }
  .navbar a:hover{
    background-color: rgb(1, 1, 131);
    color: white;
  }
  .navbar a.active-link {
    color: red;
    font-size: 3vh;
  }

  @media screen and (max-width: 535px){
    nav{
      width: 100vh;
    }
    
  }

  @media screen and (max-width: 613px) {
    .container {
      width: 100%; /* Adjust as needed */
    }
    .navbar{
      padding: 0 10vw;
    }
  }

  @media screen and (max-width: 627px){
    .off-screen-menu{
      /* top: 17.5vh; */
      top: 14vh;
    }
  }
  @media screen and (min-width: 628px) and (max-width: 792px){
    .off-screen-menu{
      top: 17vw;
    }
  }
  @media screen and (min-width: 792px) and (max-width: 880px){
    .active{
      top: 16vw;
    }
  }
  @media screen and (min-width: 880px) and (max-width: 982px){
    nav{
      padding: 1rem;
      width: 100vw;
    }
    .active{
      top: 19vh;
    }
  }
  @media screen and (max-width: 982px){
    .navbar{
      display: none;
    }
    .hamburger-navbar{
      display: block;
    }
  }
  @media screen and (min-width: 982px){
    .off-screen-menu{
      display: none;
    }
  }

</style>

<script>


  // for hamburger menu
  const hamMenu = document.querySelector('.ham-menu');
  const offScreenMenu : Element | null = document.querySelector('.off-screen-menu');

  hamMenu?.addEventListener('click', () => {
    hamMenu.classList.toggle('active');
    if(offScreenMenu)
      offScreenMenu.classList.toggle('active');
    if(window.innerWidth >= 982){
      offScreenMenu?.classList.remove('active');
    }
  })


  // for active links
  function handleActiveLinks() {
    const webNavbarLinks = document.querySelectorAll('.navbar a');
    const offScreenNavbarLinks = document.querySelectorAll('.off-screen-menu a');
    var currentPathWithHash = window.location.pathname + window.location.hash;

    // this is for the web navbar
    webNavbarLinks.forEach(link=>{
      const linkPath = link.getAttribute('href');
      if(currentPathWithHash===linkPath){
        link.classList.add('active-link');
      }
      else{
        link.classList.remove('active-link');
      }
    })

    // this is for the off-screen navbar
    offScreenNavbarLinks.forEach(link=>{
      const linkPath = link.getAttribute('href');
      // console.log(linkPath);

      if(currentPathWithHash===linkPath){
        link.classList.add('active-link');
      }
      else{
        link.classList.remove('active-link');
      }
    })
  }

  // this is for the initial load
  document.addEventListener('DOMContentLoaded', () => {
    handleActiveLinks();
  });


  // this is for the hash change
  window.addEventListener('hashchange', () => {
    handleActiveLinks();
  });

</script>