motaju/msgapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header

Browse Source
This commit is contained in:
koreacomp5
2025-11-05 23:03:53 +09:00
parent 7d9c241d17
commit 808fe5fc68
2 changed files with 34 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/components/AppHeader.tsx
View File

@@ -377,7 +377,7 @@ export function AppHeader() {
if (!e.currentTarget.contains(next)) setMegaOpen(false);
}}
>
<div className="relative flex items-center gap-8" ref={navRowRef}>
<div className="relative flex items-center gap-0" ref={navRowRef}>
{categories.map((cat, idx) => (
<div
key={cat.id}
@@ -389,7 +389,7 @@ export function AppHeader() {
>
<Link
href={cat.boards?.[0]?.slug ? `/boards/${cat.boards[0].slug}` : `/boards?category=${cat.slug}`}
className={`block w-full px-2 py-2 text-sm font-medium transition-colors duration-200 whitespace-nowrap ${
className={`block w-full px-6 py-2 text-sm font-medium transition-colors duration-200 whitespace-nowrap ${
(megaOpen && openSlug === cat.slug) || activeCategorySlug === cat.slug ? "" : "text-neutral-700"
}`}
style={(megaOpen && openSlug === cat.slug) || activeCategorySlug === cat.slug ? { color: "var(--red-50, #F94B37)" } : undefined}
@@ -423,7 +423,7 @@ export function AppHeader() {
/>
</div>
<div
className={`fixed left-0 right-0 z-50 bg-white shadow-[0_12px_32px_rgba(0,0,0,0.12)] transition-all duration-200 ${
className={`fixed left-0 right-0 z-50 bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60 shadow-[0_12px_32px_rgba(0,0,0,0.12)] transition-all duration-200 ${
megaOpen ? "opacity-100" : "pointer-events-none opacity-0"
}`}
style={{ top: headerBottom }}
@@ -442,15 +442,16 @@ export function AppHeader() {
style={{ left: (leftPositions[cat.slug] ?? 0), width: blockWidths[cat.slug] ?? undefined }}
>
{/* <div className="mb-2 font-semibold text-neutral-800">{cat.name}</div> */}
<div className="mx-auto flex flex-col items-center gap-3 w-full">
<div className="mx-auto flex flex-col items-center gap-0 w-full">
{cat.boards.map((b) => (
<Link
key={b.id}
href={`/boards/${b.slug}`}
className={`rounded px-2 py-1 text-sm transition-colors duration-150 text-center whitespace-nowrap ${
activeBoardId === b.slug ? "font-semibold" : "text-neutral-700 hover:text-neutral-900 hover:bg-neutral-100"
className={`rounded px-2 pb-4 text-sm transition-colors duration-150 text-center whitespace-nowrap ${
activeBoardId === b.slug
? "text-[var(--red-50,#F94B37)] font-semibold"
: "text-neutral-700 hover:text-[var(--red-50,#F94B37)]"
}`}
style={activeBoardId === b.slug ? { color: "var(--red-50, #F94B37)" } : undefined}
aria-current={activeBoardId === b.slug ? "page" : undefined}
>
{b.name}