feat(theme-default): optimizing css variable acquisition

ecosystem/theme-default/src/client/components/Navbar.vue

@@ -3,8 +3,9 @@ import NavbarBrand from '@theme/NavbarBrand.vue'
 import NavbarItems from '@theme/NavbarItems.vue'
 import ToggleColorModeButton from '@theme/ToggleColorModeButton.vue'
 import ToggleSidebarButton from '@theme/ToggleSidebarButton.vue'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useThemeLocaleData } from '../composables/index.js'
+import { DeviceType, updateDeviceStatus } from '../utils/index.js'
 
 defineEmits(['toggle-sidebar'])
 
@@ -24,27 +25,20 @@ const linksWrapperStyle = computed(() => {
 })
 
 // avoid overlapping of long title and long navbar links
-onMounted(() => {
-  // TODO: migrate to css var
-  // refer to _variables.scss
-  const MOBILE_DESKTOP_BREAKPOINT = 719
+const handleLinksWrapWidth = (mobileDesktopBreakpoint: number): void => {
   const navbarHorizontalPadding =
     getCssValue(navbar.value, 'paddingLeft') +
     getCssValue(navbar.value, 'paddingRight')
-  const handleLinksWrapWidth = (): void => {
-    if (window.innerWidth < MOBILE_DESKTOP_BREAKPOINT) {
-      linksWrapperMaxWidth.value = 0
-    } else {
-      linksWrapperMaxWidth.value =
-        navbar.value!.offsetWidth -
-        navbarHorizontalPadding -
-        (navbarBrand.value?.offsetWidth || 0)
-    }
+  if (window.innerWidth < mobileDesktopBreakpoint) {
+    linksWrapperMaxWidth.value = 0
+  } else {
+    linksWrapperMaxWidth.value =
+      navbar.value!.offsetWidth -
+      navbarHorizontalPadding -
+      (navbarBrand.value?.offsetWidth || 0)
   }
-  handleLinksWrapWidth()
-  window.addEventListener('resize', handleLinksWrapWidth, false)
-  window.addEventListener('orientationchange', handleLinksWrapWidth, false)
-})
+}
+updateDeviceStatus(DeviceType.MOBILE, handleLinksWrapWidth)
 
 function getCssValue(el: HTMLElement | null, property: string): number {
   // NOTE: Known bug, will return 'auto' if style value is 'auto'

ecosystem/theme-default/src/client/components/NavbarItems.vue

@@ -3,7 +3,7 @@ import AutoLink from '@theme/AutoLink.vue'
 import NavbarDropdown from '@theme/NavbarDropdown.vue'
 import { useRouteLocale, useSiteLocaleData } from '@vuepress/client'
 import { isLinkHttp, isString } from '@vuepress/shared'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import type { ComputedRef } from 'vue'
 import { useRouter } from 'vue-router'
 import type {
@@ -12,7 +12,11 @@ import type {
   ResolvedNavbarItem,
 } from '../../shared/index.js'
 import { useNavLink, useThemeLocaleData } from '../composables/index.js'
-import { resolveRepoType } from '../utils/index.js'
+import {
+  DeviceType,
+  resolveRepoType,
+  updateDeviceStatus,
+} from '../utils/index.js'
 
 /**
  * Get navbar config of select language dropdown
@@ -153,22 +157,14 @@ const navbarLinks = computed(() => [
 ])
 
 // avoid overlapping of long title and long navbar links
-onMounted(() => {
-  // TODO: migrate to css var
-  // refer to _variables.scss
-  const MOBILE_DESKTOP_BREAKPOINT = 719
-
-  const handleMobile = (): void => {
-    if (window.innerWidth < MOBILE_DESKTOP_BREAKPOINT) {
-      isMobile.value = true
-    } else {
-      isMobile.value = false
-    }
+const handleMobile = (mobileDesktopBreakpoint: number): void => {
+  if (window.innerWidth < mobileDesktopBreakpoint) {
+    isMobile.value = true
+  } else {
+    isMobile.value = false
   }
-  handleMobile()
-  window.addEventListener('resize', handleMobile, false)
-  window.addEventListener('orientationchange', handleMobile, false)
-})
+}
+updateDeviceStatus(DeviceType.MOBILE, handleMobile)
 </script>
 
 <template>

ecosystem/theme-default/src/client/shim.d.ts

@@ -3,3 +3,11 @@ declare module '*.vue' {
   const comp: ComponentOptions
   export default comp
 }
+
+declare module '*.module.scss?module' {
+  type Variables = {
+    [className: string]: string
+  }
+  const cssVar: Variables
+  export default cssVar
+}

ecosystem/theme-default/src/client/styles/_variables.module.scss

@@ -0,0 +1,5 @@
+@import '_variables';
+
+:export {
+  mobile: $MQMobile;
+}

ecosystem/theme-default/src/client/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './isActiveSidebarItem.js'
 export * from './resolveEditLink.js'
 export * from './resolveRepoType.js'
+export * from './updateDeviceStatus.js'

ecosystem/theme-default/src/client/utils/updateDeviceStatus.ts

@@ -0,0 +1,27 @@
+import { onMounted } from 'vue'
+import cssVars from '../styles/_variables.module.scss?module'
+
+export enum DeviceType {
+  MOBILE = 'mobile',
+}
+
+const DeviceTypeMap = {
+  [DeviceType.MOBILE]: Number(cssVars.mobile?.replace('px', '')),
+}
+
+/**
+ * add listener to detect screen though device type
+ */
+export const updateDeviceStatus = (
+  deviceType: DeviceType,
+  callback: (width: number) => void
+): void => {
+  const width = DeviceTypeMap[deviceType]
+  if (!width) return
+
+  onMounted(() => {
+    callback(width)
+    window.addEventListener('resize', () => callback(width), false)
+    window.addEventListener('orientationchange', () => callback(width), false)
+  })
+}