feat(dashboard): setup dashboard

src/components/VerticalMenu.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+defineProps(['menu']);
+const activeMenu = defineModel<number>('activeMenu');
+if (activeMenu.value === undefined) {
+  activeMenu.value = 0;
+}
+</script>
+
+<template>
+  <ul>
+    <li v-for="(item, index) in menu" :key="index">
+      <div
+        @click="activeMenu = index"
+        :class="[
+          'flex items-center gap-2 px-4 py-3 border-s-[3px] cursor-pointer',
+          {
+            'border-l-solid b-p-primary-500 bg-p-primary-100 text-p-primary-700':
+              index === activeMenu,
+            'border-transparent text-gray-500 hover:border-gray-100 hover:bg-gray-50 hover:text-gray-700':
+              index !== activeMenu,
+          },
+          {
+            'dark:bg-p-primary-900 dark:text-blue-50': index === activeMenu,
+            'dark:text-gray-400 dark:hover:border-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200':
+              index !== activeMenu,
+          },
+        ]"
+      >
+        <i :class="[item.icon, 'opacity-75']"></i>
+
+        <span class="text-sm font-medium"> {{ item.name }} </span>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+a {
+  text-decoration: none;
+}
+
+ul {
+  list-style-type: none;
+  margin: unset;
+  padding: unset;
+}
+</style>

src/views/index.vue

@@ -1,20 +1,97 @@
 <script setup lang="ts">
 import { invoke } from '@tauri-apps/api/core';
-import { onMounted } from 'vue';
+import { onMounted, ref, shallowReactive } from 'vue';
 import { FileSize } from '../types';
 
+const menu = shallowReactive([
+  {
+    icon: 'pi pi-home',
+    name: 'Home',
+    link: '/',
+  },
+  {
+    icon: 'pi pi-cog',
+    name: 'Settings',
+    link: '/settings',
+  },
+]);
+const activeMenu = ref<number>(0);
+
+const theme = ref(
+  new Proxy(
+    {
+      mode: 'light',
+    },
+    {
+      get: (target, prop) => Reflect.get(target, prop),
+      set: (target, _, value) => {
+        if (value === 'light') {
+          document.documentElement.classList.contains('dark') &&
+            document.documentElement.classList.remove('dark');
+        } else {
+          document.documentElement.classList.contains('dark') ||
+            document.documentElement.classList.add('dark');
+        }
+        return Reflect.set(target, 'mode', value);
+      },
+    }
+  )
+);
+
 onMounted(async () => {
-    const size: FileSize = await invoke('get_file_size', { url: 'https://freetestdata.com/wp-content/uploads/2021/09/1-MB-DOC.doc' })
-    console.log(size.error ? size.error : `File size: ${size.size}`);
-})
+  const size: FileSize = await invoke('get_file_size', {
+    url: 'https://freetestdata.com/wp-content/uploads/2021/09/1-MB-DOC.doc',
+  });
+  console.log(size.error ? size.error : `File size: ${size.size}`);
+});
 </script>
 
 <template>
-    <main class="h-full w-full">
-        <div class="flex h-full w-full justify-center items-center">
-            <h1 class="text-4xl font-bold">Welcome to Grassator</h1>
+  <main class="h-full w-full">
+    <div class="flex flex-col h-full w-full">
+      <div
+        :class="[
+          'flex justify-between items-center h-12 px-4',
+          'bg-p-surface-0 b-solid b-[1px] b-p-surface-200',
+          'dark:bg-p-surface-900 dark:b-p-surface-700',
+        ]"
+      >
+        <IconField>
+          <InputIcon>
+            <i class="pi pi-search"></i>
+          </InputIcon>
+          <InputText placeholder="Search" disabled />
+        </IconField>
+
+        <div>
+          <Button
+            @click="theme.mode = theme.mode === 'light' ? 'dark' : 'light'"
+            :icon="theme.mode === 'light' ? 'pi pi-sun' : 'pi pi-moon'"
+            severity="secondary"
+            text
+          ></Button>
+          <Button
+            icon="pi pi-sort-alt"
+            class="ml-2"
+            severity="secondary"
+            text
+          ></Button>
+          <Button
+            icon="pi pi-plus"
+            class="ml-2"
+            severity="secondary"
+            text
+          ></Button>
         </div>
-    </main>
+      </div>
+
+      <VerticalMenu
+        class="w-64 hidden sm:block"
+        :menu="menu"
+        :activeMenu="activeMenu"
+      />
+    </div>
+  </main>
 </template>
 
-<style scoped></style>
+<style scoped></style>

uno.config.ts

@@ -5,15 +5,29 @@ import {
   presetTypography,
   presetUno,
   presetWebFonts,
-} from "unocss";
+} from 'unocss';
 
 export default defineConfig({
   rules: [
     [
-      /^bg-p-(.*)$/,
+      /^bg-p-(.*)(\/\d+)?$/,
+      ([r, c]) => {
+        return {
+          '--bg-opacity': 1,
+          'background-color': `var(--p-${c})`,
+        };
+      },
+    ],
+    [
+      /^b-p-(.*)$/,
+      ([, c]) => ({
+        'border-color': `var(--p-${c})`,
+      }),
+    ],
+    [
+      /^text-p-(.*)$/,
       ([, c]) => ({
-        "--bg-opacity": 1,
-        "background-color": `var(--p-${c})`,
+        color: `var(--p-${c})`,
       }),
     ],
   ],