<script setup>
import { computed, ref, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import { useMenuStore } from "@/store/menu";
import { MenuApi } from "@/api/menu";
import SidenavParent from "./SidenavParent.vue";

const store = useMenuStore();
const isRTL = computed(() => store.isRTL);
const menus = ref([]);

const getRoute = () => {
  const route = useRoute();
  const routeArr = route.path.split("/");
  return routeArr[1];
};

const fetchMenu = async () => {
  const response = await MenuApi.mine();
  menus.value = response.result;
};

onBeforeMount(() => {
  fetchMenu();
});
</script>
<template>
  <div
    class="collapse navbar-collapse w-auto h-auto h-100"
    id="sidenav-collapse-main"
  >
    <ul class="navbar-nav">
      <template v-for="(menu, index) in menus">
        <li v-if="menu.childs && menu.childs.length > 0" class="nav-item">
          <sidenav-parent
            :identifier="`${menu.id}`"
            :navText="menu.name"
            :childs="menu.childs"
          >
            <template v-slot:icon>
              <i :class="`${menu.icon} text-dark text-sm opacity-10`"></i>
            </template>
          </sidenav-parent>
        </li>
      </template>
    </ul>
  </div>
</template>
