refactor: per-request mobile detection

frontend_nuxt/components/Dropdown.vue

@@ -147,7 +147,7 @@
 
 <script>
 import { ref, computed, watch, onMounted } from "vue"
-import { isMobile } from "~/utils/screen"
+import { useIsMobile } from "~/utils/screen"
 
 
 export default {
@@ -176,6 +176,7 @@ export default {
     const loaded = ref(false)
     const loading = ref(false)
     const wrapper = ref(null)
+    const isMobile = useIsMobile()
 
     const toggle = () => {
       open.value = !open.value

frontend_nuxt/components/HeaderComponent.vue

@@ -50,7 +50,7 @@ import { watch, nextTick } from 'vue'
 import { fetchUnreadCount, notificationState } from '~/utils/notification'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
-import { isMobile } from '~/utils/screen'
+import { useIsMobile } from '~/utils/screen'
 import { ClientOnly } from '#components'
 
 export default {
@@ -71,7 +71,7 @@ export default {
   },
   setup() {
     const isLogin = computed(() => authState.loggedIn)
-    const isMobile = computed(() => isMobile.value)
+    const isMobile = useIsMobile()
     const unreadCount = computed(() => notificationState.unreadCount)
     const router = useRouter()
 

frontend_nuxt/components/NotificationContainer.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { isMobile } from '../utils/screen'
+import { useIsMobile } from '../utils/screen'
 export default {
   name: 'NotificationContainer',
   props: {
@@ -21,6 +21,7 @@ export default {
     markRead: { type: Function, required: true }
   },
   setup() {
+    const isMobile = useIsMobile()
     return {
       isMobile
     }

frontend_nuxt/components/SearchDropdown.vue

@@ -24,7 +24,7 @@
 
 <script>
 import { ref, watch } from 'vue'
-import { isMobile } from '~/utils/screen'
+import { useIsMobile } from '~/utils/screen'
 import { useRouter } from 'vue-router'
 import Dropdown from '~/components/Dropdown.vue'
 import { API_BASE_URL } from '~/main'
@@ -40,6 +40,7 @@ export default {
     const selected = ref(null)
     const results = ref([])
     const dropdown = ref(null)
+    const isMobile = useIsMobile()
 
     const toggle = () => {
       dropdown.value.toggle()