refactor: settings page

src/locales/en/newtab.json

@@ -7,6 +7,9 @@
       "label": "Language",
       "helpTranslate": "Can't find your language? Help translate.",
       "reloadPage": "Reload the page to take effect"
+    },
+    "menu": {
+      "general": "General"
     }
   },
   "workflow": {

src/newtab/pages/Settings.vue

@@ -1,52 +1,40 @@
 <template>
   <div class="container pt-8 pb-4">
     <h1 class="text-2xl font-semibold mb-10">{{ t('common.settings') }}</h1>
-    <div class="flex items-center">
-      <div id="languages">
-        <ui-select
-          :model-value="settings.locale"
-          :label="t('settings.language.label')"
-          class="w-80"
-          @change="updateLanguage"
+    <div class="flex items-start">
+      <ui-list class="w-64 mr-12 space-y-2">
+        <router-link
+          v-for="menu in menus"
+          :key="menu.id"
+          v-slot="{ href, navigate, isActive }"
+          custom
+          :to="menu.path"
         >
-          <option
-            v-for="locale in supportLocales"
-            :key="locale.id"
-            :value="locale.id"
+          <ui-list-item
+            :href="href"
+            :class="[
+              isActive
+                ? 'bg-box-transparent'
+                : 'text-gray-600 dark:text-gray-600',
+            ]"
+            tag="a"
+            @click="navigate"
           >
-            {{ locale.name }}
-          </option>
-        </ui-select>
-        <a
-          class="block text-sm text-gray-600 dark:text-gray-200 ml-1"
-          href="https://github.com/Kholid060/automa/wiki/Help-Translate"
-          target="_blank"
-          rel="noopener"
-        >
-          {{ t('settings.language.helpTranslate') }}
-        </a>
+            <v-remixicon :name="menu.icon" class="mr-2 -ml-1" />
+            {{ t(`settings.menu.${menu.id}`) }}
+          </ui-list-item>
+        </router-link>
+      </ui-list>
+      <div class="settings-content">
+        <router-view />
       </div>
-      <p v-if="isLangChange" class="inline-block ml-4">
-        {{ t('settings.language.reloadPage') }}
-      </p>
     </div>
   </div>
 </template>
 <script setup>
-import { computed, ref } from 'vue';
-import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
-import { supportLocales } from '@/utils/shared';
 
 const { t } = useI18n();
-const store = useStore();
-
-const isLangChange = ref(false);
-const settings = computed(() => store.state.settings);
-
-async function updateLanguage(value) {
-  isLangChange.value = true;
 
-  store.dispatch('updateSettings', { locale: value });
-}
+const menus = [{ id: 'general', path: '/settings', icon: 'riSettings3Line' }];
 </script>

src/newtab/pages/settings/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="flex items-center">
+    <div id="languages">
+      <ui-select
+        :model-value="settings.locale"
+        :label="t('settings.language.label')"
+        class="w-80"
+        @change="updateLanguage"
+      >
+        <option
+          v-for="locale in supportLocales"
+          :key="locale.id"
+          :value="locale.id"
+        >
+          {{ locale.name }}
+        </option>
+      </ui-select>
+      <a
+        class="block text-sm text-gray-600 dark:text-gray-200 ml-1"
+        href="https://github.com/Kholid060/automa/wiki/Help-Translate"
+        target="_blank"
+        rel="noopener"
+      >
+        {{ t('settings.language.helpTranslate') }}
+      </a>
+    </div>
+    <p v-if="isLangChange" class="inline-block ml-4">
+      {{ t('settings.language.reloadPage') }}
+    </p>
+  </div>
+</template>
+<script setup>
+import { computed, ref } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { supportLocales } from '@/utils/shared';
+
+const { t } = useI18n();
+const store = useStore();
+
+const isLangChange = ref(false);
+const settings = computed(() => store.state.settings);
+
+async function updateLanguage(value) {
+  isLangChange.value = true;
+
+  store.dispatch('updateSettings', { locale: value });
+}
+</script>

src/newtab/router.js

@@ -7,6 +7,7 @@ import CollectionsDetails from './pages/collections/[id].vue';
 import Logs from './pages/Logs.vue';
 import LogsDetails from './pages/logs/[id].vue';
 import Settings from './pages/Settings.vue';
+import SettingsIndex from './pages/settings/index.vue';
 
 const routes = [
   {
@@ -45,9 +46,9 @@ const routes = [
     component: LogsDetails,
   },
   {
-    name: 'settings',
     path: '/settings',
     component: Settings,
+    children: [{ path: '', component: SettingsIndex }],
   },
 ];