{%load static%}
<style>
section {
  scroll-padding: 200px;
}
</style>
<!--  -->
<nav>
  <a href="/home.html">
  <div class="logo">
            <div>
              <img
              class="nitLogo"
              src="{% static 'assets/images/bamuLogoNew.png' %}"
              alt="Logo"
            />
          </div>
            <div class="logo-text">B.A.M.U</div>
          </div>
        </a>

        <ul id="menu-ul">
          <div class="close"></div>
            <li><a href='/home.html' class="temp {% if 'home' in segment %} active {% endif %}" id="homePage">Home</a></li>
            <li><a href='/about.html' class="{% if 'about' in segment %} active {% endif %}">About</a></li>
            <li><a href='/contact.html' class="{% if 'contact' in segment %} active {% endif %}">Contact</a></li>
            <div class="btn-responsive-container">
              <a href="/home.html#get-started">
                <button class="button-57" id="get-started-btn" role="button"><span class="text">Get Started</span><span>Fill Application</span></button>
              </a>
                 <a href="{% url 'logoutuser' %}">

                  <button class="button-57 logout-btn" role="button"><span class="text">Logout</span><span><i class="fa fa-sign-out"></i></span></button>
                </a>
            </div>
            <div class="user-responsive"><i class="fa fa-user"></i> {{ user.username }}</div>
          </ul>
          <menu>
            <menuitem>
              <div class="user-details">
               <span class="username">{{ user.username }}</span>
               <i class="fa fa-angle-double-down"></i>
              </div>
              <menu>
                <menuitem> <a href="/home.html#get-started">
                  <button class="button-57" role="button" id="get-started-menu-item"><span class="text">Get Started</span><span>Fill Application</span></button>
                </a></menuitem>
                <menuitem>   <a href="{% url 'logoutuser' %}">

                    <button class="button-57 logout-btn" role="button"><span class="text">Logout</span><span><i class="fa fa-sign-out"></i></span></button>
                  </a></menuitem>
          </menu>
        </menu>
          <div class="burger-container">
            <div class="bars"></div>
          </div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

<script>
  const open = document.querySelector('.burger-container');
		const close = document.querySelector('.close');
    const ulMenu = document.getElementById('menu-ul')
    const homePage = document.getElementById('homePage')
		var tl = gsap.timeline({ defaults: { duration: 0.8, ease: 'expo.inOut' } });
		open.addEventListener('click', () => {
			if (tl.reversed()) {
				tl.play();
			} else {
				tl.to('nav ul', { right: 0 })
					.to('nav ul', { height: '100vh' }, '-=.1')
					.to('nav ul li a', { opacity: 1, pointerEvents: 'all', stagger: .2 }, '-=.8')
					.to('.close', { opacity: 1, pointerEvents: 'all' }, "-=.8")
			}
		});

		close.addEventListener('click', () => {
      tl.reverse();   
      tl.eventCallback('onReverseComplete', () => {
            ulMenu.style.height = "fit-content"
        });         
		});


    const getStartedButton = document.getElementById("get-started-btn");
    const getStartedButtonMenuItem = document.getElementById("get-started-menu-item")
    getStartedButton.addEventListener('click', () => {
      tl.reverse();   
      tl.eventCallback('onReverseComplete', () => {
            ulMenu.style.height = "fit-content"
            homePage.classList.add('active');
          });

		});
    getStartedButtonMenuItem.addEventListener('click', () => {
      setTimeout(()=>{
      const currentURL = window.location.href;
        if (currentURL.includes('home.html#get-started')) {
    homePage.classList.add('active');

    };
    }, 500)
		});

    setTimeout(()=>{
      const currentURL = window.location.href;
        if (currentURL.includes('home.html#get-started')) {
    homePage.classList.add('active');

    };
    }, 1000)

</script>