<script setup>
import SidenavItem from "./SidenavItem.vue";

import { computed } from "vue";
import { useMenuStore } from "@/store/menu";
import { useRoute } from "vue-router";

const store = useMenuStore();
const isRTL = computed(() => store.isRTL);
const sidebarMinimize = () => store.sidebarMinimize();

const minimizeSidebar = () => {
  if (window.innerWidth < 1200) {
    sidebarMinimize();
  }
};

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

const props = defineProps({
  identifier: {
    type: String,
    required: true,
  },
  navText: {
    type: String,
    required: true,
  },
  childs: {
    default: [],
  },
});
</script>
<template>
  <a
    class="nav-link"
    data-bs-toggle="collapse"
    aria-expanded="false"
    :aria-controls="identifier"
    role="button"
    :href="`#${identifier}`"
  >
    <div
      class="icon icon-shape icon-sm text-center d-flex align-items-center justify-content-center"
    >
      <slot name="icon"></slot>
    </div>
    <span class="nav-link-text" :class="isRTL ? ' me-1' : 'ms-1'">
      {{ navText }}
    </span>
  </a>
  <div class="collapse" :id="identifier">
    <ul class="nav nav-sm flex-column ms-4">
      <template v-for="(menu, index) in childs">
        <li class="nav-item">
          <sidenav-item
            :to="`/${menu.path}`"
            :navText="menu.name"
            :hide-icon="true"
          >
          </sidenav-item>
        </li>
      </template>
    </ul>
  </div>
</template>
