<template>
  <!--
    This example requires updating your template:

    ```
    <html class="h-full bg-gray-100">
    <body class="h-full">
    ```
  -->
  <div class="min-h-full">
    <Disclosure as="nav" class="bg-dark-grey fixed z-50 w-full top-0" v-slot="{ open }">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="flex h-16 items-center justify-between">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-slate-700" href="/">
                <img class="w-32 h-8 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="@/assets/img/logo2.png" alt="" width="40" height="35"/>
              </a>
            </div>
            <ul class="flex lg:flex-row list-none lg:ml-auto">
              <li class="nav-item inline">
                <a href="https://www.facebook.com/medihand" class="px-3 py-2 flex items-center text-xs uppercase font-bold text-light-grey hover:text-white" target="_blank">
                  <i class="fab fa-facebook-square text-lg leading-lg text-slate-400"></i>
                </a>
              </li>
              <li class="nav-item inline">
                <a href="https://twitter.com/medihand" class="px-3 py-2 flex items-center text-xs uppercase font-bold text-light-grey hover:text-white" target="_blank">
                  <i class="fab fa-twitter text-lg leading-lg text-slate-400"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="hidden md:block">
            <div class="flex items-baseline space-x-4">
              <Menu as="div" class="relative ml-3" v-for="item in navigation" :key="item.name">
                  <router-link :to="item.href" :class="[item.current ? 'bg-dark-grey text-white' : 'text-light-grey hover:bg-medium-grey hover:text-white', 'px-3 py-2 rounded-md text-sm font-medium']" :aria-current="item.current ? 'page' : undefined">
                    {{ item.name }}
                  </router-link>
              </Menu>
            </div>
          </div>
          <div class="hidden md:block">
            <div class="ml-4 flex items-center md:ml-6">
              <div class="navbar-end">
                <router-link to="/login">
                  <a class="btn">Login</a>
                </router-link>
              </div>
            </div>
          </div>
          <!-- <div class="hidden md:block">
            <div class="ml-4 flex items-center md:ml-6">
              <div class="navbar-end">
                <router-link to="/register">
                  <a class="btn">Register</a>
                </router-link>
              </div>
            </div>
          </div> -->
          <div class="-mr-2 flex md:hidden">
            <!-- Mobile menu button -->
            <DisclosureButton class="inline-flex items-center justify-center rounded-md bg-dark-grey p-2 text-medium-grey hover:bg-dark-grey hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-dark-grey">
              <span class="sr-only">Open main menu</span>
              <Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
              <XMarkIcon v-else class="block h-6 w-6" aria-hidden="true" />
            </DisclosureButton>
          </div>
        </div>
      </div>

      <DisclosurePanel class="md:hidden">
        <div class="space-y-1 px-2 pt-2 pb-3 sm:px-3">
          <router-link :to="item.href" v-for="item in navigation" :key="item.name" >
            <Menu as="div" class="relative ml-3">
              <DisclosureButton as="a" :class="[item.current ? 'bg-dark-grey text-white' : 'text-light-grey hover:bg-medium-grey hover:text-white', 'block px-3 py-2 rounded-md text-base font-medium']" :aria-current="item.current ? 'page' : undefined">
                  {{ item.name }}
              </DisclosureButton>
            </Menu>
          </router-link>
          <router-link to="/login">
            <Menu as="div" class="relative ml-3 flex justify-end">
              <a class="btn btn-secondary">Login</a>
            </Menu>
          </router-link>
        </div>

        <!-- <div class="border-t border-dark-grey pt-4 pb-3">
          <div class="flex items-center px-5">
            <div class="flex-shrink-0">
              <img class="h-10 w-10 rounded-full" :src="user.imageUrl" alt="" />
            </div>
            <div class="ml-3">
              <div class="text-base font-medium leading-none text-white">{{ user.name }}</div>
              <div class="text-sm font-medium leading-none text-medium-grey">{{ user.email }}</div>
            </div>
            <button type="button" class="ml-auto flex-shrink-0 rounded-full bg-dark-grey p-1 text-medium-grey hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-dark-grey">
              <span class="sr-only">View notifications</span>
              <BellIcon class="h-6 w-6" aria-hidden="true" />
            </button>
          </div>
          <div class="mt-3 space-y-1 px-2">
            <DisclosureButton v-for="item in userNavigation" :key="item.name" as="a" :href="item.href" class="block rounded-md px-3 py-2 text-base font-medium text-medium-grey hover:bg-dark-grey hover:text-white">{{ item.name }}</DisclosureButton>
          </div>
        </div> -->
      </DisclosurePanel>
    </Disclosure>

  </div>

</template>

<script setup>
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'

const navigation = [
  { name: 'HOME', href: '/', current: false, fontawesome: 'fas fa-home text-lg leading-lg text-slate-400 px-1' },
  { name: 'ABOUTUS', href: '/aboutus', current: false, fontawesome: 'fas fa-user text-lg leading-lg text-slate-400 px-1' },
  { name: 'TIMETABLE', href: '/timetable', current: false, fontawesome: 'fas fa-table text-lg leading-lg text-slate-400 px-1' },
  { name: 'CLINIC', href: '/clinic', current: false, fontawesome: 'fas fa-clinic-medical text-lg leading-lg text-slate-400 px-1' },
  { name: 'TESTIMONIAL', href: '/testimonial', current: false, fontawesome: 'fas fa-medal text-lg leading-lg text-slate-400 px-1' },
  { name: 'CONTACT', href: '/contact', current: false, fontawesome: 'fas fa-map-marker text-lg leading-lg text-slate-400 px-1' },
]

</script>

<script>
export default {
  data() {
    return {
    }
  },
  computed: {
    currentUser() {
      return this.$store.state.auth.user;
    },
  },
  methods: {
    logOut() {
      this.$store.dispatch('auth/logout');
      this.$router.push('/login');
    },
    
  }
}
</script>
