feat: added a profile settings and settings nav (#432)

pages/settings.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+definePageMeta({
+  wideLayout: true,
+})
+
+const route = useRoute()
+
+const isRootPath = computedEager(() => route.name === 'settings')
+</script>
+
+<template>
+  <div min-h-screen flex>
+    <div border="x base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
+      <MainContent>
+        <template #title>
+          <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+            <div i-ri:settings-4-line />
+            <span>{{ $t('nav_side.settings') }}</span>
+          </div>
+        </template>
+        <div xl:w-97 lg:w-78 w-full>
+          <SettingsNavItem
+            command
+            icon="i-ri:user-line"
+            :text="$t('settings.profile.label')"
+            to="/settings/profile"
+          />
+          <SettingsNavItem
+            command
+            icon="i-ri:settings-2-line"
+            :text="$t('settings.preferences.label')"
+            to="/settings/preferences"
+          />
+        </div>
+      </MainContent>
+    </div>
+    <div flex-1 :class="isRootPath ? 'hidden lg:block' : 'block'">
+      <NuxtPage />
+    </div>
+  </div>
+</template>