chore(examples): add ticket dashboard example

Author: BayBreezy

app/components/Examples/TicketDashboard/NavMenu.vue

@@ -0,0 +1,62 @@
+<template>
+  <template v-for="(item, index) in items" :key="index">
+    <template v-if="!item.items">
+      <NuxtLink
+        v-tippy.right="isCollapsed ? item.title : ''"
+        :to="item.link"
+        class="group mb-2 flex items-center gap-2.5 rounded-md px-2 py-2 text-sm transition hover:bg-accent"
+      >
+        <Icon
+          v-if="item.icon"
+          :name="item.icon"
+          class="size-4 shrink-0 transition group-hover:text-primary"
+        />
+        <span
+          class="transition group-hover:text-primary group-data-[state=collapsed]/splitter:hidden"
+          >{{ item.title }}</span
+        >
+      </NuxtLink>
+    </template>
+    <template v-else>
+      <UiCollapsible>
+        <UiCollapsibleTrigger
+          v-tippy.right="isCollapsed ? item.title : ''"
+          class="group mb-2 flex w-full items-center gap-2.5 rounded-md px-2 py-2 text-sm transition hover:bg-accent"
+        >
+          <Icon
+            v-if="item.icon"
+            :name="item.icon"
+            class="size-4 shrink-0 transition group-hover:text-primary"
+          />
+          <span
+            class="transition group-hover:text-primary group-data-[state=collapsed]/splitter:hidden"
+            >{{ item.title }}</span
+          >
+          <Icon
+            name="solar:alt-arrow-down-broken"
+            class="ml-auto size-4 shrink-0 transition group-hover:text-primary group-data-[state=collapsed]/splitter:hidden group-data-[state=open]:rotate-180"
+          />
+        </UiCollapsibleTrigger>
+        <UiCollapsibleContent class="pl-4 group-data-[state=collapsed]/splitter:hidden">
+          <ExamplesTicketDashboardNavMenu :items="item.items" />
+        </UiCollapsibleContent>
+      </UiCollapsible>
+    </template>
+  </template>
+</template>
+<script lang="ts" setup>
+  type Item = {
+    title: string;
+    icon?: string;
+    items?: {
+      title: string;
+      link: string;
+      icon?: string;
+    }[];
+    link?: string;
+  };
+  defineProps<{
+    items: Item[];
+    isCollapsed?: boolean;
+  }>();
+</script>

app/components/Mainnav.vue

@@ -39,15 +39,8 @@
               </div>
             </UiDropdownMenuTrigger>
             <UiDropdownMenuContent class="min-w-[180px]" align="start" :side-offset="5">
-              <UiDropdownMenuItem as-child>
-                <NuxtLink class="cursor-pointer hover:bg-muted" to="/examples/cards"
-                  >Cards</NuxtLink
-                >
-              </UiDropdownMenuItem>
-              <UiDropdownMenuItem as-child>
-                <NuxtLink class="cursor-pointer hover:bg-muted" to="/examples/dashboard"
-                  >Dashboard</NuxtLink
-                >
+              <UiDropdownMenuItem v-for="l in localProjects" :key="l.name" as-child>
+                <NuxtLink class="cursor-pointer hover:bg-muted" :to="l.link">{{ l.name }}</NuxtLink>
               </UiDropdownMenuItem>
               <template v-for="l in externalProjects" :key="l.name">
                 <UiDropdownMenuItem as-child>
@@ -155,5 +148,11 @@
   const externalProjects = [
     { name: "Settings Dashboard", link: "https://settings-dash.behonbaker.com/" },
     { name: "ETag Topup UI", link: "https://etag-ui.behonbaker.com/" },
+    { name: "UI Todo", link: "https://ui-todo.behonbaker.com/" },
+  ];
+  const localProjects = [
+    { name: "Cards", link: "/examples/cards" },
+    { name: "Dashboard", link: "/examples/dashboard" },
+    { name: "Ticket Dashboard", link: "/examples/ticket-dashboard" },
   ];
 </script>