From aefd68f94fb686aa547e47b3438439f239b73971 Mon Sep 17 00:00:00 2001
From: Patrick Cate <patrickcate@users.noreply.github.com>
Date: Sun, 18 Feb 2024 23:07:16 -0500
Subject: [PATCH] fix(UsaNav): support ssr by adding mounted check to media
 query evaluation

---
 src/components/UsaNav/UsaNav.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/UsaNav/UsaNav.vue b/src/components/UsaNav/UsaNav.vue
index adc57c21..2d827a23 100644
--- a/src/components/UsaNav/UsaNav.vue
+++ b/src/components/UsaNav/UsaNav.vue
@@ -1,5 +1,14 @@
 <script setup>
-import { computed, ref, watch, onBeforeUnmount, nextTick, inject, h } from 'vue'
+import {
+  computed,
+  ref,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  inject,
+  h,
+} from 'vue'
 import { IMAGE_PATH, MOBILE_MENU_BREAKPOINT } from '@/utils/constants.js'
 import { onKeyStroke, onClickOutside, useMediaQuery } from '@vueuse/core'
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
@@ -38,7 +47,13 @@ const props = defineProps({
 
 const nav = ref(null)
 const { activate, deactivate } = useFocusTrap(nav)
-const largeScreen = useMediaQuery(`(min-width: ${mobileMenuBreakpoint})`)
+const isMounted = ref(false)
+const largeScreenMediaQuery = useMediaQuery(
+  `(min-width: ${mobileMenuBreakpoint})`
+)
+const largeScreen = computed(() =>
+  isMounted.value ? largeScreenMediaQuery.value : true
+)
 
 watch(isMobileMenuOpen, async isMenuOpen => {
   if (isMenuOpen) {
@@ -56,6 +71,10 @@ watch(largeScreen, isLargeScreen => {
   }
 })
 
+onMounted(() => {
+  isMounted.value = true
+})
+
 onBeforeUnmount(() => {
   if (isMobileMenuOpen.value) {
     closeMobileMenu()