♻️ OAuth authenticate

web/src/layouts/master.vue

@@ -1,22 +1,5 @@
 <template>
-  <v-app-bar height="64" color="primary" scroll-behavior="elevate" flat>
-    <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
-      <router-link :to="{ name: 'dashboard' }" class="flex gap-1">
-        <img src="/favicon.png" width="27" height="24" class="icon-filter" />
-        <h2 class="ml-2 text-lg font-500">Solarpass</h2>
-      </router-link>
-
-      <v-spacer />
-
-      <div class="me-2">
-        <notification-list />
-      </div>
-
-      <div>
-        <user-menu />
-      </div>
-    </div>
-  </v-app-bar>
+  <AppBar />
 
   <v-main>
     <router-view />
@@ -25,8 +8,7 @@
 
 <script setup lang="ts">
 import { useUserinfo } from "@/stores/userinfo"
-import NotificationList from "@/components/NotificationList.vue"
-import UserMenu from "@/components/UserMenu.vue"
+import AppBar from "@/components/navigation/AppBar.vue"
 
 const id = useUserinfo()
 
@@ -34,12 +16,6 @@ id.readProfiles()
 </script>
 
 <style scoped>
-.editor-fab {
-  position: fixed !important;
-  bottom: 16px;
-  right: 20px;
-}
-
 .icon-filter {
   filter: invert(100%) sepia(100%) saturate(14%) hue-rotate(212deg) brightness(104%) contrast(104%);
 }

web/src/layouts/user-center.vue

@@ -1,21 +1,30 @@
 <template>
-  <v-container class="pt-6 px-6">
-    <v-row>
-      <v-col :cols="12" :xs="12" :sm="12" :md="4" :lg="3">
-        <v-card title="Navigation">
-          <v-list density="comfortable">
-            <v-list-item title="Dashboard" prepend-icon="mdi-view-dashboard" :to="{ name: 'dashboard' }" exact />
-            <v-list-item title="Personalize" prepend-icon="mdi-card-bulleted-outline" :to="{ name: 'personalize' }" />
-            <v-list-item title="Security" prepend-icon="mdi-security" :to="{ name: 'security' }" />
-          </v-list>
-        </v-card>
-      </v-col>
+  <AppBar>
+    <template #extension>
+      <v-tabs align-tabs="title" color="white">
+        <v-tab text="Dashboard" prepend-icon="mdi-view-dashboard" :to="{ name: 'dashboard' }" exact />
+        <v-tab text="Personalize" prepend-icon="mdi-card-bulleted-outline" :to="{ name: 'personalize' }" exact />
+        <v-tab text="Security" prepend-icon="mdi-security" :to="{ name: 'security' }" exact />
+      </v-tabs>
+    </template>
+  </AppBar>
 
-      <v-col :cols="12" :xs="12" :sm="12" :md="8" :lg="9">
-        <router-view />
-      </v-col>
-    </v-row>
-  </v-container>
+  <v-main>
+    <v-container class="pt-6 px-6 p-container">
+      <router-view />
+    </v-container>
+
+    <Copyright />
+  </v-main>
 </template>
+
 <script setup lang="ts">
-</script>
+import AppBar from "@/components/navigation/AppBar.vue"
+import Copyright from "@/components/Copyright.vue"
+</script>
+
+<style scoped>
+.p-container {
+  max-width: 64rem;
+}
+</style>