From 8eeb709675859012e5c11b9ce844bdffbacdcf48 Mon Sep 17 00:00:00 2001
From: June Hansen <44864244+Kahera@users.noreply.github.com>
Date: Sun, 14 Jan 2024 19:49:23 +0100
Subject: [PATCH] Ensuring language selector component is created anew when
 screen size change, to avoid css being wrong if language has been changed
 between changing screen sizes

---
 src/components/NavbarComponent.vue | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/NavbarComponent.vue b/src/components/NavbarComponent.vue
index aa9d554..61f1643 100644
--- a/src/components/NavbarComponent.vue
+++ b/src/components/NavbarComponent.vue
@@ -8,10 +8,18 @@ import { useDarkModeStore } from '@/stores/darkMode';
 import Dropdown from '@/components/DropdownComponent.vue';
 import Button from '@/components/ButtonComponent.vue';
 import LanguageSelector from './LanguageSelector.vue';
+import { onUnmounted, ref } from 'vue';
 
 // Variables
 const darkModeStore = useDarkModeStore();
 
+// Screen size variable
+const isSmallScreen = ref(false);
+checkWindowSize();
+function checkWindowSize() {
+   isSmallScreen.value = window.matchMedia('(max-width: 768px)').matches;
+}
+window.addEventListener('resize', () => checkWindowSize());
 
 function getNavIcon(name: string | undefined) {
   switch (name) {
@@ -26,6 +34,8 @@ function getNavIcon(name: string | undefined) {
   }
 }
 
+// Destroy event listener on unmount
+onUnmounted(() => window.removeEventListener('resize', () => checkWindowSize()));
 </script>
 
 <template>
@@ -56,7 +66,12 @@ function getNavIcon(name: string | undefined) {
       </RouterLink>
     </nav>
 
-    <LanguageSelector class="max-md:hidden w-28" />
+    <!-- Using if here to ensure new component is generated on resize,
+         in case of language change between size changes -->
+    <LanguageSelector
+      v-if="!isSmallScreen"
+      class="w-28"
+    />
 
     <!-- Dark/light mode for larger screens -->
     <Button
@@ -67,8 +82,8 @@ function getNavIcon(name: string | undefined) {
       class="max-md:hidden focus:outline-1 focus:outline-primary-light"
       @click="darkModeStore.toggle()"
     />
-    <!-- Dropdown navigation for smaller screens -->
-    <nav class="md:hidden">
+    <!-- Dropdown navigation for smaller screens, see v-if explanation above LanguageSelector -->
+    <nav v-if="isSmallScreen">
       <!-- Dropdown on small screens, link list on larger -->
       <Dropdown
         :position="'right'"