redid searchbar animation with handmade transitions

2026-06-01 12:19:28 +00:00 · 2026-04-17 17:44:23 +02:00
parent 3b2473039f
commit 202e6e88d2
2 changed files with 41 additions and 55 deletions
@@ -118,19 +118,16 @@ export default {
 	},
    template: /*html*/`
 	<div
-		id="header-options-collapsible"
-		class="collapse multi-collapse collapse-horizontal show"
+		:style="!isMobile ? '' : (isSearchShownInMobileView ? 'width: 0px' : 'width: 79px')"
+		style="transition: width 0.5s"
+		class="d-flex flex-row align-items-center gap-2 h-100"
 	>
-		<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>
+		<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>
 	<fhc-searchbar
 		@isSearchShownInMobileViewUpdated="isSearchShownInMobileView = $event.isSearchShownInMobileView"
@@ -148,26 +145,26 @@ export default {
 			<theme-switch></theme-switch>
 		</div>
    </div>
+
 	<div
-		id="user-menu-collapsible"
-		class="collapse multi-collapse collapse-horizontal show"
+		:style="!isMobile ? '' : (isSearchShownInMobileView ? 'width: 0px' : 'width: 51px')"
+		style="transition: width 0.5s"
+		id="nav-user"
 	>
-		<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>
+		<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>
    <nav id="nav-main" class="offcanvas offcanvas-start" tabindex="-1" aria-labelledby="nav-main-btn" data-bs-backdrop="false">
 		<div id="nav-main-sticky">
@@ -85,9 +85,6 @@ export default {
 			}
 			return this.searchoptions.types;
 		},
-		isSearchShown() {
-			return !this.isMobile ? true : this.isSearchShownInMobileView;
-		},
 	},
 	template: /*html*/ `
 		<form
@@ -101,24 +98,22 @@ export default {
 			<span
 				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 v-if="isSearchShownInMobileView" class="fa-solid fa-chevron-left"></i>
 				<i v-else class="fa-solid fa-magnifying-glass"></i>
 			</span>
+
 			<div
-				:class="{'collapse multi-collapse collapse-horizontal': isMobile}"
-				class="flex-grow-1"
-				id="searchbar-collapsible"
+				:class="{'flex-grow-1': !isMobile}"
+				:style="!isMobile ? '' : (isSearchShownInMobileView ? 'width: ' + getMaxWidthOfSearchbarInMobileView() : 'width: 0px; overflow-x: hidden;')"
+				style="transition: width 0.5s;"
 			>
 				<div
+					:style="!isMobile ? '' : (isSearchShownInMobileView ? 'width: ' + getMaxWidthOfSearchbarInMobileView() : 'width: 150px;')"
+					style="transition: width 0.5s;"
+					:class="{open: showresult, closed: showresult, 'px-3': isMobile && isSearchShownInMobileView}"
 					ref="searchbox"
-					:class="{open: showresult, closed: showresult, 'px-2': isMobile}"
 					class="h-100 input-group me-2 searchbar_searchbox"
 				>
 					<span class="input-group-text">
@@ -157,7 +152,6 @@ export default {
            	        <i class="fas fa-filter"></i>
            	    </button>
            	</div>
-
            	<div v-show="showresult"
            	     class="searchbar_results" tabindex="-1">
            	  <div class="searchbar_results_scroller" ref="result">
@@ -503,20 +497,15 @@ export default {
 			}
 			return this.searchoptions.actions[res.type];
 		},
-		expandSearch() {
-			this.isSearchShownInMobileView = true;
-			this.$emit("isSearchShownInMobileViewUpdated", {
-				isSearchShownInMobileView: true,
-			});
-		},
-		minimizeSearch() {
-			this.isSearchShownInMobileView = false;
-			this.$emit("isSearchShownInMobileViewUpdated", {
-				isSearchShownInMobileView: false,
-			});
-		},
 		toggleIsSearchShownInMobileView() {
 			this.isSearchShownInMobileView = !this.isSearchShownInMobileView;
+			this.$emit("isSearchShownInMobileViewUpdated", {
+				isSearchShownInMobileView: this.isSearchShownInMobileView,
+			});
+		},
+		getMaxWidthOfSearchbarInMobileView() {
+			// body width - hardcoded chevron width; necessary for accurate width transition
+			return (document.querySelector("body").getBoundingClientRect().width - 27) + "px";
 		},
 	},
 };