<template>
  <div class="navbar bg-base-100 shadow-sm">
    <div class="container mx-auto" >
      <div class="flex-1">
        <a class=" "><a href="/"><div class=""><img class="h-20 w-64 animate-[bounce_1s_ease-in-out_3]" src="/img/tb-logo.png" alt=""/></div></a></a>
      </div>
      <div class="hidden md:flex py-2">
        <ul class="text-color-1 menu menu-horizontal px-1">
          <li tabindex="1"><a href="/educators">Educators</a></li>
          <li tabindex="2"><a href="/administrators">Administrators</a></li>
          <li tabindex="3" >
            <a class="hover:bg-blue-600 hover:text-white">Resources
              <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/></svg>
            </a>
            <ul class="z-50 p-1 bg-blue-700 text-white">
              <li><a href="/worksheets">Worksheets</a></li>
              <li><a href="/videos">Videos</a></li>
              <li><a href="/audiobooks"> Audio Books</a></li>
              <li><a href="/dailyplan"> Lesson Plan</a></li>
            </ul>
          </li>
          <li tabindex="4"><a href="/occassion">Occassion</a></li>
          <li tabindex="5"><a href="/themes">Themes</a></li>
          <li tabindex="6"><a href="/blog">Blog</a></li>
        </ul>
      </div>
      <div class="flex-none md:hidden">
        
        <!-- <button for="my-modal-4" class="btn btn-square btn-ghost">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button> -->


        <!-- <label for="my-modal-4" class="btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg> </label> -->

        <!-- Put this part before </body> tag -->
        <!-- <input type="checkbox" id="my-modal-4" class="modal-toggle" />
        <label for="my-modal-4" class="modal cursor-pointer">
          <label class="modal-box relative" for="">
            <div class="btn-group btn-group-vertical">
              <button class="btn btn-active">Button</button>
              <button class="btn">Button</button>
              <button class="btn">Button</button>
            </div>

            <div class="collapse">
              <input type="checkbox" class="peer" /> 
              <div class="collapse-title bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content">
                Click me to show/hide content
              </div>
              <div class="collapse-content bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content"> 
                <p>hello</p>
              </div>
            </div>

          </label>
        </label> -->

<div class="text-color-1 dropdown dropdown-bottom dropdown-end">
  <label tabindex="0" class="btn m-1"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg> </label>
  <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
    <li><a href="/educators">Educators</a></li>
    <li><a href="/administrators">Administrators</a></li>
    <details class="pl-2">
        <summary> Resources </summary>
        <div class="content">
          <li><a href="/worksheets">Worksheets</a></li>
          <li><a href="/videobooks">Video Books</a></li>
          <li><a href="/audiobooks"> Audio Books</a></li>        </div>
    </details>
    <li><a href="/occassion">Occassion</a></li>
    <li><a href="/themes">Themes</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</div>

      </div>
    </div>
    




</div>
</template>

<style>
.text-color-1 {
  color:#7C4C23;
}
</style>