making isMobile property reactive to window resizing

public/js/apps/Cis/Cis.js

@@ -252,19 +252,12 @@ const app = Vue.createApp({
 	name: 'CisApp',
 	data: () => ({
 		appSideMenuEntries: {},
+		windowWidth: 0,
 	}),
-	components: {},
-	computed: {
-		isMobile() {
-			const smallScreen = window.matchMedia("(max-width: 767px)").matches;
-			const touchCapable = ("ontouchstart" in window) || navigator.maxTouchPoints > 0;
-			return smallScreen;// && touchCapable;
-		},
-	},
 	provide() {
 		return { // provide injectable & watchable language property
 			language: Vue.computed(() => this.$p.user_language),
-			isMobile: this.isMobile,
+			isMobile: Vue.computed(() => this.windowWidth < 767),
 		}	
 	},
 	methods: {
@@ -300,14 +293,21 @@ const app = Vue.createApp({
 				this.$router.push(route);
 				
 			}
-		}
+		},
+		handleWindowResize() {
+			this.windowWidth = window.innerWidth;
+		},
 	},
-	mounted() {
+	created() {
+		this.windowWidth = window.innerWidth;
+	},
+	async mounted() {
 		document.addEventListener('click', this.handleClick);
-		
+		window.addEventListener("resize", this.handleWindowResize);
 	},
 	beforeUnmount() {
 		document.removeEventListener('click', this.handleClick);
+		window.removeEventListener("resize", this.handleWindowResize);
 	},
 });
 

public/js/apps/Cis/Menu.js

@@ -134,26 +134,26 @@ const app = Vue.createApp({
 						childactions: []
 					}
                 }
-            }
+            },
+			windowWidth: 0,
         };
     },
-	computed: {
-		isMobile() {
-			const smallScreen = window.matchMedia("(max-width: 767px)").matches;
-			const touchCapable = ("ontouchstart" in window) || navigator.maxTouchPoints > 0;
-			return smallScreen;// && touchCapable;
-		},
-	},
 	provide() {
 		return {
-			isMobile: this.isMobile,
+			isMobile: Vue.computed(() => this.windowWidth < 767),
 		}
 	},
     methods: {
         searchfunction: function(searchsettings) {
         	return this.$api.call(ApiSearchbar.searchCis(searchsettings));
-        }
+        },
+		handleWindowResize() {
+			this.windowWidth = window.innerWidth;
+		},
     },
+	created() {
+		this.windowWidth = window.innerWidth;
+	},
 	async mounted() {
 		const openOtherLvPlanAction = {
 			label: Vue.computed(() => this.$p.t("lehre/stundenplan")),
@@ -183,6 +183,10 @@ const app = Vue.createApp({
 				openOtherLvPlanAction,
 			);
 		}
+		window.addEventListener("resize", this.handleWindowResize);
+	},
+	beforeUnmount() {
+		window.removeEventListener("resize", this.handleWindowResize);
 	},
 });
 

public/js/components/Cis/Menu.js

@@ -114,8 +114,8 @@ export default {
 	},
     template: /*html*/`
 	<div
+		:class="{'collapse multi-collapse collapse-horizontal show': isMobile}"
 		id="header-options-collapsible"
-		class="collapse multi-collapse collapse-horizontal show"
 	>
 		<div class="d-flex flex-row align-items-center gap-2 h-100" style="width: 79px">
 			<button id="nav-main-btn" class="navbar-toggler rounded-0 px-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
@@ -144,7 +144,7 @@ export default {
 
 	<div
 		id="header-usermenu-collapsible"
-		class="collapse multi-collapse collapse-horizontal show"
+		:class="{'collapse multi-collapse collapse-horizontal show': isMobile}"
 	>
 		<div
 			:style="!isMobile ? '' : 'width: 51px'"

public/js/components/searchbar/searchbar.js

@@ -243,6 +243,11 @@ export default {
 			}
 			this.search();
 		},
+		isMobile() {
+			if (!this.isMobile) {
+				this.isSearchShownInMobileView = false;
+			}
+		},
 	},
 	mounted() {
 		this.settingsDropdown = new bootstrap.Collapse(this.$refs.settings, {