From 59d1ca34092149cc0a638cd70dbd2c9e7b2d8f14 Mon Sep 17 00:00:00 2001
From: adisposkofh <ma1434@technikum-wien.at>
Date: Fri, 17 Apr 2026 16:36:54 +0200
Subject: [PATCH] animated searchbar display in header

---
 public/js/components/Cis/Menu.js            |  57 ++++---
 public/js/components/searchbar/searchbar.js | 156 ++++++++++----------
 2 files changed, 116 insertions(+), 97 deletions(-)

diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index f2f73de26..82cfbd2a7 100644
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -117,17 +117,25 @@ export default {
 		});
 	},
     template: /*html*/`
-	<button v-if="areHeaderOptionsShown" 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">
-		<span class="navbar-toggler-icon"></span>
-   	</button>
-	<span v-if="isMobile && areHeaderOptionsShown" class="d-flex flex-row align-items-center px-2">
-		<theme-switch></theme-switch>
-	</span>
+	<div
+		id="header-options-collapsible"
+		class="collapse multi-collapse collapse-horizontal show"
+	>
+	<div
+		class="d-flex flex-row align-items-center gap-2 h-100"
+	>
+		<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">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+		<span v-if="isMobile" class="d-flex flex-row align-items-center">
+			<theme-switch></theme-switch>
+		</span>
+		</div>
+	</div>
 	<fhc-searchbar
 		@isSearchShownInMobileViewUpdated="isSearchShownInMobileView = $event.isSearchShownInMobileView"
 		:searchoptions="searchbaroptions"
 		:searchfunction="searchfunction"
-		:class="{'px-2': isMobile}"
 		ref="searchbar"
 		id="nav-search"
 		class="fhc-searchbar w-100 py-1 py-lg-2"
@@ -140,21 +148,26 @@ export default {
 			<theme-switch></theme-switch>
 		</div>
     </div>
-	<div v-if="areHeaderOptionsShown" id="nav-user">
-		<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
-			<img :src="avatarUrl" :alt="$p.t('profilUpdate/profilBild')" class="bg-dark avatar rounded-circle border border-dark"/>
-		</button>
-		<ul ref="navUserDropdown"
-		@[\`shown.bs.collapse\`]="handleShowNavUser"
-		@[\`hide.bs.collapse\`]="handleHideNavUser"
-		id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
-			<li><a class="fhc-dark-bg btn rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
-			<li >
-				<cis-sprachen @languageChanged="fetchMenu"></cis-sprachen>
-			</li>
-			<li><hr class="dropdown-divider m-0 "></li>
-			<li ><a class="fhc-dark-bg btn rounded-0 d-block" :href="logoutUrl">Logout</a></li>
-		</ul>
+	<div
+		id="user-menu-collapsible"
+		class="collapse multi-collapse collapse-horizontal show"
+	>
+		<div id="nav-user">
+			<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
+				<img :src="avatarUrl" :alt="$p.t('profilUpdate/profilBild')" class="bg-dark avatar rounded-circle border border-dark"/>
+			</button>
+			<ul ref="navUserDropdown"
+			@[\`shown.bs.collapse\`]="handleShowNavUser"
+			@[\`hide.bs.collapse\`]="handleHideNavUser"
+			id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
+				<li><a class="fhc-dark-bg btn rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
+				<li >
+					<cis-sprachen @languageChanged="fetchMenu"></cis-sprachen>
+				</li>
+				<li><hr class="dropdown-divider m-0 "></li>
+				<li ><a class="fhc-dark-bg btn rounded-0 d-block" :href="logoutUrl">Logout</a></li>
+			</ul>
+		</div>
 	</div>
     <nav id="nav-main" class="offcanvas offcanvas-start" tabindex="-1" aria-labelledby="nav-main-btn" data-bs-backdrop="false">
 		<div id="nav-main-sticky">
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index 498d4d964..ea3b7f931 100644
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -97,88 +97,91 @@ export default {
 			action="javascript:void(0);"
 			@focusin="searchfocusin"
 			@focusout="searchfocusout"
-		> 
+		>
 			<span
-				v-if="isMobile && !isSearchShown"
-				@click="expandSearch()"
-			 	class="d-flex flex-row align-items-center"
+				v-if="isMobile"
+				@click="toggleIsSearchShownInMobileView()"
+				type="button"
+				data-bs-toggle="collapse"
+				data-bs-target=".multi-collapse"
+				aria-expanded="false"
+				aria-controls="searchbar-collapsible header-options-collapsible user-menu-collapsible"
+			 	class="d-flex flex-row align-items-center ps-3 pe-1"
 			>
-				<i class="fa-solid fa-magnifying-glass"></i>
+				<i v-if="isSearchShownInMobileView" class="fa-solid fa-chevron-left"></i>
+				<i v-else class="fa-solid fa-magnifying-glass"></i>
 			</span>
 			<div
-				v-if="isSearchShown"
-				ref="searchbox"
-				class="h-100 input-group me-2 searchbar_searchbox"
-				:class="showresult ? 'open' : 'closed'"
+				:class="{'collapse multi-collapse collapse-horizontal': isMobile}"
+				class="flex-grow-1"
+				id="searchbar-collapsible"
 			>
-				<span
-					v-if="isMobile"
-					@click="minimizeSearch()"
-					class="input-group-text">
-					<i class="fa-solid fa-chevron-left"></i>
-				</span>
-				<span
-					v-else
-					class="input-group-text">
-					<i class="fa-solid fa-magnifying-glass color-white"></i>
-				</span>
-                <input
-                	ref="input"
-                    @keyup="search"
-                    @focus="showsearchresult"
-                    v-model="searchsettings.searchstr"
-                    class="form-control searchbar_input"
-                    type="search"
-                    :placeholder="$p.t('search/input_search_label', { types: searchTypesPlaceholder })"
-                    :aria-label="$p.t('search/input_search_label', { types: searchTypesPlaceholder })"
-                >
-				<button
-					v-if="showBtnSubmit"
-					type="submit"
-					class="btn btn-primary"
-					:title="$p.t('search/submit')"
-					:aria-label="$p.t('search/submit')"
+				<div
+					ref="searchbox"
+					:class="{open: showresult, closed: showresult, 'px-2': isMobile}"
+					class="h-100 input-group me-2 searchbar_searchbox"
 				>
-					<i class="fas fa-search"></i>
-				</button>
-                <button
-                    data-bs-toggle="collapse"
-                    data-bs-target="#searchSettings"
-                    aria-expanded="false"
-                    aria-controls="searchSettings"
-                    ref="settingsbutton"
-                    class="searchbar_setting_btn btn btn-secondary"
-                    type="button"
-                    :title="$p.t('search/button_filter_label')"
-                    :aria-label="$p.t('search/button_filter_label')"
-                >
-                    <i class="fas fa-filter"></i>
-                </button>
-            </div>
+					<span class="input-group-text">
+						<i class="fa-solid fa-magnifying-glass color-white"></i>
+					</span>
+            	    <input
+            	    	ref="input"
+            	        @keyup="search"
+            	        @focus="showsearchresult"
+            	        v-model="searchsettings.searchstr"
+            	        class="form-control searchbar_input"
+            	        type="search"
+            	        :placeholder="$p.t('search/input_search_label', { types: searchTypesPlaceholder })"
+            	        :aria-label="$p.t('search/input_search_label', { types: searchTypesPlaceholder })"
+            	    >
+					<button
+						v-if="showBtnSubmit"
+						type="submit"
+						class="btn btn-primary"
+						:title="$p.t('search/submit')"
+						:aria-label="$p.t('search/submit')"
+					>
+						<i class="fas fa-search"></i>
+					</button>
+            	    <button
+            	        data-bs-toggle="collapse"
+            	        data-bs-target="#searchSettings"
+            	        aria-expanded="false"
+            	        aria-controls="searchSettings"
+            	        ref="settingsbutton"
+            	        class="searchbar_setting_btn btn btn-secondary"
+            	        type="button"
+            	        :title="$p.t('search/button_filter_label')"
+            	        :aria-label="$p.t('search/button_filter_label')"
+            	    >
+            	        <i class="fas fa-filter"></i>
+            	    </button>
+            	</div>
 
-            <div v-show="showresult"
-                 class="searchbar_results" tabindex="-1">
-              <div class="searchbar_results_scroller" ref="result">
-                <div class="searchbar_results_wrapper" ref="results">
-                  <div v-if="searching">
-                    <i class="fas fa-spinner fa-spin fa-2x"></i>
-                  </div>
-                  <div v-else-if="this.error !== null">{{ error }}</div>
-                  <div v-else-if="searchresult.length < 1">{{  $p.t('search/error_no_results') }}</div>
-                  <template v-else v-for="res in searchresult">
-                    <component
-                        v-if="isValidRenderer(res.renderer)"
-                        :is="res.renderer"
-                        :mode="searchmode"
-                        :res="res"
-                        :actions="getActions(res)"
-                        @actionexecuted="hideresult"
-                    ></component>
-                    <div v-else class="searchbar-result text-danger fw-bold">{{ $p.t('search/error_unknown_type', res) }}</div>
-                  </template>
-                </div>
-              </div>
-            </div>
+            	<div v-show="showresult"
+            	     class="searchbar_results" tabindex="-1">
+            	  <div class="searchbar_results_scroller" ref="result">
+            	    <div class="searchbar_results_wrapper" ref="results">
+            	      <div v-if="searching">
+            	        <i class="fas fa-spinner fa-spin fa-2x"></i>
+            	      </div>
+            	      <div v-else-if="this.error !== null">{{ error }}</div>
+            	      <div v-else-if="searchresult.length < 1">{{  $p.t('search/error_no_results') }}</div>
+            	      <template v-else v-for="res in searchresult">
+            	        <component
+            	            v-if="isValidRenderer(res.renderer)"
+            	            :is="res.renderer"
+            	            :mode="searchmode"
+            	            :res="res"
+            	            :actions="getActions(res)"
+            	            @actionexecuted="hideresult"
+            	        ></component>
+            	        <div v-else class="searchbar-result text-danger fw-bold">{{ $p.t('search/error_unknown_type', res) }}</div>
+            	      </template>
+            	    </div>
+            	  </div>
+            	</div>
+			</div>
 
 			<div
 				id="searchSettings"
@@ -512,5 +515,8 @@ export default {
 				isSearchShownInMobileView: false,
 			});
 		},
+		toggleIsSearchShownInMobileView() {
+			this.isSearchShownInMobileView = !this.isSearchShownInMobileView;
+		},
 	},
 };