'use client'; import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import Link from 'next/link'; import { IRootState } from '@/store'; import { toggleTheme, toggleSidebar, toggleRTL } from '@/store/themeConfigSlice'; import Image from 'next/image'; import Dropdown from '@/components/dropdown'; import IconMenu from '@/components/icon/icon-menu'; import IconSun from '@/components/icon/icon-sun'; import IconMoon from '@/components/icon/icon-moon'; import IconUser from '@/components/icon/icon-user'; import IconMail from '@/components/icon/icon-mail'; import IconLockDots from '@/components/icon/icon-lock-dots'; import IconLogout from '@/components/icon/icon-logout'; import { usePathname, useRouter } from 'next/navigation'; type UserData = { id: string; email: string; createdAt: string }; export default function Header() { const pathname = usePathname(); const dispatch = useDispatch(); const router = useRouter(); const themeConfig = useSelector((state: IRootState) => state.themeConfig); const isRtl = themeConfig.rtlClass === 'rtl'; const [user, setUser] = useState(null); const [loadingUser, setLoadingUser] = useState(true); // Highlight active menu (your original effect) useEffect(() => { const selector = document.querySelector( 'ul.horizontal-menu a[href="' + window.location.pathname + '"]' ); if (selector) { document .querySelectorAll('ul.horizontal-menu .nav-link.active') .forEach((el) => el.classList.remove('active')); document .querySelectorAll('ul.horizontal-menu a.active') .forEach((el) => el.classList.remove('active')); selector.classList.add('active'); const ul: any = selector.closest('ul.sub-menu'); if (ul) { const ele: any = ul.closest('li.menu')?.querySelector('.nav-link'); setTimeout(() => ele?.classList.add('active')); } } }, [pathname]); async function loadUser() { try { const res = await fetch('/api/auth/me', { method: 'GET', credentials: 'include', // send cookie cache: 'no-store', // avoid stale cached responses }); if (!res.ok) throw new Error(); const data = await res.json(); setUser(data.user); } catch { setUser(null); } finally { setLoadingUser(false); } } useEffect(() => { setLoadingUser(true); loadUser(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [pathname]); // re-fetch on route change (after login redirect) const handleLogout = async () => { await fetch('/api/auth/logout', { method: 'POST' }); setUser(null); router.push('/login'); // go to login }; return (
{/* Logo */}
logo
{/* Right-side actions */}
{/* Theme toggle */} {themeConfig.theme === 'light' ? ( ) : ( )} {/* User dropdown */}
{loadingUser ? (
) : user ? (
} >
    {/* make sure this stays transparent */}
  • {user.email}

  • Profile
  • Lock Screen
) : ( Sign In )}
); }