From a53ad0dba8950609e8277823d4e3cf5734dc1848 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <franz.schuenzel@dataport.de>
Date: Tue, 30 Sep 2025 13:42:06 +0200
Subject: [PATCH 01/16] hide topbar on scroll down

---
 src/modules/ui/layout/topbar/Topbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/ui/layout/topbar/Topbar.vue b/src/modules/ui/layout/topbar/Topbar.vue
index 14b5cbddf2..1b70105f76 100644
--- a/src/modules/ui/layout/topbar/Topbar.vue
+++ b/src/modules/ui/layout/topbar/Topbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<VAppBar flat :height="appBarHeight">
+	<VAppBar flat :height="appBarHeight" scroll-behavior="hide">
 		<CloudLogo v-if="!sidebarExpanded" class="mt-1" />
 		<template #prepend>
 			<VAppBarNavIcon

From 3060bb273e24d3f15c45729e82a7d70fb5fd6e2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <franz.schuenzel@dataport.de>
Date: Tue, 30 Sep 2025 13:45:48 +0200
Subject: [PATCH 02/16] no sticky header

---
 src/components/templates/DefaultWireframe.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/templates/DefaultWireframe.vue b/src/components/templates/DefaultWireframe.vue
index 4e08e2376d..5ca38eabbf 100644
--- a/src/components/templates/DefaultWireframe.vue
+++ b/src/components/templates/DefaultWireframe.vue
@@ -13,7 +13,7 @@
 			aria-live="assertive"
 			class="d-sr-only"
 		/>
-		<div class="wireframe-header sticky">
+		<div class="wireframe-header">
 			<Breadcrumbs v-if="breadcrumbs.length" :breadcrumbs="breadcrumbs" />
 			<div v-else :class="{ 'breadcrumbs-placeholder': smAndUp }" />
 			<slot name="header">

From c88e87349ee6ed9d7586de74bf730c5622fd7a69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <franz.schuenzel@dataport.de>
Date: Tue, 30 Sep 2025 13:47:28 +0200
Subject: [PATCH 03/16] show divider

---
 src/components/templates/DefaultWireframe.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/templates/DefaultWireframe.vue b/src/components/templates/DefaultWireframe.vue
index 5ca38eabbf..d408fee9de 100644
--- a/src/components/templates/DefaultWireframe.vue
+++ b/src/components/templates/DefaultWireframe.vue
@@ -58,7 +58,7 @@
 					</speed-dial-menu>
 				</slot>
 			</div>
-			<v-divider v-if="showDivider" class="mx-n6" role="presentation" />
+			<v-divider class="mx-n6" role="presentation" />
 		</div>
 		<v-container
 			:fluid="maxWidth !== 'nativ'"

From 61d62d4d35de70a19def3e094a71b0ae57363a53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <franz.schuenzel@dataport.de>
Date: Tue, 30 Sep 2025 14:47:53 +0200
Subject: [PATCH 04/16] Add scroll-threshold to VAppBar

---
 src/modules/ui/layout/topbar/Topbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/ui/layout/topbar/Topbar.vue b/src/modules/ui/layout/topbar/Topbar.vue
index 1b70105f76..4215264381 100644
--- a/src/modules/ui/layout/topbar/Topbar.vue
+++ b/src/modules/ui/layout/topbar/Topbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<VAppBar flat :height="appBarHeight" scroll-behavior="hide">
+	<VAppBar flat :height="appBarHeight" scroll-behavior="hide" scroll-threshold="0">
 		<CloudLogo v-if="!sidebarExpanded" class="mt-1" />
 		<template #prepend>
 			<VAppBarNavIcon

From ae143a6ed57f1339423d01150cf107ef818a2aca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <franz.schuenzel@dataport.de>
Date: Tue, 30 Sep 2025 15:04:05 +0200
Subject: [PATCH 05/16] Update padding in wireframe header and adjust VAppBar
 scroll-threshold

---
 src/components/templates/DefaultWireframe.vue | 2 +-
 src/modules/ui/layout/topbar/Topbar.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/templates/DefaultWireframe.vue b/src/components/templates/DefaultWireframe.vue
index d408fee9de..47c41df16d 100644
--- a/src/components/templates/DefaultWireframe.vue
+++ b/src/components/templates/DefaultWireframe.vue
@@ -158,7 +158,7 @@ const showDivider = computed(() => {
 }
 
 .wireframe-header {
-	padding: 0 24px;
+	padding: 1.5rem  1.5rem 0;
 	display: flex;
 	flex-direction: column;
 }
diff --git a/src/modules/ui/layout/topbar/Topbar.vue b/src/modules/ui/layout/topbar/Topbar.vue
index 4215264381..420cb8c6be 100644
--- a/src/modules/ui/layout/topbar/Topbar.vue
+++ b/src/modules/ui/layout/topbar/Topbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<VAppBar flat :height="appBarHeight" scroll-behavior="hide" scroll-threshold="0">
+	<VAppBar flat :height="appBarHeight" scroll-behavior="hide" scroll-threshold="20">
 		<CloudLogo v-if="!sidebarExpanded" class="mt-1" />
 		<template #prepend>
 			<VAppBarNavIcon

From 5705ab3cafdabd0f96c9a2ccebf8fdf5a83f64ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <franz.schuenzel@dataport.de>
Date: Tue, 30 Sep 2025 15:23:46 +0200
Subject: [PATCH 06/16] fix dynamic padding

---
 src/components/templates/DefaultWireframe.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/templates/DefaultWireframe.vue b/src/components/templates/DefaultWireframe.vue
index 47c41df16d..77cd9b60e8 100644
--- a/src/components/templates/DefaultWireframe.vue
+++ b/src/components/templates/DefaultWireframe.vue
@@ -141,6 +141,9 @@ const showDivider = computed(() => {
 </script>
 
 <style lang="scss" scoped>
+:global(:root) {
+	--v-layout-top: 0px !important;
+}
 @use "@/styles/settings.scss" as *;
 
 .wireframe-container-flex {

From a7201282808e8739e6723e7c1f568f587b11acf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <f.schuenzel@googlemail.com>
Date: Tue, 7 Oct 2025 13:15:01 +0200
Subject: [PATCH 07/16] scroll topbar, scroll header (like in legacy)

---
 src/components/templates/DefaultWireframe.vue | 17 +++++++-------
 src/modules/ui/layout/topbar/Topbar.vue       | 22 +++++++++++--------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/templates/DefaultWireframe.vue b/src/components/templates/DefaultWireframe.vue
index 77cd9b60e8..a8efe7a2c3 100644
--- a/src/components/templates/DefaultWireframe.vue
+++ b/src/components/templates/DefaultWireframe.vue
@@ -58,8 +58,8 @@
 					</speed-dial-menu>
 				</slot>
 			</div>
-			<v-divider class="mx-n6" role="presentation" />
 		</div>
+		<v-divider v-if="showDivider" class="mx-n6" role="presentation" />
 		<v-container
 			:fluid="maxWidth !== 'nativ'"
 			class="main-content"
@@ -76,10 +76,10 @@
 </template>
 
 <script setup lang="ts">
+import { Breadcrumb, Fab } from "./default-wireframe.types";
 import { Breadcrumbs } from "@ui-breadcrumbs";
 import { SpeedDialMenu, SpeedDialMenuAction } from "@ui-speed-dial-menu";
 import { computed, PropType, useSlots } from "vue";
-import { Fab, Breadcrumb } from "./default-wireframe.types";
 import { useDisplay } from "vuetify";
 
 const props = defineProps({
@@ -135,15 +135,12 @@ const slots = useSlots();
 
 const { mdAndDown, smAndUp, lgAndUp } = useDisplay();
 
-const showDivider = computed(() => {
-	return !props.hideBorder && !!(props.headline || slots.header);
-});
+const showDivider = computed(
+	() => !props.hideBorder && !!(props.headline || slots.header)
+);
 </script>
 
 <style lang="scss" scoped>
-:global(:root) {
-	--v-layout-top: 0px !important;
-}
 @use "@/styles/settings.scss" as *;
 
 .wireframe-container-flex {
@@ -161,9 +158,11 @@ const showDivider = computed(() => {
 }
 
 .wireframe-header {
-	padding: 1.5rem  1.5rem 0;
+	padding: 0 24px;
 	display: flex;
 	flex-direction: column;
+	background-color: rgb(var(--v-theme-white));
+	z-index: 20;
 }
 
 :deep(.v-application__wrap) {
diff --git a/src/modules/ui/layout/topbar/Topbar.vue b/src/modules/ui/layout/topbar/Topbar.vue
index 420cb8c6be..b5a8547a58 100644
--- a/src/modules/ui/layout/topbar/Topbar.vue
+++ b/src/modules/ui/layout/topbar/Topbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<VAppBar flat :height="appBarHeight" scroll-behavior="hide" scroll-threshold="20">
+	<VToolbar flat :height="appBarHeight">
 		<CloudLogo v-if="!sidebarExpanded" class="mt-1" />
 		<template #prepend>
 			<VAppBarNavIcon
@@ -47,20 +47,20 @@
 			data-testid="school-logo"
 		/>
 		<UserMenu v-if="user" :user="user" :role-names="roleNames" class="mr-3" />
-	</VAppBar>
+	</VToolbar>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from "vue";
-import { useDisplay } from "vuetify";
-import { STATUS_ALERTS_MODULE_KEY, injectStrict } from "@/utils/inject";
-import { mdiMenu, mdiAlert, mdiQrcode } from "@icons/material";
-import TopbarItem from "./TopbarItem.vue";
-import PageShare from "./PageShare.vue";
+import CloudLogo from "../CloudLogo.vue";
 import CloudStatusMessages from "./CloudStatusMessages.vue";
+import PageShare from "./PageShare.vue";
+import TopbarItem from "./TopbarItem.vue";
 import UserMenu from "./UserMenu.vue";
-import CloudLogo from "../CloudLogo.vue";
+import { injectStrict, STATUS_ALERTS_MODULE_KEY } from "@/utils/inject";
 import { useAppStoreRefs } from "@data-app";
+import { mdiAlert, mdiMenu, mdiQrcode } from "@icons/material";
+import { computed, onMounted } from "vue";
+import { useDisplay } from "vuetify";
 
 defineProps({
 	sidebarExpanded: {
@@ -123,4 +123,8 @@ const appBarHeight = computed(() => {
 	max-height: 40px;
 	max-width: 160px;
 }
+
+.v-toolbar {
+	background-color: #fff !important;
+}
 </style>

From 9d6cd27c04577a0df45a90e050d062727001e8a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <f.schuenzel@googlemail.com>
Date: Tue, 7 Oct 2025 15:13:17 +0200
Subject: [PATCH 08/16] fix divider, add missing z-index for FAB

---
 src/components/templates/DefaultWireframe.vue | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/templates/DefaultWireframe.vue b/src/components/templates/DefaultWireframe.vue
index a8efe7a2c3..62ebafba4e 100644
--- a/src/components/templates/DefaultWireframe.vue
+++ b/src/components/templates/DefaultWireframe.vue
@@ -59,7 +59,7 @@
 				</slot>
 			</div>
 		</div>
-		<v-divider v-if="showDivider" class="mx-n6" role="presentation" />
+		<v-divider v-if="showDivider" role="presentation" />
 		<v-container
 			:fluid="maxWidth !== 'nativ'"
 			class="main-content"
@@ -183,12 +183,6 @@ const showDivider = computed(
 	margin: 0;
 }
 
-.v-divider {
-	z-index: -1;
-	margin-right: -1.5rem;
-	margin-left: -1.5rem;
-}
-
 .breadcrumbs-placeholder {
 	height: 22px;
 }
@@ -222,6 +216,7 @@ $fab-wrapper-height: 80px;
 	height: $fab-wrapper-height;
 	margin-top: -#{$fab-wrapper-height};
 	pointer-events: none;
+	z-index: 100;
 
 	* {
 		pointer-events: auto;

From 7733313f9867f819a664aaf4183ca99367da1244 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <f.schuenzel@googlemail.com>
Date: Tue, 7 Oct 2025 17:02:13 +0200
Subject: [PATCH 09/16] fixed topbar on scroll up

---
 src/modules/ui/layout/topbar/Topbar.vue     | 38 +++++++++++++++++++--
 src/styles/css-variables/_layout-sizes.scss |  2 +-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/modules/ui/layout/topbar/Topbar.vue b/src/modules/ui/layout/topbar/Topbar.vue
index b5a8547a58..9b0c820250 100644
--- a/src/modules/ui/layout/topbar/Topbar.vue
+++ b/src/modules/ui/layout/topbar/Topbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<VToolbar flat :height="appBarHeight">
+	<VToolbar flat :height="appBarHeight" :class="{ 'topbar--fixed': isFixed }">
 		<CloudLogo v-if="!sidebarExpanded" class="mt-1" />
 		<template #prepend>
 			<VAppBarNavIcon
@@ -48,6 +48,7 @@
 		/>
 		<UserMenu v-if="user" :user="user" :role-names="roleNames" class="mr-3" />
 	</VToolbar>
+	<div v-if="isFixed" aria-hidden="true" style="height: 50px" />
 </template>
 
 <script setup lang="ts">
@@ -59,8 +60,33 @@ import UserMenu from "./UserMenu.vue";
 import { injectStrict, STATUS_ALERTS_MODULE_KEY } from "@/utils/inject";
 import { useAppStoreRefs } from "@data-app";
 import { mdiAlert, mdiMenu, mdiQrcode } from "@icons/material";
-import { computed, onMounted } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useDisplay } from "vuetify";
+import { onUnmounted } from "vue";
+
+const isFixed = ref(false);
+let lastScrollY = window.scrollY;
+
+const handleScroll = () => {
+	const currentScrollY = window.scrollY;
+	if (currentScrollY <= 0) {
+		isFixed.value = false;
+	} else if (currentScrollY < lastScrollY && currentScrollY > 64) {
+		isFixed.value = true;
+	} else if (currentScrollY > lastScrollY && currentScrollY > 64) {
+		isFixed.value = false;
+	}
+
+	lastScrollY = currentScrollY;
+};
+
+onMounted(() => {
+	window.addEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+	window.removeEventListener("scroll", handleScroll);
+});
 
 defineProps({
 	sidebarExpanded: {
@@ -127,4 +153,12 @@ const appBarHeight = computed(() => {
 .v-toolbar {
 	background-color: #fff !important;
 }
+.topbar--fixed {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 1000;
+	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
+}
 </style>
diff --git a/src/styles/css-variables/_layout-sizes.scss b/src/styles/css-variables/_layout-sizes.scss
index d6468b104b..16898b1330 100644
--- a/src/styles/css-variables/_layout-sizes.scss
+++ b/src/styles/css-variables/_layout-sizes.scss
@@ -1,4 +1,4 @@
 :root {
-	--topbar-height: 64px;
+	--topbar-height: 50px;
 	--breadcrumbs-height: 22px;
 }

From 33e4880d3c1504365627937244bb1c3927602f8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <f.schuenzel@googlemail.com>
Date: Wed, 8 Oct 2025 12:54:08 +0200
Subject: [PATCH 10/16] Fix import statement order

---
 src/modules/ui/layout/topbar/Topbar.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/modules/ui/layout/topbar/Topbar.vue b/src/modules/ui/layout/topbar/Topbar.vue
index 9b0c820250..a2cb5596a4 100644
--- a/src/modules/ui/layout/topbar/Topbar.vue
+++ b/src/modules/ui/layout/topbar/Topbar.vue
@@ -52,6 +52,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { useDisplay } from "vuetify";
 import CloudLogo from "../CloudLogo.vue";
 import CloudStatusMessages from "./CloudStatusMessages.vue";
 import PageShare from "./PageShare.vue";
@@ -60,9 +62,6 @@ import UserMenu from "./UserMenu.vue";
 import { injectStrict, STATUS_ALERTS_MODULE_KEY } from "@/utils/inject";
 import { useAppStoreRefs } from "@data-app";
 import { mdiAlert, mdiMenu, mdiQrcode } from "@icons/material";
-import { computed, onMounted, ref } from "vue";
-import { useDisplay } from "vuetify";
-import { onUnmounted } from "vue";
 
 const isFixed = ref(false);
 let lastScrollY = window.scrollY;

From 6808baff1734ee17212510c3205a02372567b7b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <f.schuenzel@googlemail.com>
Date: Wed, 8 Oct 2025 13:42:06 +0200
Subject: [PATCH 11/16] fix eslint stuff

---
 src/components/templates/DefaultWireframe.vue | 21 ++++---------------
 src/modules/ui/layout/topbar/Topbar.vue       |  4 ++--
 2 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/src/components/templates/DefaultWireframe.vue b/src/components/templates/DefaultWireframe.vue
index 1ba3222c28..63391af1ef 100644
--- a/src/components/templates/DefaultWireframe.vue
+++ b/src/components/templates/DefaultWireframe.vue
@@ -1,18 +1,7 @@
 <template>
-	<div
-		class="wireframe-container"
-		:class="{ 'wireframe-container-flex': isFlexContainer }"
-	>
-		<div
-			id="notify-screen-reader-polite"
-			aria-live="polite"
-			class="d-sr-only"
-		/>
-		<div
-			id="notify-screen-reader-assertive"
-			aria-live="assertive"
-			class="d-sr-only"
-		/>
+	<div class="wireframe-container" :class="{ 'wireframe-container-flex': isFlexContainer }">
+		<div id="notify-screen-reader-polite" aria-live="polite" class="d-sr-only" />
+		<div id="notify-screen-reader-assertive" aria-live="assertive" class="d-sr-only" />
 		<div class="wireframe-header">
 			<Breadcrumbs v-if="breadcrumbs.length" :breadcrumbs="breadcrumbs" />
 			<div v-else :class="{ 'breadcrumbs-placeholder': smAndUp }" />
@@ -132,9 +121,7 @@ const slots = useSlots();
 
 const { mdAndDown, smAndUp, lgAndUp } = useDisplay();
 
-const showDivider = computed(
-	() => !props.hideBorder && !!(props.headline || slots.header)
-);
+const showDivider = computed(() => !props.hideBorder && !!(props.headline || slots.header));
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/ui/layout/topbar/Topbar.vue b/src/modules/ui/layout/topbar/Topbar.vue
index 7adaa03346..63b5a0828d 100644
--- a/src/modules/ui/layout/topbar/Topbar.vue
+++ b/src/modules/ui/layout/topbar/Topbar.vue
@@ -48,8 +48,6 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from "vue";
-import { useDisplay } from "vuetify";
 import CloudLogo from "../CloudLogo.vue";
 import CloudStatusMessages from "./CloudStatusMessages.vue";
 import PageShare from "./PageShare.vue";
@@ -58,6 +56,8 @@ import UserMenu from "./UserMenu.vue";
 import { injectStrict, STATUS_ALERTS_MODULE_KEY } from "@/utils/inject";
 import { useAppStoreRefs } from "@data-app";
 import { mdiAlert, mdiMenu, mdiQrcode } from "@icons/material";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { useDisplay } from "vuetify";
 
 const isFixed = ref(false);
 let lastScrollY = window.scrollY;

From 88b70712ae43975ff2859d0c4beb5a35ec5c2612 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <f.schuenzel@googlemail.com>
Date: Wed, 8 Oct 2025 16:04:52 +0200
Subject: [PATCH 12/16] topbar visibility and scrolling behavior

---
 src/modules/ui/layout/topbar/Topbar.vue | 44 +++++++++++++++++++++----
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/modules/ui/layout/topbar/Topbar.vue b/src/modules/ui/layout/topbar/Topbar.vue
index 63b5a0828d..9fd27cbada 100644
--- a/src/modules/ui/layout/topbar/Topbar.vue
+++ b/src/modules/ui/layout/topbar/Topbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<VToolbar flat :height="appBarHeight" :class="{ 'topbar--fixed': isFixed }">
+	<VToolbar flat :height="appBarHeight" :class="toolbarClasses">
 		<CloudLogo v-if="!sidebarExpanded" class="mt-1" />
 		<template #prepend>
 			<VAppBarNavIcon
@@ -44,7 +44,7 @@
 		/>
 		<UserMenu v-if="user" :user="user" :role-names="roleNames" class="mr-3" />
 	</VToolbar>
-	<div v-if="isFixed" aria-hidden="true" style="height: 50px" />
+	<div v-if="isFixed && isVisible" aria-hidden="true" class="toolbar-placeholder" />
 </template>
 
 <script setup lang="ts">
@@ -59,22 +59,35 @@ import { mdiAlert, mdiMenu, mdiQrcode } from "@icons/material";
 import { computed, onMounted, onUnmounted, ref } from "vue";
 import { useDisplay } from "vuetify";
 
+const SCROLL_THRESHOLD = 100;
+const SCROLL_DISTANCE = 10;
 const isFixed = ref(false);
+const isVisible = ref(false);
 let lastScrollY = window.scrollY;
 
 const handleScroll = () => {
 	const currentScrollY = window.scrollY;
+	const scrollDistance = Math.abs(currentScrollY - lastScrollY);
+
 	if (currentScrollY <= 0) {
 		isFixed.value = false;
-	} else if (currentScrollY < lastScrollY && currentScrollY > 64) {
+		isVisible.value = false;
+	} else if (currentScrollY < lastScrollY && currentScrollY > SCROLL_THRESHOLD && scrollDistance > SCROLL_DISTANCE) {
 		isFixed.value = true;
-	} else if (currentScrollY > lastScrollY && currentScrollY > 64) {
-		isFixed.value = false;
+		isVisible.value = true;
+	} else if (currentScrollY > lastScrollY && currentScrollY > SCROLL_THRESHOLD && scrollDistance > SCROLL_DISTANCE) {
+		isFixed.value = true;
+		isVisible.value = false;
 	}
-
 	lastScrollY = currentScrollY;
 };
 
+const toolbarClasses = computed(() => [
+	isFixed.value ? "toolbar--fixed" : "",
+	isFixed.value && isVisible.value ? "toolbar--visible" : "",
+	isFixed.value && !isVisible.value ? "toolbar--hidden" : "",
+]);
+
 onMounted(() => {
 	window.addEventListener("scroll", handleScroll);
 });
@@ -144,12 +157,29 @@ const appBarHeight = computed(() => {
 .v-toolbar {
 	background-color: #fff !important;
 }
-.topbar--fixed {
+
+.toolbar-placeholder {
+	height: 50px;
+}
+
+.toolbar--hidden {
+	transform: translateY(-100%);
+	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	opacity: 0;
+}
+
+.toolbar--visible {
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	z-index: 1000;
+	opacity: 1;
+}
+
+.toolbar--fixed.toolbar--visible {
+	transform: translateY(0);
+	opacity: 1;
 	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
 }
 </style>

From 171a1af88edbc2890784db3ee1aea8282d16787a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <f.schuenzel@googlemail.com>
Date: Wed, 8 Oct 2025 16:25:25 +0200
Subject: [PATCH 13/16] test without bounce

---
 src/styles/global.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/styles/global.scss b/src/styles/global.scss
index 7e59096514..9c19bd940c 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,7 +1,9 @@
 @use "./utility/index" as *;
 @use "./css-variables/index" as *;
-
 @use "@/styles/settings.scss" as *;
 @use "vuetify" as *;
-
 @use "./scrollbar.scss" as *;
+
+body {
+	overscroll-behavior: none;
+}

From c07535edcfbfe0b34b73dc39d7e31889f3b9b6c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <f.schuenzel@googlemail.com>
Date: Wed, 8 Oct 2025 16:38:37 +0200
Subject: [PATCH 14/16] remove body css test

---
 src/styles/global.scss | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/styles/global.scss b/src/styles/global.scss
index 9c19bd940c..69145a9aae 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -2,8 +2,4 @@
 @use "./css-variables/index" as *;
 @use "@/styles/settings.scss" as *;
 @use "vuetify" as *;
-@use "./scrollbar.scss" as *;
-
-body {
-	overscroll-behavior: none;
-}
+@use "./scrollbar.scss" as *;
\ No newline at end of file

From b3c9f516e8747317659bde7f728c213bc295c0d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <f.schuenzel@googlemail.com>
Date: Wed, 8 Oct 2025 17:18:47 +0200
Subject: [PATCH 15/16] remove slide in topbar animation

---
 src/modules/ui/layout/topbar/Topbar.vue | 36 +++++--------------------
 1 file changed, 7 insertions(+), 29 deletions(-)

diff --git a/src/modules/ui/layout/topbar/Topbar.vue b/src/modules/ui/layout/topbar/Topbar.vue
index 9fd27cbada..6172dbe8ab 100644
--- a/src/modules/ui/layout/topbar/Topbar.vue
+++ b/src/modules/ui/layout/topbar/Topbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<VToolbar flat :height="appBarHeight" :class="toolbarClasses">
+	<VToolbar flat :height="appBarHeight" :class="isFixed ? 'toolbar--fixed' : ''">
 		<CloudLogo v-if="!sidebarExpanded" class="mt-1" />
 		<template #prepend>
 			<VAppBarNavIcon
@@ -44,7 +44,7 @@
 		/>
 		<UserMenu v-if="user" :user="user" :role-names="roleNames" class="mr-3" />
 	</VToolbar>
-	<div v-if="isFixed && isVisible" aria-hidden="true" class="toolbar-placeholder" />
+	<div v-if="isFixed" aria-hidden="true" class="toolbar-placeholder" :style="{ height: appBarHeight + 'px' }" />
 </template>
 
 <script setup lang="ts">
@@ -62,7 +62,6 @@ import { useDisplay } from "vuetify";
 const SCROLL_THRESHOLD = 100;
 const SCROLL_DISTANCE = 10;
 const isFixed = ref(false);
-const isVisible = ref(false);
 let lastScrollY = window.scrollY;
 
 const handleScroll = () => {
@@ -71,23 +70,14 @@ const handleScroll = () => {
 
 	if (currentScrollY <= 0) {
 		isFixed.value = false;
-		isVisible.value = false;
 	} else if (currentScrollY < lastScrollY && currentScrollY > SCROLL_THRESHOLD && scrollDistance > SCROLL_DISTANCE) {
 		isFixed.value = true;
-		isVisible.value = true;
 	} else if (currentScrollY > lastScrollY && currentScrollY > SCROLL_THRESHOLD && scrollDistance > SCROLL_DISTANCE) {
-		isFixed.value = true;
-		isVisible.value = false;
+		isFixed.value = false;
 	}
 	lastScrollY = currentScrollY;
 };
 
-const toolbarClasses = computed(() => [
-	isFixed.value ? "toolbar--fixed" : "",
-	isFixed.value && isVisible.value ? "toolbar--visible" : "",
-	isFixed.value && !isVisible.value ? "toolbar--hidden" : "",
-]);
-
 onMounted(() => {
 	window.addEventListener("scroll", handleScroll);
 });
@@ -142,6 +132,9 @@ const appBarHeight = computed(() => {
 </script>
 
 <style scoped>
+.toolbar-placeholder {
+	width: 100%;
+}
 .school-name {
 	max-width: 280px;
 	text-overflow: ellipsis;
@@ -158,28 +151,13 @@ const appBarHeight = computed(() => {
 	background-color: #fff !important;
 }
 
-.toolbar-placeholder {
-	height: 50px;
-}
-
-.toolbar--hidden {
-	transform: translateY(-100%);
-	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-	opacity: 0;
-}
-
-.toolbar--visible {
+.toolbar--fixed {
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	z-index: 1000;
 	opacity: 1;
-}
-
-.toolbar--fixed.toolbar--visible {
-	transform: translateY(0);
-	opacity: 1;
 	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
 }
 </style>

From 7901bb64737a3fc890c5d6ed966f7b77bc4dfe9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Sch=C3=BCnzel?= <f.schuenzel@googlemail.com>
Date: Wed, 8 Oct 2025 17:50:27 +0200
Subject: [PATCH 16/16] static with expanded sidebar

---
 src/modules/ui/layout/topbar/Topbar.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/modules/ui/layout/topbar/Topbar.vue b/src/modules/ui/layout/topbar/Topbar.vue
index 6172dbe8ab..9b7b9c3f53 100644
--- a/src/modules/ui/layout/topbar/Topbar.vue
+++ b/src/modules/ui/layout/topbar/Topbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<VToolbar flat :height="appBarHeight" :class="isFixed ? 'toolbar--fixed' : ''">
+	<VToolbar flat :height="appBarHeight" :class="!props.sidebarExpanded && isFixed ? 'toolbar--fixed' : ''">
 		<CloudLogo v-if="!sidebarExpanded" class="mt-1" />
 		<template #prepend>
 			<VAppBarNavIcon
@@ -44,7 +44,12 @@
 		/>
 		<UserMenu v-if="user" :user="user" :role-names="roleNames" class="mr-3" />
 	</VToolbar>
-	<div v-if="isFixed" aria-hidden="true" class="toolbar-placeholder" :style="{ height: appBarHeight + 'px' }" />
+	<div
+		v-if="!props.sidebarExpanded && isFixed"
+		aria-hidden="true"
+		class="toolbar-placeholder"
+		:style="{ height: appBarHeight + 'px' }"
+	/>
 </template>
 
 <script setup lang="ts">
@@ -65,6 +70,11 @@ const isFixed = ref(false);
 let lastScrollY = window.scrollY;
 
 const handleScroll = () => {
+	if (props.sidebarExpanded) {
+		isFixed.value = false;
+		lastScrollY = window.scrollY;
+		return;
+	}
 	const currentScrollY = window.scrollY;
 	const scrollDistance = Math.abs(currentScrollY - lastScrollY);
 
@@ -86,7 +96,7 @@ onUnmounted(() => {
 	window.removeEventListener("scroll", handleScroll);
 });
 
-defineProps({
+const props = defineProps({
 	sidebarExpanded: {
 		type: Boolean,
 		required: true,