1
1
"use client" ;
2
2
import { HEADER_LINKS } from "@lib/navigation" ;
3
+ import type { Session } from "next-auth" ;
4
+ import { useSession , signOut } from "next-auth/react" ;
3
5
import Link from "next/link" ;
4
6
import { usePathname } from "next/navigation" ;
5
- import styles from "./header.module.css" ;
7
+
8
+ function UserHeader ( { session } : { session : Session } ) {
9
+ return (
10
+ < >
11
+ < div className = "flex gap-3" >
12
+ < div className = "hidden flex-col justify-between py-2 sm:flex" >
13
+ < span > { session . user ?. name } </ span >
14
+ < span > { session . user ?. email } </ span >
15
+ </ div >
16
+ < button
17
+ className = "my-2 rounded bg-primary p-3 text-white"
18
+ onClick = { ( ) => signOut ( ) }
19
+ >
20
+ Logga ut
21
+ </ button >
22
+ </ div >
23
+ </ >
24
+ ) ;
25
+ }
6
26
7
27
function NavigationLinks ( ) {
8
28
const pathname = usePathname ( ) ;
9
29
10
30
return (
11
- < ol className = { styles [ "navigation-links-wrapper" ] } >
31
+ < ol className = "my-2 flex gap-2" >
12
32
{ HEADER_LINKS . map ( ( { href, name } ) => (
13
33
< li key = { href } >
14
34
< Link
15
35
href = { href }
16
36
aria-current = { href === pathname ? "page" : "false" }
17
- className = { styles [ "navigation-link" ] }
37
+ className = "inline-block rounded-lg bg-primary p-2 text-white aria-current-false:opacity-70 aria-current-false:hover:opacity-90"
18
38
>
19
39
{ name }
20
40
</ Link >
@@ -24,10 +44,17 @@ function NavigationLinks() {
24
44
) ;
25
45
}
26
46
27
- export default function Header ( ) {
47
+ export function Header ( ) {
48
+ const session = useSession ( ) ;
49
+
28
50
return (
29
- < nav className = { styles [ "navigation-wrapper" ] } >
30
- < NavigationLinks />
51
+ < nav className = " bg-elevated-light shadow-lg dark:bg-elevated-dark" >
52
+ < div className = "mx-auto flex max-w-7xl items-center justify-between px-4" >
53
+ < NavigationLinks />
54
+ { session . status === "authenticated" && (
55
+ < UserHeader session = { session . data } />
56
+ ) }
57
+ </ div >
31
58
</ nav >
32
59
) ;
33
60
}
0 commit comments