haixunMaster/components/layout/sidebar.tsx

49 lines
1.7 KiB
TypeScript
Raw Permalink Normal View History

2026-06-21 12:50:31 +00:00
"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { NavLinks } from "@/components/layout/nav-links";
import { SidebarUtilities } from "@/components/layout/sidebar-utilities";
import { useJobs } from "@/components/layout/jobs-provider";
import { BrandLogo, BrandMark } from "@/components/brand/logo";
import { NAV_GROUPS } from "@/lib/nav";
import { useNotifications } from "@/lib/notifications/use-notifications";
import { setNotificationScope } from "@/lib/notifications/store";
export function Sidebar() {
const router = useRouter();
const { unreadCount } = useNotifications();
const { activeJobs } = useJobs();
const badgeCount = unreadCount + activeJobs.length;
const [userEmail, setUserEmail] = useState<string | null>(null);
useEffect(() => {
fetch("/api/auth/me")
.then((res) => (res.ok ? res.json() : null))
.then((data) => {
if (data?.user?.id) setNotificationScope(data.user.id);
setUserEmail(data?.user?.email ?? null);
})
.catch(() => undefined);
}, []);
async function logout() {
await fetch("/api/auth/logout", { method: "POST" });
router.replace("/login");
}
return (
<aside className="app-sidebar hidden w-[236px] shrink-0 flex-col lg:sticky lg:top-0 lg:flex lg:h-dvh lg:min-h-dvh">
<div className="flex h-[72px] shrink-0 items-center gap-2 border-b border-border px-5">
<BrandLogo size="sm" />
<BrandMark />
</div>
<div className="min-h-0 flex-1 overflow-y-auto px-3 py-5">
<NavLinks groups={NAV_GROUPS} badgeCount={badgeCount} />
<SidebarUtilities userEmail={userEmail} onLogout={logout} />
</div>
</aside>
);
}