full-matdash-nuxt-stim/components/layout/full/vertical-sidebar/VerticalSidebar.vue

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import { useCustomizerStore } from '~/store/customizer';
import sidebarItems from './sidebarItem';
import Logo from '../logo/Logo.vue';
import { Icon } from '@iconify/vue';
import { useRoute } from 'vue-router';
// MiniSidebar Icons
import MiniSideIcons from './MinIconItems';

const route = useRoute();

// const findTitleByPath = (items: any, path: any) => {
//   let title = '';
//
//   for (const item of items) {
//     if (item.to === path) {
//       title = item.id;
//       break;
//     } else if (item.children) {
//       for (const child of item.children) {
//         if (child.to === path) {
//           title = item.id;
//           break;
//         } else if (child.children) {
//           for (const grandChild of child.children) {
//             if (grandChild.to === path) {
//               title = item.id;
//               break;
//             }
//           }
//         }
//       }
//     }
//   }
//
//   return title;
// };
const findTitleByPath = (items:any, path:any) => {
  for (const item of items) {
    if (item.to === path) {
      return item.id;
    }
    if (item.children) {
      const title = findTitleByPath(item.children, path);
      if (title) {
        return item.id;
      }
    }
  }
  return '';
};

const foundId = findTitleByPath(sidebarItems, route.path);
const getCurrent = foundId ? foundId : 1;
const currentMenu = ref<any>(getCurrent);
function showData(data: any) {
  currentMenu.value = data;
  //customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)
}

// MiniSidebar Icons End
const customizer = useCustomizerStore();
const sidebarMenu = shallowRef(sidebarItems);

const miniSidebar = MiniSideIcons.filter(menuIcon=>menuIcon.typeUser?.includes('super_admin'));

const filterSidebarItems=(items:any, userType:string) => {
  // const result = items.filter((item:any)=>item?.typeUser.includes(userType));
  const result = items.filter((item:any)=>item.typeUser?.includes(userType))
    .map((item:any)=>({
      ...item,
      children: item.children ? filterSidebarItems(item.children,userType):''
    }))
    .filter((item:any)=>item.children.length > 0||item.typeUser.includes(userType));
  return result;
}
const filteredSidebarItems = filterSidebarItems(sidebarItems, 'super_admin');
// console.log(filteredSidebarItems)

</script>

<template>



  <!-- Minisidebar Icons -->
  <v-navigation-drawer class="bg-light" v-model="customizer.Sidebar_drawer" top="0" rail rail-width="80">
    <perfect-scrollbar class="miniscrollnavbar">
      <v-list-item class="px-0">
        <!-- Toggle Sidebar Button -->
        <div class="px-4 mb-3">
          <v-btn
            class="hidden-md-and-down my-2"
            icon
            rounded="md"
            variant="plain"
            @click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)"
          >
            <Icon icon="solar:hamburger-menu-line-duotone" height="25" />
          </v-btn>
        </div>

        <div class="miniicons mt-lg-0 mt-4">
          <!-- MiniSidebar Icons -->
          <div class="d-flex flex-column gap-2">
            <div class="miniicons-list px-4" v-for="menu in miniSidebar" :key="menu.icon">
              <v-btn
                rounded="md"
                flat
                icon
                variant="plain"
                @click="showData(menu.id)"
                :class="{ 'bg-primary opacity-1': currentMenu === menu.id }"
              >
                <Icon :icon="'solar:' + menu.icon" width="25" />
                <!-- Tooltip on Hover -->
                <v-tooltip activator="parent" location="end" class="custom-tooltip">{{ menu.tooltip }}</v-tooltip>
              </v-btn>
            </div>
          </div>
        </div>
      </v-list-item>
    </perfect-scrollbar>
  </v-navigation-drawer>

  <!-- LeftSidebar Items -->
  <v-navigation-drawer
    v-model="customizer.Sidebar_drawer"
    elevation="0"
    rail-width="1"
    app
    top="0"
    class="leftSidebar"
    :rail="customizer.mini_sidebar"
    width="240"
  >
    <!---Logo part -->
    <div class="pa-4 pb-0">
      <Logo />
    </div>

    <!-- ---------------------------------------------- -->
    <!---Navigation -->
    <!-- ---------------------------------------------- -->
    <perfect-scrollbar class="scrollnavbar">
      <div class="px-4 py-0 sidebar-menus">
        <v-list class="py-1">
          <template v-for="(item, i) in filteredSidebarItems">
            <template v-if="currentMenu == item.id">
              <!---Item Sub Header -->
              <LazyLayoutFullVerticalSidebarNavGroup :item="item" v-if="item.header" :key="item.title" />
              <!---If Has Child -->
              <template v-for="sItem in item.children">
                <LazyLayoutFullVerticalSidebarNavCollapse class="leftPadding" :item="sItem" :level="0" v-if="sItem.children" />
                <LazyLayoutFullVerticalSidebarNavItem :item="sItem" class="leftPadding" v-else />
              </template>
            </template>
          </template>
        </v-list>
      </div>
    </perfect-scrollbar>
  </v-navigation-drawer>
</template>