Добавлена логика управления отображением сайдбара в компоненте AppShell
- Реализован хук useEffect для отслеживания состояния монтирования компонента - Оптимизировано условие скрытия сайдбара в зависимости от маршрута, состояния загрузки и аутентификации пользователя - Устранен гидратационный рассинхрон при первом рендере
This commit is contained in:
@ -1,13 +1,25 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { usePathname } from 'next/navigation'
|
import { usePathname } from 'next/navigation'
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
import { Sidebar } from '@/components/dashboard/sidebar'
|
import { Sidebar } from '@/components/dashboard/sidebar'
|
||||||
|
import { useAuth } from '@/hooks/useAuth'
|
||||||
|
|
||||||
export function AppShell({ children }: { children: React.ReactNode }) {
|
export function AppShell({ children }: { children: React.ReactNode }) {
|
||||||
const pathname = usePathname()
|
const pathname = usePathname()
|
||||||
|
const { isAuthenticated, isLoading } = useAuth()
|
||||||
|
const [mounted, setMounted] = useState(false)
|
||||||
|
|
||||||
const hideSidebar = pathname === '/login' || pathname === '/register'
|
useEffect(() => {
|
||||||
|
setMounted(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const hideByRoute =
|
||||||
|
pathname === '/' || pathname?.startsWith('/login') || pathname?.startsWith('/register')
|
||||||
|
|
||||||
|
// До маунта всегда скрываем сайдбар, чтобы избежать гидратационного рассинхрона
|
||||||
|
const hideSidebar = !mounted || hideByRoute || isLoading || !isAuthenticated
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
Reference in New Issue
Block a user