almost change all layouts to ssr

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 }) {
+function Content({ matchedCity, name }) {
     const [isActive, setIsActive] = useState(false);
 
     return (
@@ -23,7 +23,7 @@ function Content({ matchedCity }) {
         >
             <div>
                 <BgGray isActive={isActive} setIsActive={setIsActive} />
-                <Col name={name} 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">

components/layout/header/index.js

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

components/layout/header/list/col/index.js

@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
 import Link from "next/link";
 import { isActiveURL } from "@/helper";
 
-function Col({ isActive, setIsActive, name }) {
+function Col({ isActive, name }) {
   return (
     <div className="flex lg:hidden">
       <div