<template>
    <div class="fixed top-0 left-0 right-0 flex justify-center z-50">
        <!-- navbar -->
        <div class=" max-w-[1300px] w-full relative">
            <nav class="z-50 bg-white border-b border-zinc-200 dark:bg-zinc-950 dark:border-zinc-700">
                <div class="flex justify-between px-3 py-1 lg:px-5 lg:pl-3">
                    <!-- sm: -->
                    <NuxtLink :to="useRuntimeConfig().public.router.Maghale"
                        class="hidden sm:flex items-center space-x-2">
                        <img src="@/assets/img/logo.png" class="h-8" alt="Maghaleapp" />
                        <span class="text-zinc-900 dark:text-white font-black text-xl">مقاله</span>
                    </NuxtLink>
                    <!-- right -->
                    <div dir="rtl" class="flex w-2/5 items-center justify-start sm:hidden">
                        <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar"
                            aria-controls="logo-sidebar" type="button"
                            class="inline-flex items-center p-2 text-xs text-zinc-500 rounded-lg hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-zinc-600">
                            <span class="sr-only">Open sidebar</span>
                            <svg class="size-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                viewBox="0 0 17 14">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
                            </svg>
                        </button>
                    </div>
                    <!-- center -->
                    <div class="w-1/5 flex sm:hidden">
                        <NuxtLink :to="useRuntimeConfig().public.router.Home" class="mx-auto">
                            <img src="@/assets/img/logo.png" class="h-9" alt="Maghaleapp" />
                        </NuxtLink>
                    </div>
                    <!-- left -->
                    <div dir="ltr" class="w-2/5 sm:w-full lg:hidden">
                        <div v-if="store.isAuthenticated" class="flex items-center">
                            <div class="flex items-center ms-3">
                                <button type="button" @click="store.setHiddenLeft(!store.hiddenLeft)"
                                    :aria-labelledby="false"
                                    class="inline-flex items-center p-1 justify-center text-xs text-zinc-500 rounded-lg hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-zinc-600">
                                    <span class="sr-only">Open main menu</span>
                                    <img v-if="store.me.get_image" class="size-8 rounded-full object-cover"
                                        :src="useRuntimeConfig().public.MediaUrl + store.me.get_image"
                                        alt="Rounded avatar">
                                    <img v-else class="size-8 rounded-full object-cover"
                                        src="/assets/img/Personal_photo.png" alt="Rounded avatar">
                                </button>
                                <div @click="store.hiddenLeft = true"
                                    class="z-50 absolute top-9 left-1 my-4 w-52 text-xs list-none bg-white divide-y divide-zinc-100 rounded shadow dark:bg-zinc-950 dark:divide-zinc-600"
                                    id="dropdown-user" :class="{ 'hidden': store.hiddenLeft }">
                                    <ul class="py-1 w-64" role="none">
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.MyComments"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">نظرات زیر پست‌های من</NuxtLink>
                                        </li>
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.MyReplies"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">پاسخ‌ها به نظرات من</NuxtLink>
                                        </li>
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.Information"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">ویرایش اطلاعات</NuxtLink>
                                        </li>
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.Dashboard"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">میزکار</NuxtLink>
                                        </li>
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.IdeaAdd"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">تعریف ایده</NuxtLink>
                                        </li>
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.Idea"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">ایده‌ها</NuxtLink>
                                        </li>
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.Hyper"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">ابرپروژه‌ها</NuxtLink>
                                        </li>
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.Project"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">پروژه‌ها</NuxtLink>
                                        </li>
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.KeywordAdd"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">تعریف کلیدواژه</NuxtLink>
                                        </li>
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.BookAdd"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">تعریف کتاب</NuxtLink>
                                        </li>
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.CodeAdd"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">تعریف کد</NuxtLink>
                                        </li>
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.ArticleAdd"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">تعریف مقاله</NuxtLink>
                                        </li>
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.PaperAdd"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">تعریف مقاله رسمی</NuxtLink>
                                        </li>
                                        <li>
                                            <NuxtLink :to="useRuntimeConfig().public.router.AuthorAdd"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">تعریف نویسنده</NuxtLink>
                                        </li>
                                        <li>
                                            <a :href="useRuntimeConfig().public.router.Login"
                                                @click="store.removeUser()"
                                                class="block px-4 py-2 text-xs text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:hover:text-white"
                                                role="menuitem">خروج</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <NuxtLink v-else :to="useRuntimeConfig().public.router.Login"
                            class="relative inline-flex items-center justify-center p-0.5 me-2 overflow-hidden text-xs font-medium text-zinc-950 rounded-lg group bg-gradient-to-br from-zinc-600 to-zinc-500 group-hover:from-zinc-600 group-hover:to-zinc-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-950">
                            <span
                                class="relative px-5 py-1.5 transition-all ease-in duration-75 bg-white dark:bg-zinc-950 rounded-md group-hover:bg-transparent group-hover:dark:bg-transparent">
                                ورود | ثبت‌نام
                            </span>
                        </NuxtLink>
                    </div>
                </div>
            </nav>
            <!-- sidebar -->
            <div class="z-40 relative">
                <aside dir="rtl" id="logo-sidebar"
                    class="absolute top-0 left-0 z-40 w-80 min-h-screen pt-20 transition-transform -translate-x-full bg-white border-x border-zinc-200 sm:translate-x-0 dark:bg-zinc-950 dark:border-zinc-700"
                    aria-label="Sidebar">
                    <div class="h-full px-3 pb-4 overflow-y-auto">
                        <ul class="space-y-2 font-medium">
                            <li>
                                <NuxtLink :to="useRuntimeConfig().public.router.Maghale"
                                    class="flex items-center p-2 text-[#001A1A] rounded-lg dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-700 group">
                                    <svg class="w-5 h-5 text-zinc-500 transition duration-75 dark:text-zinc-400 group-hover:text-[#001A1A] dark:group-hover:text-white"
                                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                        viewBox="0 0 22 21">
                                        <path
                                            d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
                                        <path
                                            d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
                                    </svg>
                                    <span class="ms-3">سایت مقاله</span>
                                </NuxtLink>
                            </li>
                            <li>
                                <NuxtLink :to="useRuntimeConfig().public.router.Golchin"
                                    class="flex items-center p-2 text-[#001A1A] rounded-lg dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-700 group">
                                    <svg class="w-5 h-5 text-zinc-500 transition duration-75 dark:text-zinc-400 group-hover:text-[#001A1A] dark:group-hover:text-white"
                                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                        viewBox="0 0 22 21">
                                        <path
                                            d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
                                        <path
                                            d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
                                    </svg>
                                    <span class="ms-3">سایت گلچین</span>
                                </NuxtLink>
                            </li>
                            <li>
                                <NuxtLink :to="useRuntimeConfig().public.router.Hooshmand"
                                    class="flex items-center p-2 text-[#001A1A] rounded-lg dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-700 group">
                                    <svg class="w-5 h-5 text-zinc-500 transition duration-75 dark:text-zinc-400 group-hover:text-[#001A1A] dark:group-hover:text-white"
                                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                        viewBox="0 0 22 21">
                                        <path
                                            d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
                                        <path
                                            d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
                                    </svg>
                                    <span class="ms-3">سایت هوشمند</span>
                                </NuxtLink>
                            </li>
                            <li>
                                <NuxtLink :to="useRuntimeConfig().public.router.Modir"
                                    class="flex items-center p-2 text-[#001A1A] rounded-lg dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-700 group">
                                    <svg class="w-5 h-5 text-zinc-500 transition duration-75 dark:text-zinc-400 group-hover:text-[#001A1A] dark:group-hover:text-white"
                                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                        viewBox="0 0 22 21">
                                        <path
                                            d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
                                        <path
                                            d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
                                    </svg>
                                    <span class="ms-3">سایت مدیر</span>
                                </NuxtLink>
                            </li>
                            <li>
                                <NuxtLink :to="useRuntimeConfig().public.router.Nohakim"
                                    class="flex items-center p-2 text-[#001A1A] rounded-lg dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-700 group">
                                    <svg class="w-5 h-5 text-zinc-500 transition duration-75 dark:text-zinc-400 group-hover:text-[#001A1A] dark:group-hover:text-white"
                                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                        viewBox="0 0 22 21">
                                        <path
                                            d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
                                        <path
                                            d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
                                    </svg>
                                    <span class="ms-3">سایت نوحکیم</span>
                                </NuxtLink>
                            </li>
                            <li>
                                <NuxtLink :to="useRuntimeConfig().public.router.Book"
                                    class="flex items-center p-2 text-[#001A1A] rounded-lg dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-700 group">
                                    <svg class="w-5 h-5 text-zinc-500 transition duration-75 dark:text-zinc-400 group-hover:text-[#001A1A] dark:group-hover:text-white"
                                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                        viewBox="0 0 22 21">
                                        <path
                                            d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
                                        <path
                                            d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
                                    </svg>
                                    <span class="ms-3">کتاب‌ها</span>
                                </NuxtLink>
                            </li>
                            <li>
                                <NuxtLink :to="useRuntimeConfig().public.router.UserSearch"
                                    class="flex items-center p-2 text-[#001A1A] rounded-lg dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-700 group">
                                    <svg class="flex-shrink-0 w-5 h-5 text-zinc-500 transition duration-75 dark:text-zinc-400 group-hover:text-[#001A1A] dark:group-hover:text-white"
                                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                        viewBox="0 0 20 18">
                                        <path
                                            d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z" />
                                    </svg>
                                    <span class="flex-1 ms-3 whitespace-nowrap">کاربران</span>
                                </NuxtLink>
                            </li>
                        </ul>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useFlowbite } from '~/composables/useFlowbite';
import { useMaghaleStore } from '~/store'
import { onMounted } from 'vue'

const store = useMaghaleStore()

onMounted(() => {
    useFlowbite(() => {
        initFlowbite();
    })
})

</script>