New: Ui Redesign
This commit is contained in:
parent
009d1eb065
commit
631dfa5923
22 changed files with 464 additions and 524 deletions
|
|
@ -1,11 +1,24 @@
|
|||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { useRouter, usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { ThemeToggle } from "./ThemeToggle";
|
||||
|
||||
function Mark() {
|
||||
return (
|
||||
<span className="grid h-9 w-9 place-items-center rounded-xl bg-primary text-sm font-extrabold text-white shadow-[0_8px_22px_color-mix(in_srgb,var(--theme-primary)_28%,transparent)]">
|
||||
S
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function Navbar() {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [open, setOpen] = useState(false);
|
||||
const parts = pathname.split("/").filter(Boolean);
|
||||
const classSlug = parts[0] && parts[0] !== "shared" ? parts[0] : null;
|
||||
|
||||
async function handleLogout() {
|
||||
await fetch("/api/auth/logout", { method: "POST" });
|
||||
|
|
@ -13,40 +26,82 @@ export function Navbar() {
|
|||
router.refresh();
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="bg-bg-surface border-b border-border-light">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-14">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-2.5 text-text-heading font-semibold hover:text-primary transition-colors"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5 text-primary"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
const nav = (
|
||||
<>
|
||||
<Link href="/" onClick={() => setOpen(false)} className="mb-9 flex items-center gap-3">
|
||||
<Mark />
|
||||
<span>
|
||||
<span className="block text-[11px] font-bold uppercase tracking-[0.2em] text-text-muted">Your</span>
|
||||
<span className="editorial-title block text-xl leading-none text-text-heading">Study Desk</span>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<nav className="space-y-1" aria-label="Primary navigation">
|
||||
<Link
|
||||
href="/"
|
||||
onClick={() => setOpen(false)}
|
||||
className={`flex min-h-11 items-center gap-3 rounded-xl px-3 text-sm font-semibold transition-colors ${pathname === "/" ? "bg-primary text-white shadow-sm" : "text-text-secondary hover:bg-bg-surface-alt hover:text-text-heading"}`}
|
||||
>
|
||||
<span aria-hidden className="text-lg">⌂</span> Library
|
||||
</Link>
|
||||
{classSlug && (
|
||||
<div className="pt-6">
|
||||
<p className="mb-2 px-3 text-[10px] font-bold uppercase tracking-[0.18em] text-text-muted">Current class</p>
|
||||
<Link
|
||||
href={`/${classSlug}/flashcards`}
|
||||
onClick={() => setOpen(false)}
|
||||
className={`flex min-h-11 items-center gap-3 rounded-xl px-3 text-sm font-semibold transition-colors ${pathname.includes("/flashcards") ? "bg-bg-callout text-primary" : "text-text-secondary hover:bg-bg-surface-alt hover:text-text-heading"}`}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
||||
/>
|
||||
</svg>
|
||||
Study
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<ThemeToggle />
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="text-sm text-text-muted hover:text-text-heading transition-colors cursor-pointer"
|
||||
<span aria-hidden>▤</span> Flashcards
|
||||
</Link>
|
||||
<Link
|
||||
href={`/${classSlug}/quizzes`}
|
||||
onClick={() => setOpen(false)}
|
||||
className={`mt-1 flex min-h-11 items-center gap-3 rounded-xl px-3 text-sm font-semibold transition-colors ${pathname.includes("/quizzes") ? "bg-bg-callout text-primary" : "text-text-secondary hover:bg-bg-surface-alt hover:text-text-heading"}`}
|
||||
>
|
||||
Sign out
|
||||
</button>
|
||||
<span aria-hidden>✓</span> Quizzes
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
<div className="mt-auto border-t border-border-light pt-4">
|
||||
<div className="flex items-center justify-between rounded-xl px-2 py-1.5">
|
||||
<span className="text-xs font-semibold text-text-muted">Appearance</span>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
<button onClick={handleLogout} className="mt-1 flex min-h-11 w-full items-center gap-3 rounded-xl px-3 text-left text-sm font-semibold text-text-secondary transition-colors hover:bg-error-bg hover:text-error">
|
||||
<span aria-hidden>↗</span> Sign out
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<aside className="fixed inset-y-0 left-0 z-30 hidden w-60 flex-col border-r border-border-light bg-bg-surface/88 px-4 py-5 backdrop-blur-xl md:flex">
|
||||
{nav}
|
||||
</aside>
|
||||
|
||||
<header className="sticky top-0 z-40 flex h-16 items-center justify-between border-b border-border-light bg-bg-surface/88 px-4 backdrop-blur-xl md:hidden">
|
||||
<Link href="/" className="flex items-center gap-2.5">
|
||||
<Mark />
|
||||
<span className="editorial-title text-lg text-text-heading">Study Desk</span>
|
||||
</Link>
|
||||
<button onClick={() => setOpen(true)} className="grid h-11 w-11 place-items-center rounded-xl border border-border-light bg-bg-surface-alt text-xl text-text-heading" aria-label="Open navigation" aria-expanded={open}>
|
||||
☰
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{open && (
|
||||
<div className="fixed inset-0 z-50 md:hidden">
|
||||
<button className="absolute inset-0 bg-black/45 backdrop-blur-sm" onClick={() => setOpen(false)} aria-label="Close navigation" />
|
||||
<aside className="animate-slide-up absolute inset-y-0 right-0 flex w-[min(86vw,21rem)] flex-col border-l border-border-light bg-bg-surface p-5 shadow-[var(--shadow-modal)]">
|
||||
<button onClick={() => setOpen(false)} className="absolute right-4 top-4 grid h-10 w-10 place-items-center rounded-xl text-xl text-text-muted hover:bg-bg-surface-alt" aria-label="Close navigation">×</button>
|
||||
{nav}
|
||||
</aside>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue