feat: move nav footer items to settings

components/nav/NavBottomMoreMenu.vue

@@ -81,34 +81,17 @@ onBeforeUnmount(() => {
               <span class="i-ri:sun-line dark:i-ri:moon-line flex-shrink-0 text-xl mr-4 !align-middle" />
               {{ !isDark ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }}
             </button>
-            <!-- Switch languages -->
-            <NavSelectLanguage>
-              <button
-                flex flex-row items-center
-                block px-5 py-2 focus-blue w-full
-                text-sm text-base capitalize text-left whitespace-nowrap
-                transition-colors duration-200 transform
-                hover="bg-gray-100 dark:(bg-gray-700 text-white)"
-                @click.stop
-              >
-                <span class="i-ri:earth-line flex-shrink-0 text-xl mr-4 !align-middle" />
-                {{ $t('nav.select_language') }}
-              </button>
-            </NavSelectLanguage>
-            <!-- Switch font size -->
-            <NavSelectFontSize>
-              <button
-                flex flex-row items-center
-                block px-5 py-2 focus-blue w-full
-                text-sm text-base capitalize text-left whitespace-nowrap
-                transition-colors duration-200 transform
-                hover="bg-gray-100 dark:(bg-gray-700 text-white)"
-                @click.stop
-              >
-                <span class="i-ri:font-size flex-shrink-0 text-xl mr-4 !align-middle" />
-                {{ $t('nav.select_font_size') }}
-              </button>
-            </NavSelectFontSize>
+            <NuxtLink
+              flex flex-row items-center
+              block px-5 py-2 focus-blue w-full
+              text-sm text-base capitalize text-left whitespace-nowrap
+              transition-colors duration-200 transform
+              hover="bg-gray-100 dark:(bg-gray-700 text-white)"
+              to="/settings"
+            >
+              <span class="i-ri:settings-2-line flex-shrink-0 text-xl mr-4 !align-middle" />
+              {{ $t('nav.settings') }}
+            </NuxtLink>
           </div>
         </div>
       </div>

components/nav/NavFooter.vue

@@ -31,20 +31,6 @@ const buildTimeAgo = useTimeAgo(buildTimeDate, timeAgoOptions)
           :aria-label="$t('nav.settings')"
         />
       </CommonTooltip>
-      <NavSelectLanguage>
-        <CommonTooltip :content="$t('nav.select_language')">
-          <button flex :aria-label="$t('nav.select_language')">
-            <div i-ri:earth-line text-lg />
-          </button>
-        </CommonTooltip>
-      </NavSelectLanguage>
-      <NavSelectFontSize>
-        <CommonTooltip :content="$t('nav.select_font_size')">
-          <button flex :aria-label="$t('nav.select_font_size')">
-            <div i-ri:font-size text-lg />
-          </button>
-        </CommonTooltip>
-      </NavSelectFontSize>
     </div>
     <div>
       <button cursor-pointer hover:underline @click="openPreviewHelp">

components/nav/SelectFontSize.vue

@@ -1,23 +0,0 @@
-<script lang="ts" setup>
-import type { FontSize } from '~/composables/fontSize'
-
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
-const fontSize = getFontSize()
-</script>
-
-<template>
-  <CommonDropdown>
-    <slot />
-
-    <template #popper>
-      <CommonDropdownItem
-        v-for="size in sizes"
-        :key="size"
-        :checked="size === fontSize"
-        @click="fontSize = size"
-      >
-        {{ size }}
-      </CommonDropdownItem>
-    </template>
-  </CommonDropdown>
-</template>

components/nav/SelectLanguage.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import type { ComputedRef } from 'vue'
-import type { LocaleObject } from '#i18n'
-
-const { locale, t, setLocale } = useI18n()
-const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
-</script>
-
-<template>
-  <CommonDropdown>
-    <slot />
-
-    <template #popper>
-      <CommonDropdownItem
-        v-for="item in locales"
-        :key="item.code"
-        :checked="item.code === locale"
-        @click="setLocale(item.code)"
-      >
-        {{ item.name }}
-      </CommonDropdownItem>
-    </template>
-  </CommonDropdown>
-</template>