From 1d3d067b44de996dc473acc3ab6a7aeb262d7226 Mon Sep 17 00:00:00 2001
From: adisposkofh <ma1434@technikum-wien.at>
Date: Thu, 7 May 2026 16:39:07 +0200
Subject: [PATCH] making isMobile property reactive to window resizing

---
 public/js/apps/Cis/Cis.js                   | 24 ++++++++++-----------
 public/js/apps/Cis/Menu.js                  | 24 ++++++++++++---------
 public/js/components/Cis/Menu.js            |  4 ++--
 public/js/components/searchbar/searchbar.js |  5 +++++
 4 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/public/js/apps/Cis/Cis.js b/public/js/apps/Cis/Cis.js
index 8a56c16e2..fe2ed8837 100644
--- a/public/js/apps/Cis/Cis.js
+++ b/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);
 	},
 });
 
diff --git a/public/js/apps/Cis/Menu.js b/public/js/apps/Cis/Menu.js
index 3193b1e3a..ce24489bf 100644
--- a/public/js/apps/Cis/Menu.js
+++ b/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);
 	},
 });
 
diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index 573e569ec..86ecccaf4 100644
--- a/public/js/components/Cis/Menu.js
+++ b/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'"
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index 81893cc58..de125bd16 100644
--- a/public/js/components/searchbar/searchbar.js
+++ b/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, {