hamedandClaude Opus 4.8
83b2ec21b7
The header decided between profile and login button only from the server-passed logged prop (read once via cookies() in StLayout), so a user who logged in client-side still saw ورود | ثبت نام until a hard reload. Seed isLogged from the server prop (correct first paint, no hydration mismatch) then sync it from the access_token cookie on mount and on every route change, so login/logout reflect immediately. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
"use client";
|
|
|
|
import { Button } from "@mui/material";
|
|
import Logo from "@/app/component/Logo";
|
|
import Link from "next/link";
|
|
import Row from "./list/Row";
|
|
import Col from "./list/col";
|
|
import ButtonMenu from "./list/col/ButtonMenu";
|
|
import BgGray from "./list/col/BgGray";
|
|
import { useEffect, useState } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import Cookies from "js-cookie";
|
|
import ProfileUser from "./profile";
|
|
|
|
function Content({ matchedCity, name, logged }) {
|
|
const [isActive, setIsActive] = useState(false);
|
|
const [isLogged, setIsLogged] = useState(Boolean(logged));
|
|
const pathname = usePathname();
|
|
|
|
useEffect(() => {
|
|
setIsLogged(Boolean(Cookies.get("access_token")));
|
|
}, [pathname]);
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
px-[8px] sm:px-[16px] md:px-[24px] lg:px-[32px] py-[4px] sm:py-[8px] md:py-[12px] lg:py-[16px]
|
|
flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap
|
|
${isActive ? "!pr-0" : "!px-4"}
|
|
`}
|
|
>
|
|
<div>
|
|
<BgGray isActive={isActive} setIsActive={setIsActive} />
|
|
<Col name={name} isActive={isActive} />
|
|
<div className="relative flex flex-row-reverse gap-2">
|
|
<Logo matchedCity={matchedCity} />
|
|
<div className="flex lg:hidden z-20">
|
|
<ButtonMenu isActive={isActive} setIsActive={setIsActive} />
|
|
<Logo isAbsolute={true} matchedCity={matchedCity} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Row name={name} />
|
|
{isLogged ? (
|
|
<ProfileUser />
|
|
) : (
|
|
<Link href="/login">
|
|
<Button variant="outlined" color="primary">
|
|
ورود | ثبت نام
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Content;
|