fix(responsive): toggle between label or icon in small screens

Author: dvcol

src/components/common/navbar/NavbarComponent.vue

@@ -4,13 +4,13 @@ import {
   SwipeDirection,
   type SwipeDirections,
 } from '@dvcol/common-utils/common/touch';
-import { NTab, NTabs } from 'naive-ui';
+import { NFlex, NIcon, NTab, NTabs } from 'naive-ui';
 import { computed, ref, toRefs, useSlots } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import NavbarSettingsDropdown from '~/components/common/navbar/NavbarSettingsDopdown.vue';
 
-import { Route } from '~/models/router.model';
+import { getRouteIcon, Route } from '~/models/router.model';
 import { Logger } from '~/services/logger.service';
 import { NavbarService } from '~/services/navbar.service';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
@@ -47,11 +47,14 @@ const navigate = (to: Route) => {
   router.push({ name: to });
 };
 
-const { enabledRoutes } = useExtensionSettingsStoreRefs();
+const { enabledRoutes, iconOnly } = useExtensionSettingsStoreRefs();
 
 const isCompact = watchMedia('(max-width: 500px)');
 const isTiny = watchMedia('(max-width: 400px)');
-const threshold = computed(() => (isTiny.value ? 3 : 4));
+const threshold = computed(() => {
+  if (iconOnly.value) return 6;
+  return isTiny.value ? 3 : 4;
+});
 const visibleRoutes = computed(() =>
   isCompact.value ? enabledRoutes.value.slice(0, threshold.value) : enabledRoutes.value,
 );
@@ -213,9 +216,16 @@ const onTouchEnd = (e: TouchEvent) => {
           type="segment"
           @click="navigate(_route)"
         >
-          <span>
-            {{ i18n(_route.toLowerCase()) }}
-          </span>
+          <NFlex
+            align="center"
+            class="tab-label"
+            :class="{ icon: iconOnly, overflow: enabledRoutes.length > 4 }"
+          >
+            <NIcon :component="getRouteIcon(_route)" size="1em" />
+            <span class="text">
+              {{ i18n(_route.toLowerCase()) }}
+            </span>
+          </NFlex>
         </NTab>
       </template>
       <NTab
@@ -294,6 +304,35 @@ nav {
     justify-content: center;
     min-height: layout.$header-navbar-height;
 
+    .tab-label {
+      i {
+        margin-top: 0.1rem;
+        margin-right: -0.25rem;
+      }
+
+      &.overflow {
+        @media (width < 700px) {
+          &:not(.icon) i {
+            display: none;
+          }
+
+          &.icon .text {
+            display: none;
+          }
+        }
+      }
+
+      @media (width < 550px) {
+        &:not(.icon) i {
+          display: none;
+        }
+
+        &.icon .text {
+          display: none;
+        }
+      }
+    }
+
     :deep(.n-tabs-capsule) {
       height: calc(#{layout.$header-navbar-height} - 0.75rem) !important;
       border-radius: 0.5rem !important;

src/components/views/settings/SettingsTabs.vue

@@ -53,6 +53,7 @@ const {
   backgroundColor,
   loadingHysteresis,
   navbarPosition,
+  iconOnly,
 } = useExtensionSettingsStoreRefs();
 
 const { getIcon, fetchLists } = useListsStore();
@@ -222,6 +223,14 @@ const onColor = () => {
       </div>
     </SettingsFormItem>
 
+    <!--  Icon Only  -->
+    <SettingsFormItem :label="i18n('label_icon_only')">
+      <NSwitch v-model:value="iconOnly" class="form-switch">
+        <template #checked>{{ i18n('on', 'common', 'button') }}</template>
+        <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
+      </NSwitch>
+    </SettingsFormItem>
+
     <!--  Restore tab  -->
     <SettingsFormItem :label="i18n('label_restore_tab')">
       <NSwitch v-model:value="restoreRoute" class="form-switch">

src/i18n/en/settings/settings-tabs.json

@@ -15,6 +15,10 @@
     "message": "Navbar Position",
     "description": "Label for the 'Navbar Position' setting"
   },
+  "settings__tabs__label_icon_only": {
+    "message": "Display icon tabs for small screens",
+    "description": "Label for the 'Display icon tabs in small screens' setting"
+  },
   "settings__tabs__label_restore_tab": {
     "message": "Restore active tab on startup",
     "description": "Label for the 'Restore active tab on startup' setting"

src/stores/settings/extension.store.ts

@@ -52,6 +52,7 @@ type ExtensionSettings = {
   backgroundColor: string;
   loadingHysteresis: number;
   navbarPosition: NavbarPositions;
+  iconOnly: boolean;
 };
 
 const ExtensionSettingsConstants = {
@@ -73,6 +74,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
   const backgroundColor = ref('transparent');
   const loadingHysteresis = ref(-1);
   const navbarPosition = ref<NavbarPositions>(NavbarPosition.Auto);
+  const iconOnly = ref(true);
 
   const clearState = () => {
     Object.assign(cacheRetention, DefaultCacheRetention);
@@ -97,6 +99,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
         backgroundColor: backgroundColor.value,
         loadingHysteresis: loadingHysteresis.value,
         navbarPosition: navbarPosition.value,
+        iconOnly: iconOnly.value,
       }),
     500,
   );
@@ -132,6 +135,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
     if (restored?.backgroundColor !== undefined) backgroundColor.value = restored.backgroundColor;
     if (restored?.loadingHysteresis !== undefined) loadingHysteresis.value = restored.loadingHysteresis;
     if (restored?.navbarPosition !== undefined) navbarPosition.value = restored.navbarPosition;
+    if (restored?.iconOnly !== undefined) iconOnly.value = restored.iconOnly;
 
     if (!chromeRuntimeId) routeDictionary[Route.Progress] = false;
   };
@@ -255,6 +259,13 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
         saveState().catch(err => Logger.error('Failed to save navbar position extension settings', { value, err }));
       },
     }),
+    iconOnly: computed({
+      get: () => iconOnly.value,
+      set: (value: boolean) => {
+        iconOnly.value = value;
+        saveState().catch(err => Logger.error('Failed to save icon only extension settings', { value, err }));
+      },
+    }),
   };
 });