localization && navbar fix

2025-11-09 22:15:48 +09:00
parent a963281be0
commit 68bbef35ee
22 changed files with 1386 additions and 526 deletions
--- a/frontend/linktree-frontend/src/app/components/LayoutWrapper.tsx
+++ b/frontend/linktree-frontend/src/app/components/LayoutWrapper.tsx
@@ -7,7 +7,6 @@ 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'
@@ -23,38 +22,42 @@ interface User {
 export function LayoutWrapper({ children }: { children: ReactNode }) {
  const pathname = usePathname() || ''
  const isPublicUserPage = /^\/[^\/]+$/.test(pathname)
-  const isDashboard = pathname === '/dashboard'
  const [user, setUser] = useState<User | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()
  const { t } = useLocale()

-  // При монтировании пробуем загрузить профиль
  useEffect(() => {
-    const token = localStorage.getItem('token')
-    if (token) {
-      fetch('/api/auth/user', {
-        headers: { Authorization: `Bearer ${token}` },
-      })
-        .then(res => {
-          if (!res.ok) throw new Error()
-          return res.json()
-        })
-        .then(data => {
-          // Заполняем полную информацию о пользователе
-          setUser({
-            id: data.id,
-            username: data.username,
-            email: data.email,
-            full_name: data.full_name || '',
-            avatar: data.avatar
+    const checkAuth = async () => {
+      const token = localStorage.getItem('token')
+      if (token) {
+        try {
+          const response = await fetch('/api/auth/user', {
+            headers: { Authorization: `Bearer ${token}` },
          })
-        })
-        .catch(() => {
-          // сбросить некорректный токен
+          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 = () => {
@@ -67,9 +70,8 @@ export function LayoutWrapper({ children }: { children: ReactNode }) {

  return (
    <>
-      {/* Шапка не выводим на публичных страницах /[username] */}
      {!isPublicUserPage && (
-        <nav className="navbar navbar-expand-lg theme-bg-secondary fixed-top shadow-sm border-bottom theme-border">
+        <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
@@ -82,82 +84,86 @@ export function LayoutWrapper({ children }: { children: ReactNode }) {
              <span className="fw-bold">CatLink</span>
            </Link>
            
-            <button
-              className="navbar-toggler"
-              type="button"
-              data-bs-toggle="collapse"
-              data-bs-target="#navcol-1"
-              title={t('common.menu')}
-            >
-              <span className="navbar-toggler-icon"></span>
-            </button>
-            
-            <div className="collapse navbar-collapse" id="navcol-1">
+            {/* Убираем navbar-toggler и делаем всё всегда видимым */}
+            <div className="d-flex justify-content-between align-items-center flex-grow-1">
              {/* Левое меню */}
-              <ul className="navbar-nav me-auto">
+              <ul className="navbar-nav d-flex flex-row me-auto">
                {user && (
-                  <li className="nav-item">
-                    <Link href="/dashboard" className="nav-link">
-                      <i className="fas fa-tachometer-alt me-1"></i>
-                      {t('dashboard.title')}
-                    </Link>
-                  </li>
+                  <>
+                    <li className="nav-item me-3">
+                      <Link href="/dashboard" className="nav-link">
+                        <i className="bi bi-speedometer2 me-1"></i>
+                        {t('dashboard.title')}
+                      </Link>
+                    </li>
+                    <li className="nav-item me-3">
+                      <Link href="/profile" className="nav-link">
+                        <i className="bi bi-person-gear me-1"></i>
+                        {t('common.profile')}
+                      </Link>
+                    </li>
+                  </>
                )}
              </ul>

              {/* Правое меню */}
              <div className="d-flex align-items-center gap-2">
-                {/* Переключатели темы и языка всегда видны */}
+                {/* Компоненты контекстов */}
                <ThemeToggle />
                <LanguageSelector />
                
-                {!user ? (
+                {isLoading ? (
+                  <div className="spinner-border spinner-border-sm ms-2" role="status">
+                    <span className="visually-hidden">{t('common.loading')}</span>
+                  </div>
+                ) : !user ? (
                  <div className="d-flex gap-2 ms-2">
                    <Link href="/auth/login" className="btn btn-outline-primary btn-sm">
-                      <i className="fas fa-sign-in-alt me-1"></i>
+                      <i className="bi bi-box-arrow-in-right me-1"></i>
                      <span className="d-none d-sm-inline">{t('common.login')}</span>
                    </Link>
                    <Link href="/auth/register" className="btn btn-primary btn-sm">
-                      <i className="fas fa-user-plus me-1"></i>
+                      <i className="bi bi-person-plus me-1"></i>
                      <span className="d-none d-sm-inline">{t('common.register')}</span>
                    </Link>
                  </div>
                ) : (
                  <div className="dropdown ms-2">
                    <button
-                      className="btn btn-link text-decoration-none d-flex align-items-center dropdown-toggle"
+                      className="btn btn-outline-secondary dropdown-toggle d-flex align-items-center"
                      type="button"
                      data-bs-toggle="dropdown"
-                      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.avatar ? (
+                        <Image
+                          src={
+                            user.avatar.startsWith('http')
+                              ? user.avatar
+                              : `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">
                      <li>
-                        <Link href="/profile" className="dropdown-item">
-                          <i className="fas fa-user me-2"></i>
-                          {t('profile.edit')}
+                        <Link href="/dashboard" className="dropdown-item">
+                          <i className="bi bi-speedometer2 me-2"></i>
+                          {t('dashboard.title')}
                        </Link>
                      </li>
                      <li>
-                        <Link href="/dashboard" className="dropdown-item">
-                          <i className="fas fa-tachometer-alt me-2"></i>
-                          {t('dashboard.title')}
+                        <Link href="/profile" className="dropdown-item">
+                          <i className="bi bi-person-gear me-2"></i>
+                          {t('common.profile')}
                        </Link>
                      </li>
                      <li><hr className="dropdown-divider" /></li>
@@ -166,7 +172,7 @@ export function LayoutWrapper({ children }: { children: ReactNode }) {
                          onClick={handleLogout}
                          className="dropdown-item text-danger"
                        >
-                          <i className="fas fa-sign-out-alt me-2"></i>
+                          <i className="bi bi-box-arrow-right me-2"></i>
                          {t('common.logout')}
                        </button>
                      </li>
@@ -179,42 +185,27 @@ export function LayoutWrapper({ children }: { children: ReactNode }) {
        </nav>
      )}

-      {/* отступ, чтобы контент не прятался под фиксированным хедером */}
-      {!isPublicUserPage && <div className="navbar-spacing" />}
+      {!isPublicUserPage && <div style={{ height: '76px' }} />}

      {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"><Link href="#">{t('footer.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>
+                  <li className="list-inline-item"><Link href="#">{t('footer.contact')}</Link></li>
                </ul>
+                <p className="text-muted small mb-0">{t('footer.copyright')}</p>
              </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"