Add Upload and Video icon components, update DashboardLayout and routes

src/components/DashboardLayout.vue

@@ -1,47 +1,43 @@
 <script lang="ts" setup>
-import { Search } from "@/components/icons";
-import Home from "@/components/icons/Home.vue";
-import HomeFilled from "@/components/icons/HomeFilled.vue";
-import Layout from "@/components/icons/Layout.vue";
-import LayoutFilled from "@/components/icons/LayoutFilled.vue";
-import { createStaticVNode, inject, Ref, watch } from "vue";
 import Add from "@/components/icons/Add.vue";
 import AddFilled from "@/components/icons/AddFilled.vue";
 import Bell from "@/components/icons/Bell.vue";
 import BellFilled from "@/components/icons/BellFilled.vue";
+import Home from "@/components/icons/Home.vue";
+import HomeFilled from "@/components/icons/HomeFilled.vue";
+import Video from "@/components/icons/Video.vue";
+import VideoFilled from "@/components/icons/VideoFilled.vue";
+import { cn } from "@/lib/utils";
 import { useAuthStore } from "@/stores/auth";
+import { createStaticVNode } from "vue";
+import Upload from "./icons/Upload.vue";
+import UploadFilled from "./icons/UploadFilled.vue";
 
 const auth = useAuthStore();
 
-const className = ":uno: w-12 h-12 p-2 rounded-2xl hover:bg-primary/10 flex press-animated"
+const className = ":uno: w-12 h-12 p-2 rounded-2xl hover:bg-primary/10 flex press-animated items-center justify-center";
 const homeHoist = createStaticVNode(`<img class="h-8 w-8" src="/apple-touch-icon.png" alt="Logo" />`, 1);
 const links = [
-    { href: "/", label: "app", icon: homeHoist, exact: homeHoist, type: "a", exactClass: "" },
-    { href: "/", label: "Home", icon: Home, exact: HomeFilled, type: "a", exactClass: 'bg-primary/10' },
-    { href: "/search", label: "Search", icon: Search, exact: Search, type: "btn", exactClass: "" },
-    { href: "/video", label: "Video", icon: Layout, exact: LayoutFilled, type: "a", exactClass: 'bg-primary/10' },
-    { href: "/add", label: "Add", icon: Add, exact: AddFilled, type: "a", exactClass: 'bg-primary/10' },
-    { href: "/notification", label: "Notification", icon: Bell, exact: BellFilled, type: "a", exactClass: 'bg-primary/10' },
+    { href: "/fdsfsd", label: "app", icon: homeHoist, exact: homeHoist, type: "btn" },
+    { href: "/", label: "Home", icon: Home, exact: HomeFilled, type: "a" },
+    { href: "/upload", label: "Upload", icon: Upload, exact: UploadFilled, type: "a" },
+    { href: "/video", label: "Video", icon: Video, exact: VideoFilled, type: "a" },
+    { href: "/add", label: "Add", icon: Add, exact: AddFilled, type: "a" },
+    { href: "/notification", label: "Notification", icon: Bell, exact: BellFilled, type: "a" },
 ];
 </script>
 <template>
-    <div class="fixed left-0 w-18 flex flex-col items-center pt-4 gap-6 z-41">
-        <template v-for="i in links" :key="i.label">
-            <router-link v-if="i.type === 'a'" v-tooltip="i.label" :exact-active-class="i.exactClass" :to="i.href"
-                v-slot="{ isExactActive }" :class="className">
-                <component :is="isExactActive ? i.exact : i.icon" />
-            </router-link>
-            <div v-else :class="className" v-tooltip="i.label">
-                <component :is="i.icon" />
-            </div>
-        </template>
+    <header class="fixed left-0 w-18 flex flex-col items-center pt-4 gap-6 z-41 max-h-screen h-screen border-r border-gray-200">
+        <component :is="i.type === 'a' ? 'router-link' : 'div'" v-for="i in links" :key="i.label" v-bind="i.type === 'a' ? { to: i.href } : {}" v-tooltip="i.label" :class="cn(className, $route.path === i.href && 'bg-primary/10')">
+            <component :is="$route.path === i.href ? i.exact : i.icon" />
+        </component>
         <div class="w-12 h-12 rounded-2xl hover:bg-primary/10 flex">
             <button class="h-[38px] w-[38px] rounded-full m-a ring-2 ring flex press-animated" @click="auth.logout()">
                 <img class="h-8 w-8 rounded-full m-a ring-1 ring-white"
                     src="https://picsum.photos/seed/user123/40/40.jpg" alt="User avatar" />
             </button>
         </div>
-    </div>
+    </header>
     <main class="flex flex-1 overflow-hidden md:ps-18">
         <div class="flex-1 overflow-auto p-4 bg-white rounded-lg md:(mr-2 mb-2) min-h-[calc(100vh-8rem)]">
             <router-view v-slot="{ Component }">

src/components/icons/Upload.vue

@@ -0,0 +1,3 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="28" viewBox="-10 -226 596 468"><path d="M240-216c-88 0-160 72-160 160 0 5 0 10 1 15C33-18 0 31 0 88c0 80 65 144 144 144h304c71 0 128-57 128-128 0-50-28-93-70-114 4-12 6-25 6-38 0-66-54-120-120-120-11 0-23 2-33 5-30-33-72-53-119-53zM128-56c0-62 50-112 112-112 38 0 71 19 91 47 7 10 20 13 30 8 9-4 20-7 31-7 40 0 72 32 72 72 0 14-4 27-11 38-4 7-5 15-2 22s9 13 16 14c35 9 61 41 61 78 0 44-36 80-80 80H144c-53 0-96-43-96-96 0-43 28-79 67-91 11-4 18-16 16-29-2-7-3-16-3-24zm177 7c-9-9-25-9-34 0l-64 64c-9 9-9 25 0 34 10 9 25 9 34 0l23-23v86c0 13 11 24 24 24s24-11 24-24V26l23 23c9 9 25 9 34 0s9-25 0-34l-64-64z" fill="#1e3050"/></svg>
+</template>

src/components/icons/UploadFilled.vue

@@ -0,0 +1,3 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="28" viewBox="0 0 596 468"><path d="M10 314c0-63 41-117 98-136-1-8-2-16-2-24 0-79 65-144 144-144 55 0 104 31 128 77 14-8 30-13 48-13 53 0 96 43 96 96 0 16-4 31-10 44 44 20 74 64 74 116 0 71-57 128-128 128H154c-79 0-144-64-144-144zm199-73c-9 9-9 25 0 34s25 9 34 0l31-31v102c0 13 11 24 24 24s24-11 24-24V244l31 31c9 9 25 9 34 0s9-25 0-34l-72-72c-10-9-25-9-34 0l-72 72z" fill="#a6acb9"/><path d="M281 169c9-9 25-9 34 0l72 72c9 9 9 25 0 34s-25 9-34 0l-31-31v102c0 13-11 24-24 24s-24-11-24-24V244l-31 31c-9 9-25 9-34 0s-9-25 0-34l72-72z" fill="#1e3050"/></svg>
+</template>

src/components/icons/Video.vue

@@ -0,0 +1,3 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="22 -194 564 404"><path d="M96-136c-9 0-16 7-16 16v256c0 9 7 16 16 16h256c9 0 16-7 16-16v-256c0-9-7-16-16-16H96zm-64 16c0-35 29-64 64-64h256c35 0 64 29 64 64v256c0 35-29 64-64 64H96c-35 0-64-29-64-64v-256zm506-11c4-3 9-5 14-5 13 0 24 11 24 24v240c0 13-11 24-24 24-5 0-10-2-14-5l-74-55V32l64 48V-64l-64 48v-60l74-55z" fill="#1e3050"/></svg>
+</template>

src/components/icons/VideoFilled.vue

@@ -0,0 +1,3 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 532 404"><path d="M10 74v256c0 35 29 64 64 64h256c35 0 64-29 64-64V74c0-35-29-64-64-64H74c-35 0-64 29-64 64z" fill="#a6acb9"/><path d="M394 135v134l90 72c4 3 9 5 14 5 13 0 24-11 24-24V82c0-13-11-24-24-24-5 0-10 2-14 5l-90 72z" fill="#1e3050"/></svg>
+</template>

src/components/icons/index.ts

@@ -39,8 +39,4 @@ export const BellFilled = createStaticVNode(`<svg aria-hidden="true" aria-label=
             <path
                 d="M20.54 14.24A3.15 3.15 0 0 0 23.66 17H24v2h-8v1h-.02a3.4 3.4 0 0 1-3.38 3h-1.2a3.4 3.4 0 0 1-3.38-3H8v-1H0v-2h.34a3.15 3.15 0 0 0 3.12-2.76l.8-6.41a7.8 7.8 0 0 1 15.48 0zM10 19.6c0 .77.63 1.4 1.4 1.4h1.2c.77 0 1.4-.63 1.4-1.4a.6.6 0 0 0-.6-.6h-2.8a.6.6 0 0 0-.6.6" ></path>
         </svg>`, 1);
-export const Search = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24">
-            <path
-                d="M17.33 18.74a10 10 0 1 1 1.41-1.41l4.47 4.47-1.41 1.41zM11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16">
-            </path>
-        </svg>`, 1);
+export const Search = createStaticVNode(`<svg aria-hidden="true" aria-label="" class="v-mid m-a" height="24" role="img" viewBox="0 0 24 24" width="24"><path d="M17.33 18.74a10 10 0 1 1 1.41-1.41l4.47 4.47-1.41 1.41zM11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16"></path></svg>`, 1);

src/main.ts

@@ -11,7 +11,7 @@ import { createPinia } from "pinia";
 import { useAuthStore } from './stores/auth';
 import ToastService from 'primevue/toastservice';
 import Tooltip from 'primevue/tooltip';
-const bodyClass = ":uno: font-sans bg-[#f9fafd] text-gray-800 antialiased flex flex-col min-h-screen"
+const bodyClass = ":uno: font-sans text-gray-800 antialiased flex flex-col min-h-screen"
 export function createApp() {
     const pinia = createPinia();
     const app = createSSRApp(withErrorBoundary(RouterView));

src/routes/index.ts

@@ -67,6 +67,11 @@ const routes: RouteData[] = [
               next();
             }
           },
+          {
+            path: "upload",
+            name: "upload",
+            component: () => import("./add/Add.vue"),
+          },
           {
             path: "video",
             name: "video",