303 lines
12 KiB
TypeScript
303 lines
12 KiB
TypeScript
// src/components/LayoutWrapper.tsx
|
||
'use client'
|
||
|
||
import React, { ReactNode, useEffect, useState } from 'react'
|
||
import { usePathname, useRouter } from 'next/navigation'
|
||
import Link from 'next/link'
|
||
import Image from 'next/image'
|
||
import Script from 'next/script'
|
||
import { useLocale } from '../contexts/LocaleContext'
|
||
import { useTheme } from '../contexts/ThemeContext'
|
||
import ThemeToggle from './ThemeToggle'
|
||
import LanguageSelector from './LanguageSelector'
|
||
import '../layout.css'
|
||
|
||
interface User {
|
||
id: number
|
||
username: string
|
||
email: string
|
||
full_name: string
|
||
avatar: string | null
|
||
}
|
||
|
||
export function LayoutWrapper({ children }: { children: ReactNode }) {
|
||
const pathname = usePathname() || ''
|
||
const isPublicUserPage = /^\/[^\/]+$/.test(pathname)
|
||
const [user, setUser] = useState<User | null>(null)
|
||
const [isLoading, setIsLoading] = useState(true)
|
||
const router = useRouter()
|
||
const { t } = useLocale()
|
||
|
||
// При монтировании пробуем загрузить профиль
|
||
useEffect(() => {
|
||
const checkAuth = async () => {
|
||
const token = localStorage.getItem('token')
|
||
if (token) {
|
||
try {
|
||
const response = await fetch('/api/auth/user', {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setUser({
|
||
id: data.id,
|
||
username: data.username,
|
||
email: data.email,
|
||
full_name: data.full_name || '',
|
||
avatar: data.avatar
|
||
})
|
||
} else {
|
||
// Токен недействителен
|
||
localStorage.removeItem('token')
|
||
setUser(null)
|
||
}
|
||
} catch (error) {
|
||
console.error('Auth check failed:', error)
|
||
localStorage.removeItem('token')
|
||
setUser(null)
|
||
}
|
||
}
|
||
setIsLoading(false)
|
||
}
|
||
|
||
checkAuth()
|
||
}, [])
|
||
|
||
const handleLogout = () => {
|
||
if (typeof window !== 'undefined') {
|
||
localStorage.removeItem('token')
|
||
}
|
||
setUser(null)
|
||
router.push('/')
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{/* Шапка отображается на всех страницах кроме публичных /[username] */}
|
||
{!isPublicUserPage && (
|
||
<nav className="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm border-bottom">
|
||
<div className="container">
|
||
<Link href="/" className="navbar-brand d-flex align-items-center">
|
||
<Image
|
||
src="/assets/img/CAT.png"
|
||
alt="CatLink"
|
||
width={32}
|
||
height={32}
|
||
className="me-2"
|
||
/>
|
||
<span className="fw-bold">CatLink</span>
|
||
</Link>
|
||
|
||
<button
|
||
className="navbar-toggler"
|
||
type="button"
|
||
data-bs-toggle="collapse"
|
||
data-bs-target="#navcol-1"
|
||
aria-controls="navcol-1"
|
||
aria-expanded="false"
|
||
aria-label="Toggle navigation"
|
||
>
|
||
<span className="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<div className="collapse navbar-collapse" id="navcol-1">
|
||
{/* Левое меню */}
|
||
<ul className="navbar-nav me-auto">
|
||
{user && (
|
||
<>
|
||
<li className="nav-item">
|
||
<Link href="/dashboard" className="nav-link">
|
||
<i className="bi bi-speedometer2 me-1"></i>
|
||
Дашборд
|
||
</Link>
|
||
</li>
|
||
<li className="nav-item">
|
||
<Link href="/profile" className="nav-link">
|
||
<i className="bi bi-person-gear me-1"></i>
|
||
Профиль
|
||
</Link>
|
||
</li>
|
||
</>
|
||
)}
|
||
</ul>
|
||
|
||
{/* Правое меню - всегда отображается */}
|
||
<div className="d-flex align-items-center gap-2">
|
||
{/* Переключатели темы и языка - всегда видны */}
|
||
<ThemeToggle />
|
||
<LanguageSelector />
|
||
|
||
{/* Блок авторизации */}
|
||
{isLoading ? (
|
||
<div className="spinner-border spinner-border-sm ms-2" role="status">
|
||
<span className="visually-hidden">Загрузка...</span>
|
||
</div>
|
||
) : !user ? (
|
||
<div className="d-flex gap-2 ms-2">
|
||
<Link href="/auth/login" className="btn btn-outline-primary btn-sm">
|
||
<i className="bi bi-box-arrow-in-right me-1"></i>
|
||
<span className="d-none d-sm-inline">Вход</span>
|
||
</Link>
|
||
<Link href="/auth/register" className="btn btn-primary btn-sm">
|
||
<i className="bi bi-person-plus me-1"></i>
|
||
<span className="d-none d-sm-inline">Регистрация</span>
|
||
</Link>
|
||
</div>
|
||
) : (
|
||
<div className="dropdown ms-2">
|
||
<button
|
||
className="btn btn-outline-secondary dropdown-toggle d-flex align-items-center"
|
||
type="button"
|
||
id="userDropdown"
|
||
data-bs-toggle="dropdown"
|
||
aria-expanded="false"
|
||
>
|
||
{user.avatar ? (
|
||
<Image
|
||
src={
|
||
user.avatar.startsWith('http')
|
||
? user.avatar
|
||
: `${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'}${user.avatar}`
|
||
}
|
||
alt="Avatar"
|
||
width={24}
|
||
height={24}
|
||
className="rounded-circle me-2"
|
||
/>
|
||
) : (
|
||
<i className="bi bi-person-circle me-2"></i>
|
||
)}
|
||
<span className="d-none d-md-inline">
|
||
{user.full_name?.trim() || user.username}
|
||
</span>
|
||
</button>
|
||
<ul className="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
|
||
<li>
|
||
<Link href="/dashboard" className="dropdown-item">
|
||
<i className="bi bi-speedometer2 me-2"></i>
|
||
Дашборд
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href="/profile" className="dropdown-item">
|
||
<i className="bi bi-person-gear me-2"></i>
|
||
Профиль
|
||
</Link>
|
||
</li>
|
||
<li><hr className="dropdown-divider" /></li>
|
||
<li>
|
||
<button
|
||
onClick={handleLogout}
|
||
className="dropdown-item text-danger"
|
||
>
|
||
<i className="bi bi-box-arrow-right me-2"></i>
|
||
Выход
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
)}
|
||
|
||
{/* Отступ для фиксированного навбара */}
|
||
{!isPublicUserPage && <div style={{ height: '76px' }} />}
|
||
aria-expanded="false"
|
||
>
|
||
<Image
|
||
src={
|
||
user.avatar && user.avatar.startsWith('http')
|
||
? user.avatar
|
||
: user.avatar
|
||
? `${process.env.NEXT_PUBLIC_API_URL || 'https://links.shareon.kr'}${user.avatar}`
|
||
: '/assets/img/avatar-dhg.png'
|
||
}
|
||
alt="Avatar"
|
||
width={32}
|
||
height={32}
|
||
className="rounded-circle me-2"
|
||
/>
|
||
<span className="text-dark fw-medium d-none d-md-inline">
|
||
{user.full_name?.trim() || user.username}
|
||
</span>
|
||
</button>
|
||
<ul className="dropdown-menu dropdown-menu-end">
|
||
<li>
|
||
<Link href="/profile" className="dropdown-item">
|
||
<i className="fas fa-user me-2"></i>
|
||
{t('profile.edit')}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href="/dashboard" className="dropdown-item">
|
||
<i className="fas fa-tachometer-alt me-2"></i>
|
||
{t('dashboard.title')}
|
||
</Link>
|
||
</li>
|
||
<li><hr className="dropdown-divider" /></li>
|
||
<li>
|
||
<button
|
||
onClick={handleLogout}
|
||
className="dropdown-item text-danger"
|
||
>
|
||
<i className="fas fa-sign-out-alt me-2"></i>
|
||
{t('common.logout')}
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
)}
|
||
|
||
{/* отступ, чтобы контент не прятался под фиксированным хедером */}
|
||
{!isPublicUserPage && <div className="navbar-spacing" />}
|
||
|
||
{children}
|
||
|
||
{/* Подвал не выводим на публичных страницах */}
|
||
{!isPublicUserPage && (
|
||
<footer className="bg-light footer border-top mt-5">
|
||
<div className="container py-4">
|
||
<div className="row">
|
||
<div className="col-lg-6 text-center text-lg-start mb-2 mb-lg-0">
|
||
<ul className="list-inline mb-1">
|
||
<li className="list-inline-item"><Link href="#">About</Link></li>
|
||
<li className="list-inline-item">⋅</li>
|
||
<li className="list-inline-item"><Link href="#">Contact</Link></li>
|
||
<li className="list-inline-item">⋅</li>
|
||
<li className="list-inline-item"><Link href="#">Terms of Use</Link></li>
|
||
<li className="list-inline-item">⋅</li>
|
||
<li className="list-inline-item"><Link href="#">Privacy Policy</Link></li>
|
||
</ul>
|
||
<p className="text-muted small mb-0">© CatLink 2025</p>
|
||
</div>
|
||
<div className="col-lg-6 text-center text-lg-end">
|
||
<ul className="list-inline mb-0">
|
||
<li className="list-inline-item"><Link href="#"><i className="fa fa-facebook fa-lg fa-fw"></i></Link></li>
|
||
<li className="list-inline-item"><Link href="#"><i className="fa fa-twitter fa-lg fa-fw"></i></Link></li>
|
||
<li className="list-inline-item"><Link href="#"><i className="fa fa-instagram fa-lg fa-fw"></i></Link></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
)}
|
||
|
||
{/* Bootstrap JS */}
|
||
{/* Bootstrap JS: load after React hydrates to avoid DOM mutations during hydration */}
|
||
<Script
|
||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
||
strategy="afterInteractive"
|
||
/>
|
||
<Script src="/assets/js/bs-init.js" strategy="afterInteractive" />
|
||
</>
|
||
)
|
||
}
|