improve(ui): setting

components/common/AppBar.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
-    <nav class="flex h-full items-center justify-between">
+    <nav
+      class="flex h-full items-center justify-between border-b border-slate-100 border-s-teal-100 bg-white dark:border-slate-900 dark:bg-primary-500"
+    >
       <ul class="flex h-full">
         <li>
           <div
-            class="flex h-full w-14 items-center justify-center bg-gray-100 transition-all hover:bg-primary-400 hover:text-white dark:bg-slate-700"
+            class="flex h-full w-14 items-center justify-center bg-slate-100 transition-all hover:bg-primary-400 hover:text-white dark:bg-primary-500"
           >
             <Icon name="iconamoon:apps" size="18" />
           </div>
@@ -42,7 +44,7 @@
           </template>
         </n-input>
         <button
-          class="flex h-full w-12 items-center justify-center p-2 text-center transition-all hover:bg-gray-50 dark:hover:bg-gray-800 md:hidden"
+          class="flex h-full w-12 items-center justify-center p-2 text-center transition-all hover:bg-gray-50 md:hidden dark:hover:bg-gray-800"
         >
           <Icon name="fluent:search-20-regular" />
         </button>

pages/settings.vue

@@ -17,7 +17,7 @@
             v-show="!search.length"
             to="/settings/accounts"
             class="block p-2"
-            active-class="bg-primary-100 rounded-xl"
+            active-class="bg-primary-100 rounded-xl dark:bg-primary-500"
           >
             <n-thing title="Mark AI">
               <template #avatar>
@@ -29,7 +29,7 @@
 
           <article
             v-if="!filteredLinks.length"
-            class="flex flex-col items-center justify-end rounded-lg bg-slate-50 p-4 text-slate-500"
+            class="flex flex-col items-center justify-end rounded-lg bg-slate-50 p-4 text-slate-500 dark:bg-slate-800"
           >
             <Icon name="system-uicons:search" size="30" />
             <span>{{ $t('no_result') }}</span>
@@ -43,7 +43,7 @@
             :key="index"
             :to="item.to"
             class="flex items-center gap-2 rounded-md px-2 py-1"
-            active-class="bg-primary-100 text-primary-500"
+            active-class="bg-primary-100 text-primary-500 dark:bg-primary-500 dark:text-white"
           >
             <Icon :name="item.icon" size="18" />
             <span>{{ item.title }}</span>

pages/settings/accounts/index.vue

@@ -1,7 +1,50 @@
 <template>
   <div>
+    <nav class="mb-4 flex flex-col items-center justify-center space-y-2">
+      <div class="group relative flex items-center justify-center">
+        <n-avatar
+          circle
+          :size="90"
+          alt="Mark AI"
+          src="https://avatars.githubusercontent.com/u/18229355?v=4"
+        ></n-avatar>
+        <n-button
+          circle
+          type="primary"
+          size="small"
+          class="invisible absolute bottom-0 right-1 group-hover:visible"
+        >
+          <Icon name="ic:outline-mode-edit-outline" size="18" />
+        </n-button>
+      </div>
+      <h2 class="text-xl">Mark AI</h2>
+      <h3>[email protected]</h3>
+    </nav>
+
+    <n-card class="mb-4">
+      <ul class="divide-y divide-slate-100 dark:divide-slate-800">
+        <li class="flex justify-between py-2">
+          <div class="flex items-center gap-2">
+            <Icon name="solar:shield-user-bold-duotone" size="20" />
+            <span>Personal Information</span>
+          </div>
+          <Icon name="system-uicons:chevron-right" size="20" />
+        </li>
+        <li class="flex justify-between py-2">
+          <div class="flex items-center gap-2">
+            <Icon
+              name="solar:shield-keyhole-minimalistic-bold-duotone"
+              size="20"
+            />
+            <span>Sign-In & Security</span>
+          </div>
+          <Icon name="system-uicons:chevron-right" size="20" />
+        </li>
+      </ul>
+    </n-card>
+
     <n-card>
-      <ul class="divide-y">
+      <ul class="divide-y divide-slate-100 dark:divide-slate-800">
         <li class="flex justify-between py-2">
           <span>
             {{ $t('language') }}
@@ -34,8 +77,13 @@
         </li>
       </ul>
     </n-card>
-    <article class="mt-4 flex justify-end">
+    <article class="mt-4 flex justify-between">
       <n-button @click="signOut">{{ $t('sign_out') }}</n-button>
+      <n-button circle ghost>
+        <template #icon>
+          <Icon name="solar:question-circle-line-duotone" size="18" />
+        </template>
+      </n-button>
     </article>
   </div>
 </template>