From 4b22f939b55b2a00bcf39ba908cb4d2f3fd63020 Mon Sep 17 00:00:00 2001
From: adisposkofh <ma1434@technikum-wien.at>
Date: Mon, 11 May 2026 10:24:18 +0200
Subject: [PATCH] reworked searchbar collapse for component reusability

---
 public/js/components/Cis/Menu.js            | 24 ++++++++++++++---
 public/js/components/searchbar/searchbar.js | 30 +++++++++++----------
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index 9946c8392..554e841cf 100644
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -124,8 +124,8 @@ export default {
 
 		<div
 			v-if="isNarrow"
-			:class="{'collapse multi-collapse collapse-horizontal show': isNarrow}"
-			id="header-navbar-toggler-collapsible"
+			:class="{'collapse multi-collapse collapse-horizontal show': isMobile}"
+			id="navbar-toggler-collapsible"
 		>
 			<div class="d-flex flex-row align-items-center h-100" style="width: 35px">
 				<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">
@@ -140,10 +140,26 @@ export default {
 			ref="searchbar"
 			id="nav-search"
 			class="fhc-searchbar flex-grow-1 py-1 py-lg-2"
-		></fhc-searchbar>
+		>
+			<template #collapseToggler="{ isSearchShownInMobileView }">
+				<span
+					v-if="isMobile"
+					type="button"
+					data-bs-toggle="collapse"
+					data-bs-target=".multi-collapse"
+					aria-controls="searchbar-collapsible navbar-toggler-collapsible options-collapsible"
+					aria-expanded="false"
+			 		class="d-flex flex-row align-items-center pe-1"
+					style="color: white"
+				>
+					<i v-if="isSearchShownInMobileView" class="fa-solid fa-chevron-left ps-3"></i>
+					<i v-else class="fa-solid fa-magnifying-glass ps-2"></i>
+				</span>
+			</template>
+		</fhc-searchbar>
 		
 		<div
-			id="header-options-collapsible"
+			id="options-collapsible"
 			:class="{'collapse multi-collapse collapse-horizontal show': isMobile}"
 		>
 			<div :style="!isMobile ? '' : 'width: 105px'" class="d-flex flex-row ps-3 justify-content-end">
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index 092eefe08..6d5c5dd60 100644
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -94,23 +94,25 @@ export default {
 			@focusin="searchfocusin"
 			@focusout="searchfocusout"
 		>
-			<span
-				v-if="isMobile"
-				type="button"
-				data-bs-toggle="collapse"
-				data-bs-target=".multi-collapse"
-				aria-controls="header-searchbar-collapsible header-navbar-toggler-collapsible header-options-collapsible"
-				aria-expanded="false"
-			 	class="d-flex flex-row align-items-center pe-1"
-				style="color: white"
-			>
-				<i v-if="isSearchShownInMobileView" class="fa-solid fa-chevron-left ps-3"></i>
-				<i v-else class="fa-solid fa-magnifying-glass ps-2"></i>
-			</span>
+			<slot name="collapseToggler" :isSearchShownInMobileView="isSearchShownInMobileView">
+				<span
+					v-if="isMobile"
+					type="button"
+					data-bs-toggle="collapse"
+					data-bs-target="#searchbar-collapsible"
+					aria-controls="searchbar-collapsible"
+					aria-expanded="false"
+				 	class="d-flex flex-row align-items-center pe-1"
+					style="color: white"
+				>
+					<i v-if="isSearchShownInMobileView" class="fa-solid fa-chevron-left ps-3"></i>
+					<i v-else class="fa-solid fa-magnifying-glass ps-2"></i>
+				</span>
+			</slot>
 
 			<div
 				:class="{'flex-grow-1': !isMobile, 'collapse multi-collapse collapse-horizontal': isMobile}"
-				id="header-searchbar-collapsible"
+				id="searchbar-collapsible"
 				@[\`show.bs.collapse\`]="isSearchShownInMobileView = true"
 				@[\`hidden.bs.collapse\`]="isSearchShownInMobileView = false"
 			>