From f0542ccdebaa5c5a4734de96f5399fb266992991 Mon Sep 17 00:00:00 2001
From: Mister-Hope <mister-hope@outlook.com>
Date: Fri, 6 Dec 2024 13:35:19 +0800
Subject: [PATCH] style(theme-default): use useTemplateRef

---
 themes/theme-default/src/client/components/VPNavbar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/themes/theme-default/src/client/components/VPNavbar.vue b/themes/theme-default/src/client/components/VPNavbar.vue
index a548aac20f..a78ae28e01 100644
--- a/themes/theme-default/src/client/components/VPNavbar.vue
+++ b/themes/theme-default/src/client/components/VPNavbar.vue
@@ -7,7 +7,7 @@ import { useThemeLocaleData } from '@theme/useThemeData'
 import { DeviceType, useUpdateDeviceStatus } from '@theme/useUpdateDeviceStatus'
 import { hasGlobalComponent } from '@vuepress/helper/client'
 import type { VNode } from 'vue'
-import { computed, ref, resolveComponent } from 'vue'
+import { computed, ref, useTemplateRef, resolveComponent } from 'vue'
 
 defineEmits<{
   toggleSidebar: []
@@ -24,8 +24,8 @@ const SearchBox = hasGlobalComponent('SearchBox')
 
 const themeLocale = useThemeLocaleData()
 
-const navbar = ref<HTMLElement | null>(null)
-const navbarBrand = ref<HTMLElement | null>(null)
+const navbar = useTemplateRef<HTMLElement | null>('navbar')
+const navbarBrand = useTemplateRef<HTMLElement | null>('navbar-brand')
 
 const linksWrapperMaxWidth = ref(0)
 const linksWrapperStyle = computed(() => {
@@ -71,7 +71,7 @@ useUpdateDeviceStatus(
   <header ref="navbar" class="vp-navbar" vp-navbar>
     <VPToggleSidebarButton @toggle="$emit('toggleSidebar')" />
 
-    <span ref="navbarBrand">
+    <span ref="navbar-brand">
       <VPNavbarBrand />
     </span>