ADD: added first working version
This commit is contained in:
hwinkel
@@ -1,13 +1,6 @@
|
||||
import { Link, Form, useLocation } from "react-router";
|
||||
import {
|
||||
Calculator,
|
||||
Building2,
|
||||
LayoutDashboard,
|
||||
LogOut,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
import { Calculator, Building2, LayoutDashboard, LogOut, ChevronRight } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface NavItem {
|
||||
label: string;
|
||||
@@ -20,57 +13,91 @@ const navItems: NavItem[] = [
|
||||
{ label: "Mandanten", href: "/companies", icon: <Building2 className="h-4 w-4" /> },
|
||||
];
|
||||
|
||||
function getInitials(name?: string | null): string {
|
||||
if (!name) return "?";
|
||||
return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
|
||||
}
|
||||
|
||||
export function Sidebar({ userName }: { userName?: string | null }) {
|
||||
const location = useLocation();
|
||||
const pathname = location.pathname;
|
||||
|
||||
return (
|
||||
<aside className="w-60 shrink-0 flex flex-col bg-white border-r border-gray-200 min-h-screen">
|
||||
<div className="flex items-center gap-3 px-4 py-5 border-b border-gray-200">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-600">
|
||||
<aside
|
||||
className="fixed inset-y-0 left-0 z-20 flex flex-col"
|
||||
style={{ width: "var(--sidebar-width)", background: "#0f172a", borderRight: "1px solid #1e293b" }}
|
||||
>
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3 px-5 py-5" style={{ borderBottom: "1px solid #1e293b" }}>
|
||||
<div
|
||||
className="flex items-center justify-center w-9 h-9 rounded-xl"
|
||||
style={{ background: "linear-gradient(135deg, #6366f1, #7c3aed)", boxShadow: "0 4px 12px rgba(99,102,241,0.3)" }}
|
||||
>
|
||||
<Calculator className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900 text-sm leading-tight">
|
||||
Rechnungs-<br />manager
|
||||
</span>
|
||||
<div>
|
||||
<span className="font-semibold text-sm leading-tight block" style={{ color: "#f1f5f9" }}>
|
||||
Rechnungsmanager
|
||||
</span>
|
||||
<span className="text-xs" style={{ color: "#475569" }}>Buchhaltung</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-3 py-4 space-y-0.5">
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 px-3 py-5" style={{ overflowY: "auto" }}>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider px-3 mb-2" style={{ color: "#334155" }}>
|
||||
Navigation
|
||||
</p>
|
||||
{navItems.map((item) => {
|
||||
const active = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
|
||||
const active =
|
||||
pathname === item.href ||
|
||||
(item.href !== "/" && pathname.startsWith(item.href));
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
to={item.href}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
|
||||
active
|
||||
? "bg-indigo-50 text-indigo-700"
|
||||
: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
|
||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors mb-0.5",
|
||||
)}
|
||||
style={
|
||||
active
|
||||
? { background: "#4f46e5", color: "#ffffff" }
|
||||
: { color: "#94a3b8" }
|
||||
}
|
||||
>
|
||||
{item.icon}
|
||||
{item.label}
|
||||
{active && <ChevronRight className="ml-auto h-3 w-3 text-indigo-400" />}
|
||||
{active && <ChevronRight className="ml-auto h-3.5 w-3.5" style={{ color: "#a5b4fc" }} />}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="px-3 py-4 border-t border-gray-200">
|
||||
{userName && (
|
||||
<p className="text-xs text-gray-500 px-3 mb-2 truncate">{userName}</p>
|
||||
)}
|
||||
{/* User section */}
|
||||
<div className="px-3 py-4" style={{ borderTop: "1px solid #1e293b" }}>
|
||||
<div
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-lg mb-2"
|
||||
style={{ background: "#1e293b" }}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-center w-7 h-7 rounded-full text-white text-xs font-bold shrink-0"
|
||||
style={{ background: "linear-gradient(135deg, #818cf8, #7c3aed)" }}
|
||||
>
|
||||
{getInitials(userName)}
|
||||
</div>
|
||||
{userName && (
|
||||
<p className="text-sm font-medium truncate" style={{ color: "#cbd5e1" }}>{userName}</p>
|
||||
)}
|
||||
</div>
|
||||
<Form method="post" action="/logout">
|
||||
<Button
|
||||
<button
|
||||
type="submit"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-gray-600 hover:text-red-600 hover:bg-red-50"
|
||||
className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium"
|
||||
style={{ color: "#64748b" }}
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Abmelden
|
||||
</Button>
|
||||
</button>
|
||||
</Form>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
import { useMatches, Link } from "react-router";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
|
||||
interface Breadcrumb {
|
||||
label: string;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
interface BreadcrumbHandle {
|
||||
breadcrumbs: (data: unknown) => Breadcrumb[];
|
||||
}
|
||||
|
||||
function isBreadcrumbHandle(handle: unknown): handle is BreadcrumbHandle {
|
||||
return (
|
||||
typeof handle === "object" &&
|
||||
handle !== null &&
|
||||
"breadcrumbs" in handle &&
|
||||
typeof (handle as BreadcrumbHandle).breadcrumbs === "function"
|
||||
);
|
||||
}
|
||||
|
||||
function getInitials(name?: string | null): string {
|
||||
if (!name) return "?";
|
||||
return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
|
||||
}
|
||||
|
||||
export function Topbar({ userName }: { userName?: string | null }) {
|
||||
const matches = useMatches();
|
||||
|
||||
const activeMatch = [...matches].reverse().find((m) => isBreadcrumbHandle(m.handle));
|
||||
const breadcrumbs: Breadcrumb[] =
|
||||
activeMatch && isBreadcrumbHandle(activeMatch.handle)
|
||||
? activeMatch.handle.breadcrumbs(activeMatch.data)
|
||||
: [];
|
||||
|
||||
return (
|
||||
<header
|
||||
className="sticky top-0 z-10 shrink-0"
|
||||
style={{
|
||||
height: "3.5rem",
|
||||
background: "#ffffff",
|
||||
borderBottom: "1px solid #e2e8f0",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
paddingLeft: "1.5rem",
|
||||
paddingRight: "1.5rem",
|
||||
}}
|
||||
>
|
||||
{/* Breadcrumbs */}
|
||||
<nav style={{ display: "flex", alignItems: "center", gap: "0.25rem", fontSize: "0.875rem", minWidth: 0 }}>
|
||||
{breadcrumbs.length === 0 ? (
|
||||
<span style={{ color: "#94a3b8" }}>Rechnungsmanager</span>
|
||||
) : (
|
||||
breadcrumbs.map((crumb, i) => {
|
||||
const isLast = i === breadcrumbs.length - 1;
|
||||
return (
|
||||
<span key={i} style={{ display: "flex", alignItems: "center", gap: "0.25rem", minWidth: 0 }}>
|
||||
{i > 0 && <ChevronRight className="h-3.5 w-3.5" style={{ color: "#cbd5e1", flexShrink: 0 }} />}
|
||||
{isLast || !crumb.href ? (
|
||||
<span
|
||||
style={{
|
||||
fontWeight: isLast ? 500 : 400,
|
||||
color: isLast ? "#0f172a" : "#64748b",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{crumb.label}
|
||||
</span>
|
||||
) : (
|
||||
<Link
|
||||
to={crumb.href}
|
||||
style={{ color: "#64748b", textDecoration: "none", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
|
||||
>
|
||||
{crumb.label}
|
||||
</Link>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* User */}
|
||||
{userName && (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "0.625rem", marginLeft: "1rem", flexShrink: 0 }}>
|
||||
<span style={{ fontSize: "0.875rem", color: "#64748b" }}>{userName}</span>
|
||||
<div
|
||||
style={{
|
||||
width: "2rem",
|
||||
height: "2rem",
|
||||
borderRadius: "9999px",
|
||||
background: "linear-gradient(135deg, #818cf8, #7c3aed)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "#ffffff",
|
||||
fontSize: "0.75rem",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{getInitials(userName)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user