1,603rd Commit

app/src/layouts/baseline/links-list.ts

@@ -180,7 +180,15 @@ const links = [
     name: 'CRUD Operations',
     to: '/crud-operations',
   },
-  { icon: 'i-mdi-user-group', name: 'Management', to: '/users' },
+  {
+    icon: 'i-mdi-user-group',
+    name: 'Management',
+    sub: [
+      { name: 'Organizations', to: '/management/organizations' },
+      { name: 'Groups', to: '/management/groups' },
+      { name: 'Users', to: '/management/users' },
+    ],
+  },
   { icon: 'i-carbon-two-factor-authentication', name: 'Two-factor Auth', to: '/two-factor-auth' },
   { icon: 'i-ph-chats-fill', name: 'Discussions', to: '/discussions' },
   { icon: 'i-material-symbols-robot-2-outline', name: 'Chatbot', to: '/chatbot' },

app/src/routes/(backstage)/(playground)/management/groups/+page.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { XBreadcrumb } from '@x/ui';
+</script>
+
+<template>
+  <XBreadcrumb :items="[{ text: 'Management' }, { text: 'Groups' }]" />
+
+  <h1 class="text-4xl font-extrabold my-4">Groups</h1>
+</template>

app/src/routes/(backstage)/(playground)/management/organizations/+page.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { XBreadcrumb } from '@x/ui';
+</script>
+
+<template>
+  <XBreadcrumb :items="[{ text: 'Management' }, { text: 'Organizations' }]" />
+
+  <h1 class="text-4xl font-extrabold my-4">Organizations</h1>
+</template>