50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
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;
|