reworked searchbar animation

public/js/components/Cis/Menu.js

@@ -28,7 +28,6 @@ export default {
 			urlMatchRankings:[],
 			navUserDropdown:null,
 			menuOpen:true,
-			isSearchShownInMobileView: false,
         };
     },
 	inject: ["isMobile"],
@@ -61,9 +60,6 @@ export default {
 		site_url(){
 			return FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router;
 		},
-		areHeaderOptionsShown() {
-			return !this.isSearchShownInMobileView || !this.isMobile;
-		},
 	},
 	methods: {
 		fetchMenu() {
@@ -118,19 +114,19 @@ export default {
 	},
     template: /*html*/`
 	<div
-		:style="!isMobile ? '' : (isSearchShownInMobileView ? 'width: 0px' : 'width: 79px')"
-		style="transition: width 0.5s"
-		class="d-flex flex-row align-items-center gap-2 h-100"
+		id="header-options-collapsible"
+		class="collapse multi-collapse collapse-horizontal show"
 	>
-		<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 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">
+				<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"
 		ref="searchbar"
@@ -147,25 +143,30 @@ export default {
     </div>
 
 	<div
-		:style="!isMobile ? '' : (isSearchShownInMobileView ? 'width: 0px' : 'width: 51px')"
-		style="transition: width 0.5s"
-		id="nav-user"
+		id="header-usermenu-collapsible"
+		class="collapse multi-collapse collapse-horizontal show"
 	>
-		<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
+			:style="!isMobile ? '' : 'width: 51px'"
+			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">
 			<div id="nav-main-toggle" class="position-static d-none d-lg-block ">

public/js/components/searchbar/searchbar.js

@@ -34,7 +34,6 @@ export default {
 		},
 		showBtnSubmit: Boolean,
 	},
-	emits: ["isSearchShownInMobileViewUpdated"],
 	provide() {
 		return {
 			query: Vue.computed(() => this.lastQuery),
@@ -98,6 +97,11 @@ export default {
 			<span
 				v-if="isMobile"
 				@click="toggleIsSearchShownInMobileView()"
+				type="button"
+				data-bs-toggle="collapse"
+				data-bs-target=".multi-collapse"
+				aria-controls="header-searchbar-collapsible header-options-collapsible header-usermenu-collapsible"
+				aria-expanded="false"
 			 	class="d-flex flex-row align-items-center ps-3 pe-1"
 			>
 				<i v-if="isSearchShownInMobileView" class="fa-solid fa-chevron-left"></i>
@@ -105,16 +109,14 @@ export default {
 			</span>
 
 			<div
-				:class="{'flex-grow-1': !isMobile}"
-				:style="!isMobile ? '' : (isSearchShownInMobileView ? 'width: ' + getMaxWidthOfSearchbarInMobileView() : 'width: 0px; overflow-x: hidden;')"
-				style="transition: width 0.5s;"
+				:class="{'flex-grow-1': !isMobile, 'collapse multi-collapse collapse-horizontal': isMobile}"
+				id="header-searchbar-collapsible"
 			>
 				<div
-					:style="!isMobile ? '' : (isSearchShownInMobileView ? 'width: ' + getMaxWidthOfSearchbarInMobileView() : 'width: 150px;')"
-					style="transition: width 0.5s;"
-					:class="{open: showresult, closed: showresult, 'px-3': isMobile && isSearchShownInMobileView}"
+					:class="{open: showresult, closed: showresult, 'px-3': isMobile}"
 					ref="searchbox"
 					class="h-100 input-group me-2 searchbar_searchbox"
+					:style="isMobile ? 'width: ' + getMaxWidthOfSearchbarInMobileView() : ''"
 				>
 					<span class="input-group-text">
 						<i class="fa-solid fa-magnifying-glass color-white"></i>
@@ -499,9 +501,6 @@ export default {
 		},
 		toggleIsSearchShownInMobileView() {
 			this.isSearchShownInMobileView = !this.isSearchShownInMobileView;
-			this.$emit("isSearchShownInMobileViewUpdated", {
-				isSearchShownInMobileView: this.isSearchShownInMobileView,
-			});
 		},
 		getMaxWidthOfSearchbarInMobileView() {
 			// body width - hardcoded chevron width; necessary for accurate width transition