From bf3d6275d4aa9a0609f3f613ab7443328efa3eb9 Mon Sep 17 00:00:00 2001
From: adisposkofh <ma1434@technikum-wien.at>
Date: Fri, 8 May 2026 16:31:55 +0200
Subject: [PATCH] header rework: single fixed element, ordering, small screen
 cutoff

---
 public/css/Cis4/Cis.css                     | 33 +++----
 public/js/apps/Cis/Menu.js                  |  2 +-
 public/js/components/Cis/Menu.js            | 99 +++++++++++----------
 public/js/components/searchbar/searchbar.js | 32 +++----
 4 files changed, 78 insertions(+), 88 deletions(-)

diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index bb9655cb9..f055faf9c 100644
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -388,12 +388,6 @@ html {
 #nav-search > .input-group > * {
   border-radius: 0 !important;
 }
-#nav-search .searchbar_results {
-  top: 100% !important;
-  left: 0;
-  right: 0 !important;
-  width: 100% !important;
-}
 
 /* frame */
 .in-frame {
@@ -467,7 +461,15 @@ html {
     /* overflow: visible !important; */
   }
   #cis-header {
-    z-index: 10;
+	z-index: 10;
+  }
+  #cis-header-bar {
+	position: fixed;
+	top: 0;
+	height: var(--fhc-cis-header-height);
+	width: 100%;
+	/* padding: var(--fhc-cis-header-py) var(--fhc-cis-header-px); */
+    background-color: var(--fhc-primary);
   }
   #cis-header nav {
     position: initial;
@@ -483,12 +485,7 @@ html {
     display: none;
   }
   #nav-logo {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: var(--fhc-cis-header-height);
     width: var(--fhc-cis-menu-width);
-    background-color: var(--fhc-primary);
     padding: var(--fhc-cis-header-py) var(--fhc-cis-header-px);
     z-index: 2;
   }
@@ -523,17 +520,7 @@ html {
     color: var(--fhc-black-40);
   }
   #nav-search {
-    position: fixed;
-    top: 0;
-    left: var(--fhc-cis-menu-width);
-    height: var(--fhc-cis-header-height);
-    right: calc(var(--fhc-cis-header-height) + 2 * var(--fhc-cis-header-px) - 2 * var(--fhc-cis-header-py));
-    width: auto !important;
-  }
-  #nav-user {
-	position: fixed;
-	top: 0;
-	right: 0;
+	position: relative;
   }
   #nav-user-btn {
     border-width: 0;
diff --git a/public/js/apps/Cis/Menu.js b/public/js/apps/Cis/Menu.js
index ce24489bf..f4fc4cefd 100644
--- a/public/js/apps/Cis/Menu.js
+++ b/public/js/apps/Cis/Menu.js
@@ -140,7 +140,7 @@ const app = Vue.createApp({
     },
 	provide() {
 		return {
-			isMobile: Vue.computed(() => this.windowWidth < 767),
+			isNarrow: Vue.computed(() => this.windowWidth < 992),
 		}
 	},
     methods: {
diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index 86ecccaf4..60719062b 100644
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -30,7 +30,7 @@ export default {
 			menuOpen:true,
         };
     },
-	inject: ["isMobile"],
+	inject: ["isNarrow"],
 	provide(){
 		return{
 			setActiveEntry: this.setActiveEntry,
@@ -113,57 +113,60 @@ export default {
 		});
 	},
     template: /*html*/`
-	<div
-		:class="{'collapse multi-collapse collapse-horizontal show': isMobile}"
-		id="header-options-collapsible"
-	>
-		<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 id="cis-header-bar" class="d-flex flex-row flex-grow-1">
+		<div id="nav-logo" class="d-none d-lg-block">
+			<div class="d-flex h-100 justify-content-between">
+				<a :href="rootUrl">
+					<img :src="logoUrl" alt="Corporate Identity Logo">
+				</a>
+			</div>
 		</div>
-	</div>
-	<fhc-searchbar
-		:searchoptions="searchbaroptions"
-		:searchfunction="searchfunction"
-		ref="searchbar"
-		id="nav-search"
-		class="fhc-searchbar w-100 py-1 py-lg-2"
-	></fhc-searchbar>
-    <div id="nav-logo" class="d-none d-lg-block">
-		<div class="d-flex h-100 justify-content-between">
-			<a :href="rootUrl">
-				<img :src="logoUrl" alt="Corporate Identity Logo">
-			</a>
-			<theme-switch></theme-switch>
-		</div>
-    </div>
 
-	<div
-		id="header-usermenu-collapsible"
-		:class="{'collapse multi-collapse collapse-horizontal show': isMobile}"
-	>
 		<div
-			:style="!isMobile ? '' : 'width: 51px'"
-			id="nav-user"
+			v-if="isNarrow"
+			:class="{'collapse multi-collapse collapse-horizontal show': isNarrow}"
+			id="header-navbar-toggler-collapsible"
 		>
-			<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 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">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+			</div>
+		</div>
+
+		<fhc-searchbar
+			:searchoptions="searchbaroptions"
+			:searchfunction="searchfunction"
+			ref="searchbar"
+			id="nav-search"
+			class="fhc-searchbar flex-grow-1 py-1 py-lg-2"
+		></fhc-searchbar>
+		
+		<div
+			id="header-options-collapsible"
+			:class="{'collapse multi-collapse collapse-horizontal show': isNarrow}"
+		>
+			<div :style="!isNarrow ? '' : 'width: 105px'" class="d-flex flex-row ps-3 justify-content-end">
+				<span class="d-flex flex-row align-items-center">
+					<theme-switch></theme-switch>
+				</span>
+				<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>
 		</div>
 	</div>
 
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index de125bd16..2f1667692 100644
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -39,7 +39,7 @@ export default {
 			query: Vue.computed(() => this.lastQuery),
 		};
 	},
-	inject: ["isMobile"],
+	inject: ["isNarrow"],
 	data: function () {
 		return {
 			searchtimer: null,
@@ -56,7 +56,7 @@ export default {
 			abortController: null,
 			settingsDropdown: null,
 			lastQuery: "",
-			isSearchShownInMobileView: false,
+			isSearchShownInNarrowView: false,
 		};
 	},
 	computed: {
@@ -95,30 +95,30 @@ export default {
 			@focusout="searchfocusout"
 		>
 			<span
-				v-if="isMobile"
+				v-if="isNarrow"
 				type="button"
 				data-bs-toggle="collapse"
 				data-bs-target=".multi-collapse"
-				aria-controls="header-searchbar-collapsible header-options-collapsible header-usermenu-collapsible"
+				aria-controls="header-searchbar-collapsible header-navbar-toggler-collapsible header-options-collapsible"
 				aria-expanded="false"
-			 	class="d-flex flex-row align-items-center ps-3 pe-1"
+			 	class="d-flex flex-row align-items-center pe-1"
 				style="color: white"
 			>
-				<i v-if="isSearchShownInMobileView" class="fa-solid fa-chevron-left"></i>
-				<i v-else class="fa-solid fa-magnifying-glass"></i>
+				<i v-if="isSearchShownInNarrowView" class="fa-solid fa-chevron-left ps-3"></i>
+				<i v-else class="fa-solid fa-magnifying-glass ps-2"></i>
 			</span>
 
 			<div
-				:class="{'flex-grow-1': !isMobile, 'collapse multi-collapse collapse-horizontal': isMobile}"
+				:class="{'flex-grow-1': !isNarrow, 'collapse multi-collapse collapse-horizontal': isNarrow}"
 				id="header-searchbar-collapsible"
-				@[\`show.bs.collapse\`]="isSearchShownInMobileView = true"
-				@[\`hidden.bs.collapse\`]="isSearchShownInMobileView = false"
+				@[\`show.bs.collapse\`]="isSearchShownInNarrowView = true"
+				@[\`hidden.bs.collapse\`]="isSearchShownInNarrowView = false"
 			>
 				<div
-					:class="{open: showresult, closed: showresult, 'px-3': isMobile}"
+					:class="{open: showresult, closed: showresult, 'px-3': isNarrow}"
 					ref="searchbox"
 					class="h-100 input-group me-2 searchbar_searchbox"
-					:style="isMobile ? 'width: ' + getMaxWidthOfSearchbarInMobileView() : ''"
+					:style="isNarrow ? 'width: ' + getMaxWidthOfSearchbarInNarrowView() : ''"
 				>
 					<span class="input-group-text">
 						<i class="fa-solid fa-magnifying-glass color-white"></i>
@@ -243,9 +243,9 @@ export default {
 			}
 			this.search();
 		},
-		isMobile() {
-			if (!this.isMobile) {
-				this.isSearchShownInMobileView = false;
+		isNarrow() {
+			if (!this.isNarrow) {
+				this.isSearchShownInNarrowView = false;
 			}
 		},
 	},
@@ -509,7 +509,7 @@ export default {
 			}
 			return this.searchoptions.actions[res.type];
 		},
-		getMaxWidthOfSearchbarInMobileView() {
+		getMaxWidthOfSearchbarInNarrowView() {
 			// body width - hardcoded chevron width; necessary for accurate collapse transition transition
 			return (
 				document.querySelector("body").getBoundingClientRect().width -