Show the back end header on scroll-up

core-bundle/assets/backend.js

@@ -4,6 +4,7 @@ import { definitionForModuleAndIdentifier, identifierForContextKey } from '@hotw
 import './scripts/mootao.js'
 import './scripts/core.js'
 import './scripts/autofocus.js'
+import './scripts/hide-header.js'
 import './scripts/limit-height.js'
 import './scripts/modulewizard.js'
 import './scripts/sectionwizard.js'

core-bundle/assets/scripts/hide-header.js

@@ -0,0 +1,21 @@
+window.addEventListener('DOMContentLoaded', function() {
+    const header = document.querySelector('header');
+    if (!header) return;
+
+    let lastScroll = 0;
+
+    window.addEventListener('scroll', function() {
+        // Make sure the scroll value is between 0 and maxScroll
+        const currentScroll = Math.max(0, Math.min(document.documentElement.scrollHeight - document.documentElement.clientHeight, window.scrollY));
+
+        if (lastScroll < currentScroll) {
+            header.classList.add('header--hidden');
+        } else if (lastScroll > currentScroll) {
+            header.classList.remove('header--hidden');
+        }
+
+        lastScroll = currentScroll;
+    }, {
+        passive: true
+    });
+});

core-bundle/contao/themes/flexible/entrypoints.json

@@ -2,7 +2,7 @@
   "entrypoints": {
     "backend": {
       "css": [
-        "/system/themes/flexible/backend.2d542cb5.css"
+        "/system/themes/flexible/backend.1517b9b9.css"
       ]
     },
     "confirm": {

core-bundle/contao/themes/flexible/manifest.json

@@ -1,5 +1,5 @@
 {
-  "backend.css": "/system/themes/flexible/backend.2d542cb5.css",
+  "backend.css": "/system/themes/flexible/backend.1517b9b9.css",
   "confirm.css": "/system/themes/flexible/confirm.5231eaa5.css",
   "conflict.css": "/system/themes/flexible/conflict.41a64ff6.css",
   "diff.css": "/system/themes/flexible/diff.028ed04c.css",
@@ -8,7 +8,7 @@
   "popup.css": "/system/themes/flexible/popup.751f0537.css",
   "tinymce.css": "/system/themes/flexible/tinymce.e5009f94.css",
   "tinymce-dark.css": "/system/themes/flexible/tinymce-dark.596023db.css",
-  "backend.2d542cb5.css.map": "/system/themes/flexible/backend.2d542cb5.css.map",
+  "backend.1517b9b9.css.map": "/system/themes/flexible/backend.1517b9b9.css.map",
   "confirm.5231eaa5.css.map": "/system/themes/flexible/confirm.5231eaa5.css.map",
   "conflict.41a64ff6.css.map": "/system/themes/flexible/conflict.41a64ff6.css.map",
   "diff.028ed04c.css.map": "/system/themes/flexible/diff.028ed04c.css.map",

core-bundle/contao/themes/flexible/styles/main.css

@@ -53,6 +53,16 @@ body.popup {
 	min-height: 40px;
 	text-align: left;
 	background: var(--header-bg);
+	position: fixed;
+	top: 0;
+	width: 100%;
+	z-index: 4;
+	transition: transform .2s ease;
+	transform: none;
+}
+
+#header.header--hidden {
+	transform: translateY(-40px);
 }
 
 #header h1 {
@@ -273,6 +283,7 @@ body.popup {
 #container {
 	display: flex;
 	min-height: calc(100vh - 40px);
+	padding-top: 40px;
 }
 
 .popup #container {

core-bundle/public/entrypoints.json

@@ -2,7 +2,7 @@
   "entrypoints": {
     "backend": {
       "js": [
-        "/bundles/contaocore/backend.6e5c28a4.js"
+        "/bundles/contaocore/backend.e55e9ea3.js"
       ]
     }
   }

core-bundle/public/manifest.json

@@ -1,4 +1,4 @@
 {
-  "backend.js": "/bundles/contaocore/backend.6e5c28a4.js",
-  "backend.6e5c28a4.js.map": "/bundles/contaocore/backend.6e5c28a4.js.map"
+  "backend.js": "/bundles/contaocore/backend.e55e9ea3.js",
+  "backend.e55e9ea3.js.map": "/bundles/contaocore/backend.e55e9ea3.js.map"
 }