hadith_ui/components/hadith/NavigationMenu.vue

<script setup lang="ts">
const items = ref([
  {
    label: "حانه",
    icon: "i-lucide-home",
    to: "/hadith",
    descrption: "صفحه اصلی",
    class: "flex flex-col lg:flex-row justify-center items-center hide-label",
  },
  {
    label: "جستجو",
    icon: "i-lucide-search",
    to: "/hadith/search",
    slot: "search",
    class: "flex flex-col lg:flex-row justify-center items-center",
  },
  {
    label: "چت بات",
    icon: "i-lucide-message-square-text",
    to: "/hadith/chat-bot",
    slot: "chat-bot",
    class: "flex flex-col lg:flex-row justify-center items-center",
  },
  {
    label: "کتابخانه",
    icon: "i-lucide-book-open-text",
    to: "/hadith/library",
    slot: "library",
    class: "flex flex-col lg:flex-row justify-center items-center",
  },

  {
    label: "نشان شده ها",
    icon: "i-lucide-bookmark",
    to: "/hadith/favorites",
    class: "flex flex-col lg:hidden justify-center items-center",
  },

  {
    label: "دیگر",
    icon: "i-lucide-menu",
    class: "flex flex-col lg:hidden justify-center items-center hide-chevron",
    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",
      },
    ],
  },
]);

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",
      },
    ],
  },
]);

onMounted(() => {
  if (window?.outerWidth < 576)
    items.value = items.value.filter((item) => item.to != "/hadith/favorites");
});
</script>

<template>
  <div class="fixed bottom-2 lg:top-2 right-0 left-0">
    <client-only>
      <UContainer class="flex justify-center my-navbar mx-3 lg: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="hidden lg: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>
    </client-only>
  </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;

    nav > div {
      width: 100%;
      display: flex;
      flex-direction: column;

      ul {
        li {
          @media screen and (max-width: 991.99px) {
            flex: 1;
          }

          .hide-label {
            .truncate {
              display: none;
            }
          }
        }
      }
    }

    .hide-chevron {
      span:last-child {
        display: none;
      }
    }
  }
}
</style>