bernard/TeamForge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update navbar behavior with shrinking effect on scroll, refine layout and styles, and enhance backend sidebar for members management.

Browse Source
This commit is contained in:
Bernard Siebens
2026-01-08 23:14:15 +01:00
parent a19d3b091e
commit 92101ca86a
4 changed files with 101 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
templates/base.html
View File

@@ -25,7 +25,28 @@
</head>
<body>
<div class="navbar bg-base-200 shadow-sm">
<header id="site-header" class="sticky top-0 z-50 bg-white shadow transition-all duration-300">
<div class="mx-auto max-w-6xl px-6 py-4 flex items-center justify-between transition-all duration-300">
<h1 class="text-2xl font-bold tracking-tight transition-all duration-300">MY LOGO</h1>
<nav class="flex items-center space-x-6 text-lg">
<a href="#" class="hover:text-blue-600 transition-colors">Home</a>
<a href="#" class="hover:text-blue-600 transition-colors">About</a>
<a href="#" class="hover:text-blue-600 transition-colors">Contact</a>
</nav>
</div>
</header>
<main class="mx-auto max-w-6xl px-6 pt-8 space-y-8">
<p class="text-gray-700">
Scroll down to see the navbar shrink
</p>
<div class="h-[2000px] bg-gray-200 rounded-lg"></div>
</main>
{% comment %}<div class="navbar bg-base-200 shadow-sm sticky top-0 z-10">
<div class="flex-1">
<label for="drawer-button" aria-label="open sidebar" class="btn btn-square btn-outline lg:hidden">
<!-- Sidebar toggle icon -->
@@ -58,12 +79,34 @@
{% block content %}PAGE CONTENT{% endblock content %}
</div>
<div class="drawer-side">
<div class="drawer-side z-0">
<label for="drawer-button" aria-label="close sidebar" class="drawer-overlay"></label>
<div class="flex min-h-full flex-col items-start bg-base-200 py-4 px-8">
{% block sidebar %}SIDEBAR CONTENT{% endblock sidebar %}
</div>
</div>
</div>
</div>{% endcomment %}
</body>
<script>
document.addEventListener("DOMContentLoaded", () => {
const header = document.getElementById("site-header");
let lastScrollY = window.scrollY;
const threshold = 40; // Amount to scroll before shrinking
const onScroll = () => {
const current = window.scrollY;
if (current > threshold) {
header.classList.add("navbar-small");
} else {
header.classList.remove("navbar-small");
}
lastScrollY = current;
};
window.addEventListener("scroll", onScroll, {passive: true});
});
</script>
</html>