fix(reactive): move route overflow to settings dropdown

Author: dvcol

src/components/common/navbar/NavbarComponent.vue

@@ -16,6 +16,7 @@ import { NavbarService } from '~/services/navbar.service';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { Header } from '~/styles/layout.style';
 import { useI18n } from '~/utils/i18n.utils';
+import { watchMedia } from '~/utils/window.utils';
 
 const props = defineProps({
   disabled: {
@@ -48,6 +49,16 @@ const navigate = (to: Route) => {
 
 const { enabledRoutes } = useExtensionSettingsStoreRefs();
 
+const isCompact = watchMedia('(max-width: 500px)');
+const isTiny = watchMedia('(max-width: 400px)');
+const threshold = computed(() => (isTiny.value ? 3 : 4));
+const visibleRoutes = computed(() =>
+  isCompact.value ? enabledRoutes.value.slice(0, threshold.value) : enabledRoutes.value,
+);
+const overflowRoutes = computed(() =>
+  isCompact.value ? enabledRoutes.value.slice(threshold.value) : [],
+);
+
 const activableRoutes = computed(() => [...enabledRoutes.value, Route.Settings]);
 
 const activeRoute = computed(() => {
@@ -190,7 +201,7 @@ const onTouchEnd = (e: TouchEvent) => {
         '--n-color-segment': 'inherit',
       }"
     >
-      <template v-for="_route in enabledRoutes" :key="_route">
+      <template v-for="_route in visibleRoutes" :key="_route">
         <NTab
           class="tab"
           :style="
@@ -214,7 +225,11 @@ const onTouchEnd = (e: TouchEvent) => {
         type="segment"
         @click="navigate(Route.Settings)"
       >
-        <NavbarSettingsDropdown v-if="navElement" :parent-element="navElement" />
+        <NavbarSettingsDropdown
+          v-if="navElement"
+          :parent-element="navElement"
+          :routes="overflowRoutes"
+        />
       </NTab>
     </NTabs>
     <div

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -10,17 +10,15 @@ import { computed, defineProps, h, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import type { ArrayElement } from '@dvcol/common-utils/common';
-import type { DropdownProps } from 'naive-ui';
-import type { Component } from 'vue';
+import type { DropdownOption, DropdownProps } from 'naive-ui';
+import type { Component, PropType } from 'vue';
 
 import IconAccount from '~/components/icons/IconAccount.vue';
 import IconAccountAdd from '~/components/icons/IconAccountAdd.vue';
-import IconCog from '~/components/icons/IconCog.vue';
 import IconExternalLink from '~/components/icons/IconExternalLink.vue';
-import IconLightBulb from '~/components/icons/IconLightBulb.vue';
 import IconLogOut from '~/components/icons/IconLogOut.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 { TraktService } from '~/services/trakt.service';
@@ -49,11 +47,16 @@ const onAvatarError = (event: Event) => {
   fallback.value = true;
 };
 
-defineProps({
+const { routes } = defineProps({
   parentElement: {
     type: HTMLElement,
     required: true,
   },
+  routes: {
+    type: Array as PropType<Route[]>,
+    required: false,
+    default: () => [],
+  },
 });
 
 const users = computed(() => {
@@ -82,19 +85,31 @@ const toOption = (
   };
 };
 
-const options = computed<DropdownProps['options']>(() => {
-  const baseOptions: DropdownProps['options'] = [
-    toOption('settings', IconCog),
-    toOption('about', IconLightBulb),
+const { floating, reverse } = useAppStateStoreRefs();
+const options = computed<DropdownOption[]>(() => {
+  const baseOptions: DropdownOption[] = [
+    toOption(Route.Settings, getRouteIcon(Route.Settings)),
+    toOption(Route.About, getRouteIcon(Route.About)),
     { type: 'divider', key: 'external-links' },
     toOption('trakt', IconExternalLink),
     { type: 'divider', key: 'session-divider' },
     toOption('login', IconAccountAdd),
     toOption('logout', IconLogOut),
   ];
 
-  if (!users.value.length) return baseOptions;
+  const _routes = [];
+  if (routes?.length) {
+    _routes.push(
+      ...routes.map(route =>
+        toOption(route, getRouteIcon(route), i18n(route.toLowerCase(), 'route')),
+      ),
+    );
+    _routes.push({ type: 'divider', key: 'routes-divider' });
+  }
+
+  if (!users.value.length) return [..._routes, ...baseOptions];
   return [
+    ..._routes,
     ...users.value.map(([key, value]) =>
       toOption(
         `user-${key}`,
@@ -108,14 +123,14 @@ const options = computed<DropdownProps['options']>(() => {
   ];
 });
 
+const optionsReversed = computed(() =>
+  reverse.value ? [...options.value].reverse() : options.value,
+);
+
 const { loadUser, logout } = useLogout();
 
 const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
   switch (key) {
-    case 'settings':
-      return router.push(Route.Settings);
-    case 'about':
-      return router.push(Route.About);
     case 'trakt':
       return createTab({
         url: ExternaLinks.trakt[TraktService.isStaging ? 'staging' : 'production'],
@@ -125,14 +140,15 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
     case 'logout':
       return logout();
     default:
+      if (Object.values(Route).includes(key as Route)) return router.push(key);
       if (typeof label === 'string' && key.startsWith('user-')) {
         return loadUser(label);
       }
       Logger.error('Unknown key:', key);
   }
 };
+
 const { dropdown } = NavbarService;
-const { floating, reverse } = useAppStateStoreRefs();
 const placement = computed(() => {
   if (reverse.value) return 'top';
   if (floating.value) return 'bottom';
@@ -143,7 +159,7 @@ const placement = computed(() => {
 <template>
   <NDropdown
     trigger="hover"
-    :options="options"
+    :options="optionsReversed"
     :to="parentElement"
     :placement="placement"
     size="small"

src/components/icons/IconSearch.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+    >
+      <path
+        stroke-dasharray="40"
+        stroke-dashoffset="40"
+        d="M10.76 13.24c-2.34 -2.34 -2.34 -6.14 0 -8.49c2.34 -2.34 6.14 -2.34 8.49 0c2.34 2.34 2.34 6.14 0 8.49c-2.34 2.34 -6.14 2.34 -8.49 0Z"
+      >
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          dur="0.5s"
+          values="40;0"
+        />
+      </path>
+      <path stroke-dasharray="12" stroke-dashoffset="12" d="M10.5 13.5l-7.5 7.5">
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          begin="0.5s"
+          dur="0.2s"
+          values="12;0"
+        />
+      </path>
+    </g>
+  </svg>
+</template>

src/components/views/calendar/CalendarNavbar.vue

@@ -125,6 +125,10 @@ const open = ref(false);
   .search-input {
     flex: 1 1 33%;
     min-width: 12rem;
+
+    @media (width < 600px) {
+      min-width: auto;
+    }
   }
 }
 </style>

src/components/views/history/HistoryNavbar.vue

@@ -118,14 +118,18 @@ const open = ref(false);
     min-width: 14rem;
 
     @media (width < 600px) {
-      flex: 1 0 9rem;
+      flex: 1 0 7rem;
       min-width: auto;
     }
   }
 
   .search-input {
     flex: 2 1 calc(46% - 5rem);
     min-width: 12rem;
+
+    @media (width < 600px) {
+      min-width: auto;
+    }
   }
 }
 </style>

src/components/views/watchlist/WatchlistNavbar.vue

@@ -176,6 +176,10 @@ const renderTag = ({ option }: { option: SelectOption }) => option.label?.toStri
   .search-input {
     flex: 1 1 auto;
     min-width: 12rem;
+
+    @media (width < 600px) {
+      min-width: auto;
+    }
   }
 }
 </style>

src/models/router.model.ts

@@ -1,3 +1,16 @@
+import type { Component } from 'vue';
+
+import IconCalendar from '~/components/icons/IconCalendar.vue';
+import IconClipboard from '~/components/icons/IconClipboard.vue';
+import IconCog from '~/components/icons/IconCog.vue';
+import IconExternalLinkRounded from '~/components/icons/IconExternalLinkRounded.vue';
+import IconLightBulb from '~/components/icons/IconLightBulb.vue';
+import IconList from '~/components/icons/IconList.vue';
+import IconLogIn from '~/components/icons/IconLogIn.vue';
+import IconMovie from '~/components/icons/IconMovie.vue';
+import IconRestore from '~/components/icons/IconRestore.vue';
+import IconSearch from '~/components/icons/IconSearch.vue';
+
 export const RouterStorageKey = {
   LastRoute: 'app.state.last-route',
 } as const;
@@ -13,3 +26,28 @@ export enum Route {
   About = 'about',
   Login = 'login',
 }
+
+export const getRouteIcon = (route: Route): Component => {
+  switch (route) {
+    case Route.Progress:
+      return IconClipboard;
+    case Route.Calendar:
+      return IconCalendar;
+    case Route.Releases:
+      return IconMovie;
+    case Route.History:
+      return IconRestore;
+    case Route.Watchlist:
+      return IconList;
+    case Route.Search:
+      return IconSearch;
+    case Route.Settings:
+      return IconCog;
+    case Route.About:
+      return IconLightBulb;
+    case Route.Login:
+      return IconLogIn;
+    default:
+      return IconExternalLinkRounded;
+  }
+};