dropdown in sidebar item

[Fanreza]

const sidebarItemsDataProduct = [
  {
    title: "Produk",
    icon: "inventory_2",
    allowedRoles: ["administrator"],
    to: "/products",
  },

  {
    title: "Tipe Produk",
    icon: "category",
    allowedRoles: ["administrator"],
    to: "/product-types",
  },

  {
    title: "Module",
    icon: "view_module",
    allowedRoles: ["administrator"],
    to: "/modules",
  },
  {
    title: "Quiz",
    icon: "quiz",
    allowedRoles: ["administrator"],
    to: "/quiz",
  },
];

how can i use dropdown only for one item?, can i use dropdown in sidebar?

[m0ksem]

Hi. I don't really understand your question. But, here is implementation of using collapse in sidebar menu: https://github.com/epicmaxco/vuestic-admin/blob/master/src/components/sidebar/menu/MenuAccordion.vue

[Fanreza]

ah yes this is what i want thanks

[Bond-Addict]

@Fanreza this is from a current project of mine.

<template>
  <va-sidebar v-model="show">
    <template v-for="(nav, index) in navItems">
      <template v-if="nav.children">
        <va-collapse :header="nav.name" solid :key="index">
          <template v-for="child in nav.children">
            <template v-if="child.children">
              <va-collapse :header="child.name" solid :key="index">
                <template v-for="subChild in child.children">
                  <router-link class="nav-link active" :to="{ name: subChild.route }">
                    <va-sidebar-item :active="isRouteActive(subChild.route)">
                      <va-sidebar-item-content>
                        <va-sidebar-item-title>
                          {{ subChild.name }}
                        </va-sidebar-item-title>
                      </va-sidebar-item-content>
                    </va-sidebar-item>
                  </router-link>
                </template>
              </va-collapse>
            </template>
            <template v-else>
              <router-link class="nav-link active" :to="{ name: child.route }">
                <va-sidebar-item :active="isRouteActive(child.route)">
                  <va-sidebar-item-content>
                    <va-sidebar-item-title>
                      {{ child.name }}
                    </va-sidebar-item-title>
                  </va-sidebar-item-content>
                </va-sidebar-item>
              </router-link>
            </template>
          </template>
        </va-collapse>
      </template>
      <template v-else>
        <router-link class="nav-link active" :to="{ name: nav.route }">
          <va-sidebar-item :active="isRouteActive(nav.route)">
            <va-sidebar-item-content>
              <va-sidebar-item-title>
                {{ nav.name }}
              </va-sidebar-item-title>
            </va-sidebar-item-content>
          </va-sidebar-item>
        </router-link>
      </template>
    </template>
  </va-sidebar>
</template>

navigation object type:

export interface NavigationNode {
	name: string;
	route?: string;
	children?: NavigationNode[];
	icon?: string;
}

[Fanreza]

thanks for the example, it looks like what i need