refactor: make Header a server component to avoid auth flash on load
Some checks failed
Deploy with Docker Compose / deploy (push) Has been cancelled
Some checks failed
Deploy with Docker Compose / deploy (push) Has been cancelled
Move session check from client-side useSession() to server-side auth(), so the authenticated state is known at initial render. Extract interactive parts (ThemeToggle, UserMenu, WorkshopsDropdown, NavLinks) into small client components. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
|
|||||||
import { Geist, Geist_Mono } from 'next/font/google';
|
import { Geist, Geist_Mono } from 'next/font/google';
|
||||||
import './globals.css';
|
import './globals.css';
|
||||||
import { Providers } from '@/components/Providers';
|
import { Providers } from '@/components/Providers';
|
||||||
|
import { Header } from '@/components/layout/Header';
|
||||||
|
|
||||||
const geistSans = Geist({
|
const geistSans = Geist({
|
||||||
variable: '--font-geist-sans',
|
variable: '--font-geist-sans',
|
||||||
@@ -37,7 +38,12 @@ export default function RootLayout({
|
|||||||
/>
|
/>
|
||||||
</head>
|
</head>
|
||||||
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
|
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
|
||||||
<Providers>{children}</Providers>
|
<Providers>
|
||||||
|
<div className="min-h-screen bg-background">
|
||||||
|
<Header />
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</Providers>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -2,7 +2,6 @@
|
|||||||
|
|
||||||
import { SessionProvider } from 'next-auth/react';
|
import { SessionProvider } from 'next-auth/react';
|
||||||
import { ThemeProvider } from '@/contexts/ThemeContext';
|
import { ThemeProvider } from '@/contexts/ThemeContext';
|
||||||
import { Header } from '@/components/layout/Header';
|
|
||||||
import { ReactNode } from 'react';
|
import { ReactNode } from 'react';
|
||||||
|
|
||||||
interface ProvidersProps {
|
interface ProvidersProps {
|
||||||
@@ -13,10 +12,7 @@ export function Providers({ children }: ProvidersProps) {
|
|||||||
return (
|
return (
|
||||||
<SessionProvider>
|
<SessionProvider>
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
<div className="min-h-screen bg-background">
|
{children}
|
||||||
<Header />
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</SessionProvider>
|
</SessionProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,26 +1,14 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { usePathname } from 'next/navigation';
|
import { auth } from '@/lib/auth';
|
||||||
import { useSession, signOut } from 'next-auth/react';
|
import { RocketIcon } from '@/components/ui';
|
||||||
import { useTheme } from '@/contexts/ThemeContext';
|
import { ThemeToggle } from './ThemeToggle';
|
||||||
import { useState, useRef } from 'react';
|
import { UserMenu } from './UserMenu';
|
||||||
import { Avatar, RocketIcon } from '@/components/ui';
|
import { WorkshopsDropdown } from './WorkshopsDropdown';
|
||||||
import { WORKSHOPS } from '@/lib/workshops';
|
import { NavLinks } from './NavLinks';
|
||||||
import { useClickOutside } from '@/hooks/useClickOutside';
|
|
||||||
|
|
||||||
export function Header() {
|
export async function Header() {
|
||||||
const { theme, toggleTheme } = useTheme();
|
const session = await auth();
|
||||||
const { data: session, status } = useSession();
|
const isAuthenticated = !!session?.user;
|
||||||
const [menuOpen, setMenuOpen] = useState(false);
|
|
||||||
const [workshopsOpen, setWorkshopsOpen] = useState(false);
|
|
||||||
const workshopsDropdownRef = useRef<HTMLDivElement>(null);
|
|
||||||
const userMenuRef = useRef<HTMLDivElement>(null);
|
|
||||||
useClickOutside(workshopsDropdownRef, () => setWorkshopsOpen(false), workshopsOpen);
|
|
||||||
useClickOutside(userMenuRef, () => setMenuOpen(false), menuOpen);
|
|
||||||
const pathname = usePathname();
|
|
||||||
|
|
||||||
const isActiveLink = (path: string) => pathname.startsWith(path);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="sticky top-0 z-50 border-b border-border bg-card/80 backdrop-blur-sm">
|
<header className="sticky top-0 z-50 border-b border-border bg-card/80 backdrop-blur-sm">
|
||||||
@@ -31,154 +19,20 @@ export function Header() {
|
|||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<nav className="flex items-center gap-4">
|
<nav className="flex items-center gap-4">
|
||||||
{status === 'authenticated' && session?.user && (
|
{isAuthenticated && (
|
||||||
<>
|
<>
|
||||||
{/* All Workshops Link */}
|
<NavLinks />
|
||||||
<Link
|
<WorkshopsDropdown />
|
||||||
href="/sessions"
|
|
||||||
className={`text-sm font-medium transition-colors ${
|
|
||||||
isActiveLink('/sessions') && !isActiveLink('/sessions/')
|
|
||||||
? 'text-primary'
|
|
||||||
: 'text-muted hover:text-foreground'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Mes Ateliers
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{/* Objectives Link */}
|
|
||||||
<Link
|
|
||||||
href="/objectives"
|
|
||||||
className={`text-sm font-medium transition-colors ${
|
|
||||||
isActiveLink('/objectives') ? 'text-primary' : 'text-muted hover:text-foreground'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
🎯 Mes Objectifs
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{/* Teams Link */}
|
|
||||||
<Link
|
|
||||||
href="/teams"
|
|
||||||
className={`text-sm font-medium transition-colors ${
|
|
||||||
isActiveLink('/teams') ? 'text-primary' : 'text-muted hover:text-foreground'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
👥 Équipes
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{/* New Workshop Dropdown */}
|
|
||||||
<div className="relative" ref={workshopsDropdownRef}>
|
|
||||||
<button
|
|
||||||
onClick={() => setWorkshopsOpen(!workshopsOpen)}
|
|
||||||
className={`flex items-center gap-1 text-sm font-medium transition-colors ${
|
|
||||||
WORKSHOPS.some((w) => isActiveLink(w.path))
|
|
||||||
? 'text-primary'
|
|
||||||
: 'text-muted hover:text-foreground'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Nouvel atelier
|
|
||||||
<svg
|
|
||||||
className={`h-4 w-4 transition-transform ${workshopsOpen ? 'rotate-180' : ''}`}
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M19 9l-7 7-7-7"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{workshopsOpen && (
|
|
||||||
<div className="absolute left-0 z-20 mt-2 w-56 rounded-lg border border-border bg-card py-1 shadow-lg">
|
|
||||||
{WORKSHOPS.map((w) => (
|
|
||||||
<Link
|
|
||||||
key={w.id}
|
|
||||||
href={w.newPath}
|
|
||||||
className="flex items-center gap-3 px-4 py-2.5 text-sm text-foreground hover:bg-card-hover"
|
|
||||||
onClick={() => setWorkshopsOpen(false)}
|
|
||||||
>
|
|
||||||
<span className="text-lg">{w.icon}</span>
|
|
||||||
<div>
|
|
||||||
<div className="font-medium">{w.label}</div>
|
|
||||||
<div className="text-xs text-muted">{w.description}</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<button
|
<ThemeToggle />
|
||||||
onClick={toggleTheme}
|
|
||||||
className="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-card text-lg transition-colors hover:bg-card-hover"
|
|
||||||
aria-label="Toggle theme"
|
|
||||||
>
|
|
||||||
{theme === 'light' ? '🌙' : '☀️'}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{status === 'loading' ? (
|
{isAuthenticated ? (
|
||||||
<div className="h-9 w-20 animate-pulse rounded-lg bg-card-hover" />
|
<UserMenu
|
||||||
) : status === 'authenticated' && session?.user ? (
|
userName={session.user?.name}
|
||||||
<div ref={userMenuRef} className="relative">
|
userEmail={session.user?.email!}
|
||||||
<button
|
/>
|
||||||
onClick={() => setMenuOpen(!menuOpen)}
|
|
||||||
className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
|
|
||||||
>
|
|
||||||
<Avatar email={session.user.email!} name={session.user.name} size={24} />
|
|
||||||
<span className="text-sm font-medium text-foreground">
|
|
||||||
{session.user.name || session.user.email?.split('@')[0]}
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
className={`h-4 w-4 text-muted transition-transform ${menuOpen ? 'rotate-180' : ''}`}
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M19 9l-7 7-7-7"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{menuOpen && (
|
|
||||||
<div className="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg">
|
|
||||||
<div className="border-b border-border px-4 py-2">
|
|
||||||
<p className="text-xs text-muted">Connecté en tant que</p>
|
|
||||||
<p className="truncate text-sm font-medium text-foreground">
|
|
||||||
{session.user.email}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Link
|
|
||||||
href="/profile"
|
|
||||||
onClick={() => setMenuOpen(false)}
|
|
||||||
className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
|
|
||||||
>
|
|
||||||
👤 Mon Profil
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href="/users"
|
|
||||||
onClick={() => setMenuOpen(false)}
|
|
||||||
className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
|
|
||||||
>
|
|
||||||
👥 Utilisateurs
|
|
||||||
</Link>
|
|
||||||
<button
|
|
||||||
onClick={() => signOut({ callbackUrl: '/' })}
|
|
||||||
className="w-full px-4 py-2 text-left text-sm text-destructive hover:bg-card-hover"
|
|
||||||
>
|
|
||||||
Se déconnecter
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
<Link
|
<Link
|
||||||
href="/login"
|
href="/login"
|
||||||
|
|||||||
43
src/components/layout/NavLinks.tsx
Normal file
43
src/components/layout/NavLinks.tsx
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
|
||||||
|
export function NavLinks() {
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
const isActiveLink = (path: string) => pathname.startsWith(path);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Link
|
||||||
|
href="/sessions"
|
||||||
|
className={`text-sm font-medium transition-colors ${
|
||||||
|
isActiveLink('/sessions') && !isActiveLink('/sessions/')
|
||||||
|
? 'text-primary'
|
||||||
|
: 'text-muted hover:text-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Mes Ateliers
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/objectives"
|
||||||
|
className={`text-sm font-medium transition-colors ${
|
||||||
|
isActiveLink('/objectives') ? 'text-primary' : 'text-muted hover:text-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
🎯 Mes Objectifs
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/teams"
|
||||||
|
className={`text-sm font-medium transition-colors ${
|
||||||
|
isActiveLink('/teams') ? 'text-primary' : 'text-muted hover:text-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
👥 Équipes
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
17
src/components/layout/ThemeToggle.tsx
Normal file
17
src/components/layout/ThemeToggle.tsx
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useTheme } from '@/contexts/ThemeContext';
|
||||||
|
|
||||||
|
export function ThemeToggle() {
|
||||||
|
const { theme, toggleTheme } = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={toggleTheme}
|
||||||
|
className="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-card text-lg transition-colors hover:bg-card-hover"
|
||||||
|
aria-label="Toggle theme"
|
||||||
|
>
|
||||||
|
{theme === 'light' ? '🌙' : '☀️'}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
74
src/components/layout/UserMenu.tsx
Normal file
74
src/components/layout/UserMenu.tsx
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { signOut } from 'next-auth/react';
|
||||||
|
import { useState, useRef } from 'react';
|
||||||
|
import { Avatar } from '@/components/ui';
|
||||||
|
import { useClickOutside } from '@/hooks/useClickOutside';
|
||||||
|
|
||||||
|
interface UserMenuProps {
|
||||||
|
userName: string | null | undefined;
|
||||||
|
userEmail: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UserMenu({ userName, userEmail }: UserMenuProps) {
|
||||||
|
const [menuOpen, setMenuOpen] = useState(false);
|
||||||
|
const userMenuRef = useRef<HTMLDivElement>(null);
|
||||||
|
useClickOutside(userMenuRef, () => setMenuOpen(false), menuOpen);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={userMenuRef} className="relative">
|
||||||
|
<button
|
||||||
|
onClick={() => setMenuOpen(!menuOpen)}
|
||||||
|
className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
|
||||||
|
>
|
||||||
|
<Avatar email={userEmail} name={userName} size={24} />
|
||||||
|
<span className="text-sm font-medium text-foreground">
|
||||||
|
{userName || userEmail.split('@')[0]}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
className={`h-4 w-4 text-muted transition-transform ${menuOpen ? 'rotate-180' : ''}`}
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M19 9l-7 7-7-7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{menuOpen && (
|
||||||
|
<div className="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg">
|
||||||
|
<div className="border-b border-border px-4 py-2">
|
||||||
|
<p className="text-xs text-muted">Connecté en tant que</p>
|
||||||
|
<p className="truncate text-sm font-medium text-foreground">{userEmail}</p>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href="/profile"
|
||||||
|
onClick={() => setMenuOpen(false)}
|
||||||
|
className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
|
||||||
|
>
|
||||||
|
👤 Mon Profil
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/users"
|
||||||
|
onClick={() => setMenuOpen(false)}
|
||||||
|
className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
|
||||||
|
>
|
||||||
|
👥 Utilisateurs
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
onClick={() => signOut({ callbackUrl: '/' })}
|
||||||
|
className="w-full px-4 py-2 text-left text-sm text-destructive hover:bg-card-hover"
|
||||||
|
>
|
||||||
|
Se déconnecter
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
63
src/components/layout/WorkshopsDropdown.tsx
Normal file
63
src/components/layout/WorkshopsDropdown.tsx
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
import { useState, useRef } from 'react';
|
||||||
|
import { WORKSHOPS } from '@/lib/workshops';
|
||||||
|
import { useClickOutside } from '@/hooks/useClickOutside';
|
||||||
|
|
||||||
|
export function WorkshopsDropdown() {
|
||||||
|
const [workshopsOpen, setWorkshopsOpen] = useState(false);
|
||||||
|
const workshopsDropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
useClickOutside(workshopsDropdownRef, () => setWorkshopsOpen(false), workshopsOpen);
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
const isActiveLink = (path: string) => pathname.startsWith(path);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative" ref={workshopsDropdownRef}>
|
||||||
|
<button
|
||||||
|
onClick={() => setWorkshopsOpen(!workshopsOpen)}
|
||||||
|
className={`flex items-center gap-1 text-sm font-medium transition-colors ${
|
||||||
|
WORKSHOPS.some((w) => isActiveLink(w.path))
|
||||||
|
? 'text-primary'
|
||||||
|
: 'text-muted hover:text-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Nouvel atelier
|
||||||
|
<svg
|
||||||
|
className={`h-4 w-4 transition-transform ${workshopsOpen ? 'rotate-180' : ''}`}
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M19 9l-7 7-7-7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{workshopsOpen && (
|
||||||
|
<div className="absolute left-0 z-20 mt-2 w-56 rounded-lg border border-border bg-card py-1 shadow-lg">
|
||||||
|
{WORKSHOPS.map((w) => (
|
||||||
|
<Link
|
||||||
|
key={w.id}
|
||||||
|
href={w.newPath}
|
||||||
|
className="flex items-center gap-3 px-4 py-2.5 text-sm text-foreground hover:bg-card-hover"
|
||||||
|
onClick={() => setWorkshopsOpen(false)}
|
||||||
|
>
|
||||||
|
<span className="text-lg">{w.icon}</span>
|
||||||
|
<div>
|
||||||
|
<div className="font-medium">{w.label}</div>
|
||||||
|
<div className="text-xs text-muted">{w.description}</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user