client,server folders

client/src/components/header/Header/DesktopHeader.tsx

@@ -0,0 +1,17 @@
+import Auth from "../Auth/Auth";
+import Logo from "../../Logo";
+import Navbar from "../Navbar/Navbar";
+import Location from "../Location";
+
+const DesktopHeader = () => (
+  <header className="bg-white w-full text-white sm:grid grid-cols-6 fixed left-0 top-0 z-[99999900] font-usual text-m">
+    <div className="flex gap-4 col-span-2">
+      <Logo />
+      <Location />
+    </div>
+    <Navbar />
+    <Auth isAuth={false} />
+  </header>
+);
+
+export default DesktopHeader;

client/src/components/header/Header/Layout.tsx

@@ -0,0 +1,30 @@
+import { Outlet } from "react-router-dom";
+import { isMobile } from "react-device-detect";
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
+import { useEffect } from "react";
+import useModal from "../../../store/useModal";
+import DesktopHeader from "./DesktopHeader";
+import MobileHeader from "./MobileHeader";
+import useFullScreen from "../../../store/useFullScreen";
+
+const Layout = () => {
+  const { modal } = useModal();
+  const { setOnFullscreen } = useFullScreen();
+  const onFullscreenHandle = useFullScreenHandle();
+
+  useEffect(() => {
+    setOnFullscreen(onFullscreenHandle);
+  }, []);
+
+  return (
+    <>
+      <FullScreen handle={onFullscreenHandle}>
+        {isMobile ? <MobileHeader /> : <DesktopHeader />}
+        {modal}
+        <Outlet />
+      </FullScreen>
+    </>
+  );
+};
+
+export default Layout;

client/src/components/header/Header/MobileHeader.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import LogoIcon from "../../icons/LogoIcon";
+import Auth from "../Auth/Auth";
+import Navbar from "../Navbar/Navbar";
+import Location from "../Location";
+import BurgerMenuIcon from "../../icons/BurgerMenuIcon";
+
+const MobileHeader = () => {
+  const [isToggled, setIsToggled] = useState(false);
+  const isAuth = false;
+
+  const handleOnToggleClick = () => {
+    setIsToggled((prev) => !prev);
+  };
+  return (
+    <header
+      className={`bg-white w-full ${
+        isToggled
+          ? "rounded-ee-lg rounded-es-lg shadow-[#00000026] shadow-md"
+          : ""
+      } text-white flex flex-col text-sm items-center transition-all duration-500 ease-in-out absolute top-0 left-0 z-[99999900] overflow-hidden font-usual ${
+        isToggled ? "max-h-[472px]" : "max-h-14"
+      }`}
+    >
+      <div className="flex justify-between w-full p-4">
+        <div className={`text-[#0D1922] transition-opacity duration-500`}>
+          <LogoIcon />
+        </div>
+        <div className="w-6 h-6 text-[#0D1922]" onClick={handleOnToggleClick}>
+          <BurgerMenuIcon isToggled={isToggled} />
+        </div>
+      </div>
+      <div className="flex flex-col justify-between h-full items-end w-full p-4 bg-[#F3F3F2]">
+        {isAuth && (
+          <div className="pb-2 w-full">
+            <Auth isAuth={isAuth} />
+          </div>
+        )}
+        <Navbar />
+        <div className="py-3">
+          <Location />
+        </div>
+        {!isAuth && <Auth isAuth={isAuth} />}
+      </div>
+    </header>
+  );
+};
+
+export default MobileHeader;