<script setup>
import {Bars3Icon, XMarkIcon, ArrowLeftIcon} from "@heroicons/vue/24/outline/index.js";
import {Dialog, DialogPanel} from "@headlessui/vue";
import { ref } from 'vue'
import Banner from "@/Components/FrontEnd/Banner.vue";

const navigation = [
    { name: 'Home', href: '#', subItems:[] },
    { name: 'About Us', href: '#', subItems:[] },
    { name: 'Services', href: '#', subItems:[
            {name:'Service-1',href:'#'},
            {name:'Service-1',href:'#'},
            {name:'Service-2',href:'#'},
            {name:'Service-3',href:'#'},
        ] },
    { name: 'Contact', href: '#', subItems:[] },
]

const mobileMenuOpen = ref(false)
</script>
<template>

    <Banner></Banner>

    <nav class="flex bg-green-800 items-center justify-between p-6 lg:px-8" aria-label="Global">
        <div class="flex lg:flex-1">
            <a href="#" class="-m-1.5 p-1.5">
                <span class="sr-only">Rihlah</span>
<!--                <h5 class="text-gray-200 font-bold">Rihlah.Tech</h5>-->
                <img class="h-8 w-auto" src="https://tailwindui.com/plus/img/logos/mark.svg?color=red&shade=500" alt="" />
            </a>
        </div>
        <div class="flex lg:hidden">
            <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-200" @click="mobileMenuOpen = true">
                <span class="sr-only">Open main menu</span>
                <Bars3Icon class="size-6" aria-hidden="true" />
            </button>
        </div>
        <div class="hidden lg:flex lg:gap-x-12">
            <a v-for="item in navigation" :key="item.name" :href="item.href" class="text-sm/6 font-semibold text-gray-200">{{ item.name }}</a>
        </div>
        <div class="hidden lg:flex lg:flex-1 lg:justify-end">

            <a href="#" class="text-sm/6 font-semibold text-white">
                Log in <span aria-hidden="true">&rarr;</span>
            </a>
        </div>
    </nav>
    <Dialog class="lg:hidden" @close="mobileMenuOpen = false" :open="mobileMenuOpen">
        <div class="fixed inset-0 z-50" />
        <DialogPanel class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-green-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-white/10">
            <div class="flex items-center justify-between">
                <a href="#" class="-m-1.5 p-1.5">
                    <span class="sr-only">Your Company</span>
                    <img class="h-8 w-auto" src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=500" alt="" />
                </a>

                <button type="button" class="-m-2.5 rounded-md p-2.5 text-green-200" @click="mobileMenuOpen = false">
                    <span class="sr-only">Close menu</span>
                    <XMarkIcon class="size-6" aria-hidden="true" />
                </button>
            </div>
            <div class="mt-6 flow-root">
                <div class="-my-6 divide-y divide-green-500/25">
                    <div class="space-y-2 py-6">
                        <a v-for="item in navigation" :key="item.name" :href="item.href" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-green-800">{{ item.name }}</a>
                    </div>
                    <div class="py-6">
                        <a href="#" class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-white hover:bg-green-800">Log in</a>
                    </div>
                </div>
            </div>
        </DialogPanel>
    </Dialog>
</template>
<style scoped>

</style>
