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

34
templates/backend/base.html
View File

@@ -1 +1,35 @@
{% extends "base.html" %}
{% block sidebar %}
<div class="flex flex-col gap-4 w-full">
<div class="flex flex-col gap-1">
<div class="text-neutral border-b border-neutral font-bold text-sm opacity-40 mb-2">Members</div>
<a class="flex flex-row gap-2 items-center hover:bg-neutral-content rounded-md p-2 cursor-default hover:cursor-pointer">
<i class="fa-solid fa-users"></i>
<span>Members</span>
</a>
<a class="flex flex-row gap-2 items-center hover:bg-neutral-content rounded-md p-2">
<i class="fa-solid fa-users"></i>
<span>Members</span>
</a>
</div>
<div>
<div>Members</div>
<a>
<i class="fa-solid fa-users"></i>
<span>Members</span>
</a>
</div>
</div>
<ul class="menu bg-base-200 rounded-box w-56">
<li class="menu-title">Members</li>
<li class="menu-active">
<a>
<i class="fa-solid fa-users w-5 h-5 mr-2 self-center"></i>Members
</a>
</li>
</ul>
{% endblock sidebar %}

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>

4
templates/members/member_filter.html
View File

@@ -1,3 +1,5 @@
{% extends "backend/base.html" %}
{% block content %}test <i class="fa-solid fa-hockey-puck"></i>{% endblock content %}
{% block content %}
<div class="h-full">1</div>
{% endblock content %}

17
theme/static_src/src/styles.css
View File

@@ -20,3 +20,20 @@
--font-jersey: Graduate, sans-serif;
--font-sans: Open Sans, Noto Sans, Barlow Semi Condensed, Ubuntu, Fira Sans, Catamaran, Cabin, Roboto, sans-serif;
}
@layer utilities {
.navbar-small {
}
.navbar-small > div {
@apply py-1;
}
.navbar-small h1 {
@apply text-lg;
}
.navbar-small nav {
@apply text-base;
}
}