118 lines
2.6 KiB
Vue
118 lines
2.6 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
const items = ref([
|
|||
|
|
{
|
|||
|
|
icon: "i-lucide-home",
|
|||
|
|
to: "/hadith",
|
|||
|
|
descrption: "صفحه اصلی",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "جستجو",
|
|||
|
|
icon: "i-lucide-search",
|
|||
|
|
to: "/hadith/search",
|
|||
|
|
slot: "search",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "چت بات",
|
|||
|
|
icon: "i-lucide-message-square-text",
|
|||
|
|
to: "/hadith/chat-bot",
|
|||
|
|
slot: "chat-bot",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "کتابخانه",
|
|||
|
|
icon: "i-lucide-book-open-text",
|
|||
|
|
to: "/hadith/library",
|
|||
|
|
slot: "library",
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const leftItem = ref([
|
|||
|
|
{
|
|||
|
|
label: "نشان شده ها",
|
|||
|
|
icon: "i-lucide-bookmark",
|
|||
|
|
to: "/hadith/favorites",
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
label: "Guide",
|
|||
|
|
icon: "i-lucide-menu",
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
label: "در باره ما",
|
|||
|
|
icon: "i-lucide-house",
|
|||
|
|
to: "/hadith/about-us",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "تماس با ما",
|
|||
|
|
icon: "i-lucide-cloud-download",
|
|||
|
|
to: "/hadith/contact-us",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "قوانین و مقررات",
|
|||
|
|
icon: "i-lucide-smile",
|
|||
|
|
to: "/hadith/rules",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "خروج از حساب",
|
|||
|
|
icon: "i-lucide-smile",
|
|||
|
|
to: "/hadith/logout",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="fixed top-2 right-0 left-0">
|
|||
|
|
<UContainer class="flex justify-between my-navbar mx-3 xl:mx-auto">
|
|||
|
|
<UNavigationMenu
|
|||
|
|
highlight
|
|||
|
|
:items="items"
|
|||
|
|
class="data-[orientation=horizontal]:border-0 border-(--ui-border) data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-48"
|
|||
|
|
/>
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<template v-for="(item, index) in leftItem">
|
|||
|
|
<UDropdownMenu
|
|||
|
|
v-if="item.children?.length"
|
|||
|
|
:items="item.children"
|
|||
|
|
:ui="{
|
|||
|
|
content: 'w-48',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<UButton icon="i-lucide-menu" color="neutral" variant="outline" />
|
|||
|
|
</UDropdownMenu>
|
|||
|
|
|
|||
|
|
<ULink
|
|||
|
|
v-else
|
|||
|
|
raw
|
|||
|
|
:to="item.to"
|
|||
|
|
class="w-full h-full flex justify-center items-center"
|
|||
|
|
>
|
|||
|
|
<UIcon :name="item.icon" class="size-7" />
|
|||
|
|
</ULink>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
</UContainer>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.fixed {
|
|||
|
|
z-index: 999;
|
|||
|
|
.my-navbar {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
height: 68px;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
border-width: 0.3px;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding-top: 4px;
|
|||
|
|
padding-right: 16px;
|
|||
|
|
padding-bottom: 4px;
|
|||
|
|
padding-left: 16px;
|
|||
|
|
|
|||
|
|
background-color: #fff;
|
|||
|
|
border: 0.3px solid #e0e0e0;
|
|||
|
|
box-shadow: 0px 4px 15px 0px #0000001a;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|