init

src/App.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { listen } from "@tauri-apps/api/event";
+import {onMounted, onUnmounted, ref, Ref} from 'vue';
+import {NavigationMenuItem} from "@nuxt/ui";
+
+const getInitials = (name: string) => {
+  return name
+    .split(' ')
+    .map(word => word[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+const servers = ref<NavigationMenuItem[]>([
+  { label: 'Main Canal', to: '/', icon: 'i-lucide-house'},
+  { label: "Alpha", to: "/server/d6e1a762-8d70-4bfc-bbca-07c19af7a4ab", avatar: {text: getInitials("Alpha"),}},
+  { label: "Bravo", to: "/server/ef08f718-58ee-402f-8fe6-34c76665e61d", avatar: {text: getInitials("Bravo"),}}
+])
+
+onMounted(async () => {
+  const unlisten = await listen("app-ready", event => {
+    console.log("App is ready", event)
+  })
+
+  onUnmounted(() => {
+    unlisten()
+  })
+})
+</script>
+
+<template>
+  <suspense>
+    <UApp>
+      <UDashboardGroup unit="rem" storage="local">
+        <UDashboardSidebar
+            class="bg-[#2B2D31]"
+            :collapsed-size="4.5"
+            collapsed
+        >
+          <template #header>
+
+          </template>
+
+          <template #default>
+            <UNavigationMenu
+                :items="servers"
+                orientation="vertical"
+                :ui="{
+                  link: 'group relative flex items-center justify-center h-12 w-12 mx-auto mb-2',
+                  linkLeadingIcon: 'w-7 h-7 shrink-0',
+                  linkLeadingAvatar: 'w-12 h-12 text-lg',
+                }"
+            />
+          </template>
+
+          <template #footer>
+
+          </template>
+        </UDashboardSidebar>
+
+        <router-view/>
+      </UDashboardGroup>
+    </UApp>
+  </suspense>
+</template>

src/assets/main.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/main.ts

@@ -0,0 +1,27 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import ui from '@nuxt/ui/vue-plugin'
+import App from './App.vue'
+
+const app = createApp(App)
+
+const router = createRouter({
+  routes: [
+    { path: '/', component: () => import('./pages/index.vue') },
+    {
+      path: '/server/:server_id',
+      component: () => import('./pages/server_detail.vue'),
+      children: [
+        { path: 'channel/:channel_id', component: () => import('./pages/channel_detail.vue') },
+      ]
+    }
+  ],
+  history: createWebHistory()
+})
+
+app.use(router)
+app.use(ui)
+
+app.mount('#app')

src/pages/channel_detail.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+// routes
+const route = useRoute()
+const server_id = route.params.server_id
+const channel_id = computed(() => route.params.channel_id)
+
+</script>
+
+<template>
+  <p>Hello from channel ! {{ channel_id }}</p>
+</template>
+
+<style scoped>
+
+</style>

src/pages/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<p>Hello world - index</p>
+</template>
+
+<style scoped>
+
+</style>

src/pages/server_detail.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import {ref, computed} from 'vue';
+import {NavigationMenuItem} from "@nuxt/ui";
+
+const route = useRoute()
+const server_id = computed(() => route.params.server_id)
+
+const channels = ref<NavigationMenuItem[]>([
+  { label: 'Channel 1', to: `/server/${server_id}/channel/c201ad7d-6634-4767-b260-9ec0827b91d4`},
+  { label: "Channel 2", to: `/server/${server_id}/channel/939c0491-ee9b-426a-b1c2-fbc0d0a1a49c`},
+  { label: "Channel 3", to: `/server/${server_id}/channel/4fd367fd-3d32-4953-9794-d4d2235dfe33`}
+])
+</script>
+
+<template>
+  <UDashboardSidebar>
+    <template #default>
+      <UNavigationMenu
+        :items="channels"
+        orientation="vertical"
+      />
+    </template>
+  </UDashboardSidebar>
+  <router-view />
+</template>
+
+<style scoped>
+
+</style>

src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}