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

Open and close menu on small devices

Browse Source
This commit is contained in:
Eduard Schulteis
2026-01-29 11:42:53 +01:00
parent 66e3f5a3d1
commit e4b5771b8c
3 changed files with 59 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/Header/index.tsx
View File

@@ -9,39 +9,45 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
return (
<header
data-cmp="Header"
className="header h-16 border-b border-border sticky top-0 z-20 px-4 md:px-8 flex items-center justify-between"
className="header border-border sticky top-0 z-20 flex h-16 items-center justify-between border-b px-4 md:px-8"
>
<div className="flex items-center md:hidden">
<button title="Menu" onClick={onMenuClick} className="p-2 -ml-2 text-foreground hover:bg-muted rounded-md">
<Menu className="w-6 h-6" />
<button
title="Menu"
onClick={onMenuClick}
className="text-foreground hover:bg-muted -ml-2 rounded-md p-2"
>
<Menu className="h-6 w-6" />
</button>
</div>
<div className="hidden md:flex flex-1 max-w-xl relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<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
type="text"
placeholder="Search modules, users, or files..."
className="w-full pl-10 pr-4 py-2 bg-muted/50 border-none rounded-lg text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all"
className="bg-muted/50 text-foreground focus:ring-primary/20 w-full rounded-lg border-none py-2 pr-4 pl-10 text-sm transition-all focus:ring-2 focus:outline-none"
/>
</div>
<div className="flex items-center space-x-4">
<button
title="Notifications"
className="relative p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-full transition-colors"
className="text-muted-foreground hover:text-foreground hover:bg-muted relative rounded-full p-2 transition-colors"
>
<Bell className="w-5 h-5" />
<span className="absolute top-1.5 right-1.5 w-2 h-2 bg-destructive rounded-full border-2 border-card"></span>
<Bell className="h-5 w-5" />
<span className="bg-destructive border-card absolute top-1.5 right-1.5 h-2 w-2 rounded-full border-2"></span>
</button>
<div className="flex items-center space-x-3 pl-4 border-l border-border/50">
<div className="text-right hidden sm:block">
<p className="text-sm font-medium text-foreground">Community Admin</p>
<p className="text-xs text-muted-foreground">Super Administrator</p>
<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>
<p className="text-muted-foreground text-xs">Super Administrator</p>
</div>
<div className="w-9 h-9 bg-primary/10 rounded-full flex items-center justify-center border border-primary/20">
<User className="w-5 h-5 text-primary" />
<div className="bg-primary/10 border-primary/20 flex h-9 w-9 items-center justify-center rounded-full border">
<User className="text-primary h-5 w-5" />
</div>
</div>
</div>