added router animations

package.json

@@ -11,6 +11,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "autoprefixer": "^10.4.13",
     "pinia": "^2.0.28",
     "postcss": "^8.4.20",

src/App.vue

@@ -7,10 +7,18 @@
       <Transition name="nav" mode="out-in">
         <Menu v-if="useUi().showNav" />
       </Transition>
-      <section class="flex-auto flex flex-col gap-5 py-4 px-8">
+      <section class="flex-auto flex flex-col py-4 px-8">
         <Tabs />
-        <div class="flex-auto">
-          <router-view />
+        <div class="flex-auto overflow-hidden">
+          <router-view v-slot="{ Component }">
+            <Transition
+              mode="out-in"
+              enter-active-class="windowShow"
+              leave-active-class="windowHide"
+            >
+              <component :is="Component" />
+            </Transition>
+          </router-view>
         </div>
       </section>
     </div>

src/layouts/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-10 flex items-center px-4">
+  <div class="w-full h-10 flex items-center px-4 shadow-md justify-between">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="30px"
@@ -15,6 +15,9 @@
         clip-rule="evenodd"
       />
     </svg>
+    <p class="cursor-default">
+      Logged as <strong class="cursor-default">horanchikk</strong>
+    </p>
   </div>
 </template>
 

src/layouts/Menu.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="w-56 h-full p-5 bg-black menuBack text-xl overflow-x-scroll">
+  <div
+    class="w-56 h-full p-5 menuBack text-xl overflow-x-scroll shadow-md shadow-black"
+  >
     <div
       v-for="item in menu"
       :key="menu.indexOf(item)"
-      :class="`text-left cursor-pointer ${
+      :class="`cursor-pointer text-left ${
         item.link !== $route.path ? 'text-white' : 'text-blue-300'
       } hover:opacity-70 active:opacity-60 transition-all`"
     >

src/layouts/Tabs.vue

@@ -30,7 +30,7 @@
           </div>
         </div>
         <div
-          class="px-5 py-1 flex items-center justify-between rounded-md bg-blue-700 select-none text-white bg-opacity-80 hover:bg-opacity-70 transition-all overflow-visible"
+          class="px-5 py-1 flex items-center justify-between rounded-md bg-blue-400 select-none text-white bg-opacity-80 hover:bg-opacity-70 transition-all overflow-visible"
           v-else
         >
           <div

src/main.ts

@@ -5,6 +5,7 @@ import App from "./App.vue";
 import router from "./router";
 
 import "./style.css";
+import "animate.css";
 
 const app = createApp(App);
 

src/router/index.ts

@@ -4,6 +4,7 @@ import HomeView from "../views/HomeView.vue";
 import ComponentsView from "../views/ComponentsView.vue";
 import StatsView from "../views/StatsView.vue";
 import SystemView from "../views/SystemView.vue";
+import SettingsView from "../views/SettingsView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -28,6 +29,11 @@ const router = createRouter({
       name: "System",
       component: SystemView,
     },
+    {
+      path: "/settings",
+      name: "Settings",
+      component: SettingsView,
+    },
   ],
 });
 

src/stores/useUi.ts

@@ -34,11 +34,13 @@ export const useUi = defineStore("ui", () => {
     },
   ]);
 
+  const theme: "dark" | "light" = "dark";
+
   function updateTabs() {
     for (let tab in tabs.value) {
       tabs.value[tab].removable = true;
     }
   }
 
-  return { showNav, tabs, updateTabs };
+  return { showNav, tabs, updateTabs, theme };
 });

src/style.css

@@ -2,6 +2,28 @@
 @tailwind components;
 @tailwind utilities;
 
+@keyframes windowShow {
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
+}
+
+@keyframes windowHide {
+  0% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+}
+
 .tabs-enter-active,
 .tabs-leave-active {
   transition: all 0.5s;
@@ -15,6 +37,14 @@
   max-width: 0px;
 }
 
+.windowShow {
+  animation: windowShow 0.3s ease-in-out;
+}
+
+.windowHide {
+  animation: windowHide 0.3s ease-in-out;
+}
+
 *::-webkit-scrollbar {
   height: 10px;
 }
@@ -27,7 +57,7 @@
 
 .nav-enter-from,
 .nav-leave-to {
-  max-width: 10px;
+  max-width: 0px;
   opacity: 0;
 }
 

src/views/ComponentsView.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    class="w-full h-full flex items-center justify-center text-2xl font-mono font-bold"
+    class="w-full h-full flex items-center justify-center border-2 border-black border-opacity-20 rounded-xl text-2xl font-mono font-bold"
   >
-    COMPONENTS
+    fea
   </div>
 </template>
 

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full h-full flex items-center justify-center text-2xl font-mono font-bold"
+    class="w-full h-full flex items-center justify-center border-2 border-black border-opacity-20 rounded-xl text-2xl font-mono font-bold"
   >
     HOME
   </div>

src/views/SettingsView.vue

@@ -1,3 +1,7 @@
 <template>
-  <div class="w-full h-full flex items-center justify-center">settings</div>
+  <div
+    class="w-full h-full flex items-center justify-center border-2 border-black border-opacity-20 rounded-xl text-2xl font-mono font-bold"
+  >
+    settings
+  </div>
 </template>

src/views/StatsView.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    class="w-full h-full flex items-center justify-center text-2xl font-mono font-bold"
+    class="w-full h-full flex items-center justify-center border-2 border-black border-opacity-20 rounded-xl text-2xl font-mono font-bold"
   >
-    STATS
+    stats
   </div>
 </template>
 

src/views/SystemView.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    class="w-full h-full flex items-center justify-center text-2xl font-mono font-bold"
+    class="w-full h-full flex items-center justify-center border-2 border-black border-opacity-20 rounded-xl text-2xl font-mono font-bold"
   >
-    SYSTEM
+    system
   </div>
 </template>
 

yarn.lock

@@ -481,6 +481,11 @@ ajv@^6.10.0, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"