Task 8.3: Create src/app/app/layout.tsx with SessionProvider and nav bar
Protected app layout wrapping all /app/* pages with SessionProvider from next-auth/react. Includes a minimal fixed nav bar with an app title link, a settings link to /app/settings, and a placeholder slot for the user menu dropdown (to be implemented in task 13.1). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
985f459bd7
commit
07efa32cfb
2 changed files with 60 additions and 1 deletions
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
- [x] 8.1 `[haiku]` Create `src/app/(public)/layout.tsx` — minimal layout for public pages (shared fonts/theme, no sidebar)
|
||||
- [x] 8.2 `[haiku]` Move current `src/app/page.tsx` to `src/app/app/page.tsx` (workspace at `/app`)
|
||||
- [ ] 8.3 `[sonnet]` Create `src/app/app/layout.tsx` — protected layout with `SessionProvider`, user menu nav bar, sidebar with settings link
|
||||
- [x] 8.3 `[sonnet]` Create `src/app/app/layout.tsx` — protected layout with `SessionProvider`, user menu nav bar, sidebar with settings link
|
||||
- [ ] 8.4 `[haiku]` Update any hardcoded `/` links in existing components to `/app`
|
||||
|
||||
## 9. Landing Page
|
||||
|
|
|
|||
59
src/app/app/layout.tsx
Normal file
59
src/app/app/layout.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
'use client';
|
||||
|
||||
import { SessionProvider } from 'next-auth/react';
|
||||
import Link from 'next/link';
|
||||
import { Settings } from 'lucide-react';
|
||||
|
||||
/**
|
||||
* Protected app layout.
|
||||
*
|
||||
* Wraps all /app/* pages with SessionProvider so that auth hooks
|
||||
* (useSession, signIn, signOut) are available throughout the workspace.
|
||||
*
|
||||
* Contains a minimal top nav bar with:
|
||||
* - App title / home link
|
||||
* - Settings link (→ /app/settings)
|
||||
* - Placeholder slot for the user menu (task 13.1)
|
||||
*
|
||||
* The full user-menu dropdown (avatar, sign-out, etc.) is wired up in task 13.1.
|
||||
*/
|
||||
export default function AppLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<SessionProvider>
|
||||
{/* Minimal nav bar — user menu dropdown added in task 13.1 */}
|
||||
<header className="fixed top-0 inset-x-0 z-50 h-10 flex items-center justify-between px-4 bg-background border-b border-border">
|
||||
<Link
|
||||
href="/app"
|
||||
className="text-sm font-semibold text-foreground tracking-tight hover:opacity-80 transition-opacity"
|
||||
>
|
||||
Candle Annotator
|
||||
</Link>
|
||||
|
||||
<nav className="flex items-center gap-2">
|
||||
{/* Settings link */}
|
||||
<Link
|
||||
href="/app/settings"
|
||||
className="flex items-center gap-1.5 px-2 py-1 text-xs text-muted-foreground hover:text-foreground rounded hover:bg-secondary/50 transition-colors"
|
||||
>
|
||||
<Settings className="w-3.5 h-3.5" />
|
||||
Settings
|
||||
</Link>
|
||||
|
||||
{/* User menu placeholder — implemented in task 13.1 */}
|
||||
<div className="w-7 h-7 rounded-full bg-secondary/50 flex items-center justify-center text-xs text-muted-foreground" aria-label="User menu (coming soon)">
|
||||
?
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{/* Push content below the fixed nav bar */}
|
||||
<div className="pt-10 h-screen">
|
||||
{children}
|
||||
</div>
|
||||
</SessionProvider>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue