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

51
components/Sidebar/index.tsx
View File

@@ -1,4 +1,13 @@
import { Building2, Calendar, FileText, LayoutDashboard, LogOut, Music, Settings, Users } from "lucide-react";
import {
Building2,
Calendar,
FileText,
LayoutDashboard,
LogOut,
Music,
Settings,
Users,
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React from "react";
@@ -12,46 +21,60 @@ const navItems = [
{ icon: Settings, label: "Settings", path: "#settings" },
];
const Sidebar: React.FC = () => {
type SidebarProps = {
open?: boolean;
close: () => void;
};
const Sidebar: React.FC<SidebarProps> = ({ open, close }) => {
const pathName = usePathname();
return (
<aside
data-cmp="Sidebar"
className="side-bar hidden md:flex flex-col w-64 h-screen border-r border-border fixed left-0 top-0 z-30"
className={`side-bar border-border fixed top-0 left-0 z-30 h-screen w-64 flex-col border-r md:flex ${open ? "flex" : "hidden"}`}
>
<div className="p-6 border-b border-border">
<div className="border-border border-b p-6">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<Building2 className="w-5 h-5 text-primary-foreground" />
<div className="bg-primary flex h-8 w-8 items-center justify-center rounded-lg">
<Building2 className="text-primary-foreground h-5 w-5" />
</div>
<span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600">
<span className="from-primary bg-gradient-to-r to-purple-600 bg-clip-text text-xl font-bold text-transparent">
CGR Admin
</span>
</div>
</div>
<nav className="flex-1 overflow-y-auto py-6 px-3 space-y-1">
<nav className="flex-1 space-y-1 overflow-y-auto px-3 py-6">
{navItems.map((item) => {
const isActive = pathName === item.path;
return (
<Link
key={item.label}
href={item.path}
className={`flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
isActive ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
className={`flex items-center space-x-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
isActive
? "bg-primary/10 text-primary"
: "text-muted-foreground hover:bg-muted hover:text-foreground"
}`}
onClick={() => {
if (open) {
close();
}
}}
>
<item.icon className={`w-5 h-5 ${isActive ? "text-primary" : ""}`} />
<item.icon
className={`h-5 w-5 ${isActive ? "text-primary" : ""}`}
/>
<span>{item.label}</span>
</Link>
);
})}
</nav>
<div className="p-4 border-t border-border">
<button className="flex items-center space-x-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors">
<LogOut className="w-5 h-5" />
<div className="border-border border-t p-4">
<button className="text-destructive hover:bg-destructive/10 flex w-full items-center space-x-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors">
<LogOut className="h-5 w-5" />
<span>Sign Out</span>
</button>
</div>