daniel-gitea/cgr-next-js
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement dynamic mobile header with centered page title and adaptive layout

Browse Source
This commit is contained in:
Daniel Schulteis
2026-01-31 01:40:28 +01:00
parent f26dee782c
commit 712a1a2937
7 changed files with 491 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/Header/index.tsx
View File

@@ -3,15 +3,17 @@ import React from "react";
interface HeaderProps {
onMenuClick: () => void;
pageTitle?: string;
}
const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
const Header: React.FC<HeaderProps> = ({ onMenuClick, pageTitle }) => {
return (
<header
data-cmp="Header"
className="header border-border sticky top-0 z-20 flex h-16 items-center justify-between border-b px-4 md:px-8"
className="header border-border bg-background/95 sticky top-0 z-20 flex h-16 items-center border-b px-4 backdrop-blur md:px-8"
>
<div className="flex items-center md:hidden">
{/* 1. Left: Menu button (only on mobile) */}
<div className="flex flex-1 items-center md:hidden">
<button
title="Menu"
onClick={onMenuClick}
@@ -21,6 +23,14 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
</button>
</div>
{/* 2. Center: Title (only on mobile) */}
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 md:hidden">
<span className="text-xl font-bold tracking-tight text-white">
{pageTitle}
</span>
</div>
{/* 3. Desktop: Search */}
<div className="relative hidden max-w-xl flex-1 md:flex">
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<input
@@ -30,7 +40,8 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
/>
</div>
<div className="flex items-center space-x-4">
{/* 4. RIGHT SIDE: Notifications and Profile */}
<div className="flex flex-1 items-center justify-end space-x-4">
<button
title="Notifications"
className="text-muted-foreground hover:text-foreground hover:bg-muted relative rounded-full p-2 transition-colors"
@@ -40,13 +51,11 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
</button>
<div className="border-border/50 flex items-center space-x-3 border-l pl-4">
<div className="hidden text-right sm:block">
<p className="text-foreground text-sm font-medium">
Community Admin
</p>
<div className="hidden text-right sm:block text-nowrap">
<p className="text-foreground text-sm font-medium">Community Admin</p>
<p className="text-muted-foreground text-xs">Super Administrator</p>
</div>
<div className="bg-primary/10 border-primary/20 flex h-9 w-9 items-center justify-center rounded-full border">
<div className="bg-primary/10 border-primary/20 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border">
<User className="text-primary h-5 w-5" />
</div>
</div>
@@ -55,4 +64,4 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
);
};
export default Header;
export default Header;