handle limit page dashboard & change header profile user & get data from api in page clinics & clinic item and doctor item

components/layout/StLayout.js

@@ -1,16 +1,19 @@
 import { getStateInfo } from "@/lib/getStateInfo";
 import Footer from "./footer";
 import Header from "./header";
+import { cookies } from "next/headers";
 
 function StLayout({ children, name }) {
   const { matchedCity } = getStateInfo();
+  const cookieStore = cookies();
+  const token = cookieStore.get("access_token");
 
   return (
     <div>
       <main className="w-full min-h-screen">
         <header className="w-full sticky bg-[#FFF] !z-[70] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] mt-[12px] sm:mt-[21px] md:mt-[30px] lg:mt-[40px] top-0 right-1/2">
           <div className="w-full padding-responsive">
-            <Header matchedCity={matchedCity} name={name} />
+            <Header matchedCity={matchedCity} name={name} logged={token} />
           </div>
         </header>
         <section className="opacity-page -mt-[calc(48px_+_12px)] sm:-mt-[calc(56px_+_21px)] md:-mt-[calc(64px_+_30px)] lg:-mt-[calc(80px_+_40px)]">

components/layout/header/Content.js

@@ -10,7 +10,7 @@ import BgGray from "./list/col/BgGray";
 import UserLogin from "@/components/icons/UserLogin";
 import { useState } from "react";
 
-function Content({ matchedCity, name }) {
+function Content({ matchedCity, name, logged }) {
   const [isActive, setIsActive] = useState(false);
 
   return (
@@ -33,20 +33,23 @@ function Content({ matchedCity, name }) {
         </div>
       </div>
       <Row name={name} />
-      <Link href="/login">
-        <Button className="!hidden lg:!flex" variant="outlined" color="primary">
-          ورود | ثبت نام
-        </Button>
-        <Button
-          className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
-          variant="text"
-          color="primary"
-        >
-          <div className="flex lg:hidden">
+      {logged ? (
+        <Link href="/dashboard">
+          <Button
+            className={`!flex !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
+            variant="text"
+            color="primary"
+          >
             <UserLogin />
-          </div>
-        </Button>
-      </Link>
+          </Button>
+        </Link>
+      ) : (
+        <Link href="/login">
+          <Button variant="outlined" color="primary">
+            ورود | ثبت نام
+          </Button>
+        </Link>
+      )}
     </div>
   );
 }

components/layout/header/index.js

@@ -1,9 +1,9 @@
 import Content from "./Content";
 
-function Header({ matchedCity, name }) {
+function Header({ matchedCity, name, logged }) {
   return (
     <div className="bg-[#FFF] rounded-lg w-full mx-auto">
-      <Content matchedCity={matchedCity} name={name} />
+      <Content matchedCity={matchedCity} name={name} logged={logged} />
     </div>
   );
 }

components/layout/index.js

@@ -14,6 +14,7 @@ function Layout({
   user,
   value,
   setValue,
+  logged,
   matchedCity,
 }) {
   return (
@@ -24,7 +25,7 @@ function Layout({
       >
         <header className="w-full sticky bg-[#FFF] !z-[70] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] mt-[12px] sm:mt-[21px] md:mt-[30px] lg:mt-[40px] top-0 right-1/2">
           <div className="w-full padding-responsive">
-            <Header name={name} matchedCity={matchedCity} />
+            <Header name={name} matchedCity={matchedCity} logged={logged} />
           </div>
         </header>
         <section

components/layout/sidebar/ModalLogout.js

@@ -2,11 +2,13 @@ import { styleDefault } from "@/mui";
 import { Box, Button, Modal } from "@mui/material";
 import CloseModalD from "@/components/icons/CloseModalD";
 import { removeToken } from "@/utils";
+import { useRouter } from "next/navigation";
 
 function ModalLogout({ open, handleClose }) {
+  const router = useRouter();
   const logout = () => {
     removeToken();
-    window.location.pathname = "/login";
+    router.replace("/login");
     handleClose();
   };