<script>
let innerWidth

function dropdown(){

const innerWidth = window.innerWidth;
console.log(innerWidth);
if(innerWidth<1024){
   
    const check_element     = this.lastChild;
    
    const rotate_list       = document.querySelectorAll(".dd-symbol-clone");
    const rotate_element    = this.childNodes[0].children[0];

    console.log(rotate_element);

    var first_check = check_element.classList.contains("show-dropdown-content");
    const nodeList = document.querySelectorAll(".dropdown-content");
    
    if(first_check == true){
    check_element.classList.remove("show-dropdown-content");
    rotate_element.classList.toggle("rotate-symbol");
    
    }else{
      for (let i = 0; i < nodeList.length; i++) {
        const element = nodeList[i];
        element.classList.remove("show-dropdown-content");
        
      }
      for (let i = 0; i < rotate_list.length; i++) {
        const element = rotate_list[i];
        element.classList.remove("rotate-symbol");
      }

    check_element.classList.add("show-dropdown-content");
    rotate_element.classList.add("rotate-symbol");
    }
  }

}

function hover(){
const innerWidth = window.innerWidth;
console.log(innerWidth);
if(innerWidth>1024){
    const check_element     = this.firstChild.lastChild;
    console.log(check_element);
    check_element.style.visibility = "visible";
  }
}

function hoverout(){
const innerWidth = window.innerWidth;
console.log(innerWidth);
if(innerWidth>1024){
    const check_element     = this.firstChild.lastChild;
    console.log(check_element);
    check_element.style.visibility = "hidden";
  }
}

  function hamburger(){
    const nodeList = document.querySelectorAll(".dropdown-content");
    for (let i = 0; i < nodeList.length; i++) {
    nodeList[i].classList.remove("show-dropdown-content");}
    var element = document.getElementById("card-navigation");
    element.classList.toggle("hidden");

    const spans = this.children;
    var first_check = spans[0].classList.contains("hamburger-swing-0");
    
    if(first_check == true){
      for (let i = 0; i < spans.length; i++)
      {spans[i].classList.remove("hamburger-swing-"+i);} 
      const rotate_list     = document.querySelectorAll(".dd-symbol");
      for (let i = 0; i < rotate_list.length; i++)
      {rotate_list[i].classList.remove("rotate-symbol");}     
      }else{
      for (let i = 0; i < spans.length; i++)
      {spans[i].classList.add("hamburger-swing-"+i);} }
}
</script>

<svelte:window bind:innerWidth />


<div class="hamburger_menu py-1 px-2 bg-secondary
            xs:px-6
            lg:hidden">

              <div id="hamburger" on:click={hamburger} on:keydown={hamburger} class="cursor-pointer">
                <span></span>
                <span></span>
                <span></span>
              </div>
</div>



<nav id="card-navigation" class="card-navigation hidden box ring-2 ring-primary/50 lg:block"> 

  <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
    {#if innerWidth > 1023}
    <a href="" class="nav-element-child xl:rounded-t-[.75rem] lg:rounded-t-lg xl:rounded-t-xl " >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
    {:else}
    <a href="javascript:void(0)" class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
    {/if}
    
    <ul class="dropdown-content energieasusweis-erstellen">
      {#if innerWidth < 1023}
      <li><a href="">Energieausweis erstellen</a></li>
      {/if}
      <li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis erstellen</a></li>
      <li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Bedarfsausweis erstellen</a></li>
      <li><a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe erstellen</a></li>
      <li><a href="/energieausweis-erstellen/bedarfsausweis-gewerbe/">Bedarfsausweis Gewerbe erstellen</a></li>
    </ul>
  </div>

  <div class="nav-element">
    <a class="no-dropdown nav-element-child" href="/welcher-energieausweis">Welcher Energieausweis?</a>
  </div>

<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
  <a href="javascript:void(0)" class="nav-element-child">Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
    <ul class="dropdown-content verbrauchsausweis">
      {#if innerWidth < 1023}
      <li><a href="index">Verbrauchsausweis</a></li>
      {/if}
      <li><a href="index">Verbrauchsausweis Wohngebäude</a></li>
      <li><a href="index">Verbrauchsausweis online erstellen</a></li>
      <li><a href="index">Häufige Fragen zum Verbrauchsausweis</a></li>
      <li><a href="index">Statistiken zum Verbrauchsausweis Wohngebäude</a></li>
      <li><a href="index">Verbrauchsausweis Gewerbe</a></li>
      <li><a href="index">Verbrauchsausweis Gewerbe online erstellen</a></li>
      <li><a href="index">Häufige Fragen zum Verbrauchsausweis Gewerbe</a></li>
      <li><a href="index">Statistiken zum Verbrauchsausweis Gewerbe</a></li>
  </div>

<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
  <a href="javascript:void(0)" class="nav-element-child">Bedarfsausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
    <ul class="dropdown-content bedarfsausweis">
      {#if innerWidth < 1023}
      <li><a href="index">Bedarfsausweis</a></li>
      {/if}
      <li><a href="index">Bedarfsausweis Wohngebäude</a></li>
      <li><a href="index">Bedarfsausweis online erstellen</a></li>
      <li><a href="index">Häufige Fragen zum Bedarfsausweis</a></li>
      <li><a href="index">Statistiken zum Bedarfsausweis Wohngebäude</a></li>
      <li><a href="index">Bedarfsausweis Gewerbe</a></li>
      <li><a href="index">Bedarfsausweis Gewerbe online erstellen</a></li>
      <li><a href="index">Häufige Fragen zum Bedarfsausweis Gewerbe</a></li>
      <li><a href="index">Statistiken zum Bedarfsausweis Gewerbe</a></li>
    </ul>
</div>


<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
  <a href="javascript:void(0)" class="nav-element-child">Energieausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
  <ul class="dropdown-content energieausweis">
    {#if innerWidth < 1023}
    <li><a href="index">Energieausweis</a></li>
    {/if}
    <li class=""><a href="index">Energieausweis Pflicht</a></li>
    <li class=""><a href="index">Energieausweis Kosten</a></li>
    <li class=""><a href="index">Energieausweis Haus</a></li>
  </ul>
</div>

<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/enev-zusammenfassung">EnEV Zusammenfassung - Archiv</a>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/energieausweis-aussteller">Energieausweis Aussteller</a>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/kundenbewertungen">Kundenbewertungen</a>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/faq">FAQ</a>
</div>
<div class="nav-element">
  <a class="no-dropdown nav-element-child lg:!rounded-b-lg xl:!rounded-b-xl"href="/fuer-entwickler">Für Entwickler</a>
</div>


</nav>


<style>

.dd-symbol::before{
  content:'❯';
  font-size:0.95rem;
  position:absolute;
  top:0px;
  left:-7px;
  animation-name: flim;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.dd-symbol{visibility: hidden;}

.dd-symbol::after{
  content:'❯';
  font-size:0.95rem;
  position:absolute;
  top:0px;
  right:-7px;
  animation-name: flim;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

  @keyframes flim{
  0%   {opacity: 0;}
  16.66%  {opacity: 0.25;}
  33.32%  {opacity: 0.5;}
  49.98%  {opacity: 0.75;}
  66.64% {opacity: 0.5;}
  83.33% {opacity: 0.25;}
  100% {opacity: 0;}
}



</style>