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>
|