Initial commit

src/views/ProfilePage.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import ProfileAccount from '@/components/ProfileAccount.vue'
+import ProfileNotifications from '@/components/ProfileNotifications.vue'
+import ProfileSecurity from '@/components/ProfileSecurity.vue'
+
+const route = useRoute()
+
+const activeTab = ref(route.params.tab || 'account')
+
+// tabs
+const tabs = [
+  { title: 'Account', icon: 'mdi-account-outline', tab: 'account' },
+  { title: 'Security', icon: 'mdi-lock-outline', tab: 'security' },
+  { title: 'Notifications', icon: 'mdi-bell-outline', tab: 'notifications' },
+]
+</script>
+
+<template>
+  <PerfectScrollbar
+    class="pa-4"
+    style="height: calc(100vh - 64px);"
+    :options="{ wheelPropagation: false }"
+  >
+    <VTabs
+      v-model="activeTab"
+      show-arrows
+      class="v-tabs-pill"
+    >
+      <VTab
+        v-for="item in tabs"
+        :key="item.icon"
+        :value="item.tab"
+      >
+        <VIcon
+          size="20"
+          start
+          :icon="item.icon"
+        />
+        {{ item.title }}
+      </VTab>
+    </VTabs>
+
+    <VWindow
+      v-model="activeTab"
+      class="mt-5 disable-tab-transition"
+      :touch="false"
+    >
+      <!-- Account -->
+      <VWindowItem value="account">
+        <ProfileAccount />
+      </VWindowItem>
+
+      <!-- Security -->
+      <VWindowItem value="security">
+        <ProfileSecurity />
+      </VWindowItem>
+
+      <!-- Notification -->
+      <VWindowItem value="notifications">
+        <ProfileNotifications />
+      </VWindowItem>
+    </VWindow>
+  </PerfectScrollbar>
+</template>