feat: replace settings with a full page

app/components/Sidenav/Header.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { DialogType } from '~/composables/useDialog';
-
 const { user, signOut } = useAuth();
 
 // to prevent the user details from going blank for a 
@@ -16,10 +14,14 @@ watch(user, () => {
     cachedUser.value = user.value;
 })
 
-const { openDialog } = useDialog();
-
 const { isHovered } = useSidenavContext();
 
+const openSettings = async () => {
+    dropdownOpen.value = false;
+
+    await navigateTo('/settings');
+};
+
 const handleLogout = async () => {
     await signOut();
 
@@ -31,11 +33,7 @@ const handleLogout = async () => {
     <header class="flex items-center justify-between overflow-hidden">
         <button @click="dropdownOpen = !dropdownOpen"
             class="flex gap-1 pr-1 items-center @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
-            <div
-                :class="['w-9 h-9 md:w-7 md:h-7 flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', user?.image ? '' : 'border border-[var(--color-border)]']">
-                <img v-if="cachedUser?.image" :src="cachedUser.image" class="w-full h-full object-cover" />
-                <span v-else class="w-5.5 h-5.5 md:h-4 md:w-4 i-mynaui-user text-[var(--text-secondary)]"></span>
-            </div>
+            <UserAvatar :user="cachedUser" class="w-9 h-9 md:w-7 md:h-7 rounded-lg md:text-sm" />
             <span
                 class="md:text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
                 {{ cachedUser?.name }}
@@ -55,7 +53,7 @@ const handleLogout = async () => {
             leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
             <div v-if="dropdownOpen" v-click-outside="() => dropdownOpen = false"
                 class="w-full top-full text-sm mt-1 absolute z-30 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 flex flex-col gap-2">
-                <button @click="dropdownOpen = false; openDialog(DialogType.Settings)"
+                <button @click="openSettings"
                     class="text-left px-3 py-1.5 items-center gap-1 @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                     <span class="i-mynaui-cog-four text-4.5"></span>
                     <span>Settings</span>