94 lines
3.4 KiB
TypeScript
94 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname, useRouter } from "next/navigation"
|
|
import { LayoutDashboard, Image, Search, Send, ListOrdered, FileText, LogOut } from "lucide-react"
|
|
|
|
const links = [
|
|
{ href: "/feed", label: "Feed", icon: LayoutDashboard },
|
|
{ href: "/submit", label: "Enviar", icon: Send },
|
|
{ href: "/search", label: "Buscar", icon: Search },
|
|
{ href: "/queue", label: "Cola", icon: ListOrdered },
|
|
{ href: "/admin/posts", label: "Posts", icon: FileText },
|
|
]
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname()
|
|
const router = useRouter()
|
|
|
|
async function handleLogout() {
|
|
await fetch("/api/auth/logout", { method: "POST" })
|
|
router.push("/login")
|
|
}
|
|
|
|
// Do not render sidebar / bottom bar if inside reader page
|
|
if (pathname.includes("/read")) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Desktop Sidebar */}
|
|
<aside className="hidden md:flex fixed left-0 top-0 z-30 h-screen w-56 flex-col border-r border-[var(--border)] bg-[var(--background)]">
|
|
<div className="flex items-center gap-2.5 border-b border-[var(--border)] px-5 py-4">
|
|
<Link href="/" className="flex items-center gap-2.5">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--accent-subtle)]">
|
|
<Image className="h-4 w-4 text-[var(--accent)]" />
|
|
</div>
|
|
<span className="text-sm font-bold tracking-tight">worst-scan</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<nav className="flex flex-1 flex-col gap-0.5 p-3">
|
|
{links.map(({ href, label, icon: Icon }) => {
|
|
const isActive = pathname.startsWith(href)
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all ${
|
|
isActive
|
|
? "bg-[var(--surface)] font-medium text-[var(--foreground)]"
|
|
: "text-[var(--muted)] hover:bg-[var(--surface)] hover:text-[var(--foreground)]"
|
|
}`}
|
|
>
|
|
<Icon className={`h-4 w-4 ${isActive ? "text-[var(--accent)]" : ""}`} />
|
|
{label}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
<div className="border-t border-[var(--border)] p-3">
|
|
<button
|
|
onClick={handleLogout}
|
|
className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-[var(--muted)] transition-all hover:bg-[var(--surface)] hover:text-[var(--foreground)]"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
Salir
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Mobile Bottom Navigation Bar */}
|
|
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-40 flex h-14 items-center justify-around border-t border-[var(--border)] bg-[var(--background)]/90 backdrop-blur-lg px-2">
|
|
{links.map(({ href, label, icon: Icon }) => {
|
|
const isActive = pathname.startsWith(href)
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={`flex flex-col items-center justify-center gap-1 py-1 px-3 text-[10px] font-medium transition-all ${
|
|
isActive ? "text-[var(--accent)]" : "text-[var(--muted)] hover:text-[var(--foreground)]"
|
|
}`}
|
|
>
|
|
<Icon className="h-5 w-5" />
|
|
<span>{label}</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|