File size: 5,519 Bytes
5a7302b b283b34 5a7302b dff8593 5a7302b b00f0f1 b283b34 5a7302b 9853b20 5a7302b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 | 'use client'
import { emitAuthChanged, useAuth } from 'hooks/useAuth'
import { useRouter, usePathname } from 'next/navigation'
import Link from 'next/link'
export function Header() {
const { user, loading } = useAuth()
const router = useRouter()
const pathname = usePathname()
const handleLogout = async () => {
await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' })
emitAuthChanged()
router.push('/')
}
if (user) {
// Logged in header
return (
<>
<header className={`header${pathname === '/' ? ' margin' : ''}`}>
<div className="frame">
<div className="content">
<Link href="/" className="logo" title="Let's Chat">
<img src="/media/custom/header-logo.svg" alt="Let'sChat" title="Let's Chat" />
</Link>
<nav>
<ul className="menu">
<li className="logged">
<span className="icon menu icon-chats"></span>
<Link href="/dashboard" title="Moje Let's Chatky" className={pathname === '/dashboard' ? 'active' : ''}>
Moje Let's Chatky
</Link>
</li>
<li className="logged">
<span className="icon menu icon-profile"></span>
<Link href="/profile" title="Můj profil" className={pathname === '/profile' ? 'active' : ''}>
Můj profil
</Link>
</li>
<li className="wave"></li>
<li>
<span className="icon menu icon-help"></span>
<Link href="/help" title="Pomoc">Pomoc</Link>
</li>
<li>
<span className="icon menu icon-logout"></span>
<button onClick={handleLogout} title="Odhlášení">Odhlášení</button>
</li>
</ul>
<a id="menu-burger" href="#" className="burger">
<img src="/media/icon/menu.svg" alt="Menu" title="Menu" />
</a>
</nav>
</div>
</div>
</header>
<div id="menu-box">
<a href="#" className="close">
<img src="/media/icon/close.svg" alt="Zavřít" title="Zavřít" />
</a>
<ul>
<li className="logged">
<span className="icon menu icon-chats"></span>
<Link href="/dashboard" title="Moje Let's Chatky">Moje Let's Chatky</Link>
</li>
<li className="logged">
<span className="icon menu icon-profile"></span>
<Link href="/profile" title="Můj profil">Můj profil</Link>
</li>
<li>
<span className="icon menu icon-help"></span>
<Link href="/help" title="Pomoc">Pomoc</Link>
</li>
<li>
<span className="icon menu icon-logout"></span>
<button onClick={handleLogout} title="Odhlášení">Odhlášení</button>
</li>
</ul>
</div>
</>
)
}
// Not logged in header
return (
<>
<header className={`header${pathname === '/' ? ' margin' : ''}`}>
<div className="frame">
<div className="content">
<Link href="/" className="logo" title="Let's Chat">
<img src="/media/custom/header-logo.svg" alt="Let'sChat" title="Let's Chat" />
</Link>
<nav>
<ul className="menu">
<li className="wave"></li>
<li>
<span className="icon menu icon-about"></span>
<Link href="/about" title="Co je Let's Chat">Co je Let's Chat</Link>
</li>
<li>
<span className="icon menu icon-login"></span>
<Link href="/login" title="Přihlásit" className={pathname === '/login' ? 'active' : ''}>
Přihlásit
</Link>
</li>
<li>
<span className="icon menu icon-register"></span>
<Link href="/register" title="Registrace" className={pathname === '/register' ? 'active' : ''}>
Registrace
</Link>
</li>
</ul>
<a id="menu-burger" href="#" className="burger">
<img src="/media/icon/menu.svg" alt="Menu" title="Menu" />
</a>
</nav>
</div>
</div>
</header>
<div id="menu-box">
<a href="#" className="close">
<img src="/media/icon/close.svg" alt="Zavřít" title="Zavřít" />
</a>
<ul>
<li>
<span className="icon menu icon-about"></span>
<Link href="/about" title="Co je Let's Chat">Co je Let's Chat</Link>
</li>
<li>
<span className="icon menu icon-login"></span>
<Link href="/login" title="Přihlásit">Přihlásit</Link>
</li>
<li>
<span className="icon menu icon-register"></span>
<Link href="/register" title="Registrace">Registrace</Link>
</li>
</ul>
</div>
</>
)
}
|