| '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) {
|
|
|
| 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>
|
| </>
|
| )
|
| }
|
|
|
|
|
| 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>
|
| </>
|
| )
|
| } |
|
|
