93 lines
3.7 KiB
TypeScript
93 lines
3.7 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { FileText, PenSquare, MessageSquare, Trash2, Rss, Link2, MessageCircle, Image, Menu, X, Bot } from "lucide-react";
|
||
|
|
import ThemeToggle from "./ThemeToggle";
|
||
|
|
|
||
|
|
const navItems = [
|
||
|
|
{ href: "/", label: "文章", icon: FileText },
|
||
|
|
{ href: "/edit", label: "撰写", icon: PenSquare },
|
||
|
|
{ href: "/comments", label: "评论", icon: MessageSquare },
|
||
|
|
{ href: "/feeds", label: "订阅源", icon: Rss },
|
||
|
|
{ href: "/links", label: "友链", icon: Link2 },
|
||
|
|
{ href: "/images", label: "图片", icon: Image },
|
||
|
|
{ href: "/wechat", label: "公众号", icon: MessageCircle },
|
||
|
|
{ href: "/recycle", label: "回收站", icon: Trash2 },
|
||
|
|
{ href: "/bot", label: "Bot", icon: Bot },
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function Sidebar() {
|
||
|
|
const pathname = usePathname();
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => { setOpen(false); }, [pathname]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!open) return;
|
||
|
|
const original = document.body.style.overflow;
|
||
|
|
document.body.style.overflow = "hidden";
|
||
|
|
return () => { document.body.style.overflow = original; };
|
||
|
|
}, [open]);
|
||
|
|
|
||
|
|
const isActive = (href: string) => {
|
||
|
|
if (href === "/") return pathname === "/";
|
||
|
|
return pathname.startsWith(href);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<header className="md:hidden fixed top-0 inset-x-0 z-40 h-12 bg-surface border-b border-line flex items-center px-3">
|
||
|
|
<button type="button" onClick={() => setOpen(true)} className="p-2 -ml-1 rounded-md text-text/80 hover:bg-bg hover:text-accent transition-colors" aria-label="menu">
|
||
|
|
<Menu size={18} />
|
||
|
|
</button>
|
||
|
|
<span className="ml-2 text-[13px] font-bold text-accent tracking-wider">{"\u5199\u4f5c\u540e\u53f0"}</span>
|
||
|
|
</header>
|
||
|
|
{open && (
|
||
|
|
<div className="md:hidden fixed inset-0 z-40 bg-[#223d66]/30 backdrop-blur-sm" onClick={() => setOpen(false)} aria-hidden />
|
||
|
|
)}
|
||
|
|
<aside className={`bg-surface border-r border-line flex flex-col shrink-0 transition-transform duration-200 ease-out md:w-1/4 md:min-w-[200px] md:max-w-[260px] md:static md:translate-x-0 fixed top-0 left-0 z-50 h-full w-[78%] max-w-[280px] ${open ? "translate-x-0" : "-translate-x-full md:translate-x-0"}`}>
|
||
|
|
{/* Logo */}
|
||
|
|
<div className="px-5 py-5 border-b border-line flex items-start justify-between gap-2">
|
||
|
|
<div>
|
||
|
|
<h1 className="text-[15px] font-bold text-accent tracking-wider">
|
||
|
|
写作后台
|
||
|
|
</h1>
|
||
|
|
<p className="text-[11px] text-muted/70 mt-0.5">优世界</p>
|
||
|
|
</div>
|
||
|
|
<button type="button" onClick={() => setOpen(false)} className="md:hidden p-1.5 -mr-1 rounded-md text-muted hover:text-text hover:bg-bg transition-colors" aria-label="close">
|
||
|
|
<X size={16} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Nav */}
|
||
|
|
<nav className="flex-1 px-2.5 py-3 space-y-0.5">
|
||
|
|
{navItems.map((item) => {
|
||
|
|
const active = isActive(item.href);
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={item.href}
|
||
|
|
href={item.href}
|
||
|
|
className={`flex items-center gap-2.5 px-3 py-2 rounded-md text-[13px] transition-colors ${
|
||
|
|
active
|
||
|
|
? "bg-accent text-white font-medium"
|
||
|
|
: "text-text/80 hover:bg-bg hover:text-accent"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<item.icon size={15} strokeWidth={active ? 2.5 : 1.8} />
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
{/* Footer */}
|
||
|
|
<div className="px-4 py-3 border-t border-line">
|
||
|
|
<ThemeToggle />
|
||
|
|
<p className="text-[10px] text-muted/50">localhost:8016</p>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|