Despite initializing my state to false, the problem arises when I open and close my menu. The state never actually becomes false, causing the closing animation of the NavBar to not run as expected.
The component:
import CloseButton from "./CloseButton"
import { useEffect, useState } from "react"
export const NavBar = ({ state, setStateFunction }: { state: boolean, setStateFunction: (value: boolean) => void }) => {
useEffect(() => {
console.log(state);
}, [state]);
return (
<div className={`w-[370px] bg-black fixed top-0 left-0 z-40 h-screen transform transition-transform duration-1000 ${state === false ? 'animate-translateX0' : 'animate-translateX'}`}>
<button className="absolute top-5 right-5 font-bold text-2xl" onClick={() => {setStateFunction(false)}}><CloseButton /></button>
<div className="ml-6 mt-20">
<nav className="">
<ul className="">
<li className="mb-5 hover:translate-x-3 tracking-wider"><a className="hover:text-gray-200 hover:translate-x-3 transition transform" href="">HOME</a></li>
<li className="mb-5 tracking-wider"><a href="">CLOTHES</a></li>
<li className="mb-5 tracking-wider"><a href="">ELECTRONICS</a></li>
<li className="mb-5 tracking-wider"><a href="">FURNITURE</a></li>
<li className="mb-5 tracking-wider"><a href="">SHOES</a></li>
<li className="mb-5 tracking-wider"><a href="">MISCELLANEOUS</a></li>
<li className="mb-5 tracking-wider"><a href="">OFFERS</a></li>
<li className="tracking-wider"><a href="">SALE</a></li>
</ul>
</nav>
</div>
<span className="ms-madi-regular tracking-wider text-2xl -rotate-12 absolute bottom-24 left-32">WebWish</span>
</div>
)
}
export function Header() {
const [asideBar, setAsideBar] = useState(false)
return (
<header
className="fixed top-0 left-0 right-0 w-screen h-20 p-7 z-20 bg-black overflow-hidden"
>
<nav className="flex flex-row justify-between items-center text-customGray pr-4">
<div>
<button onClick={() =>
setAsideBar(true)
} className="mr-4">
{/* <MenuIcon /> */}
</button>
{asideBar === true && <NavBar state={asideBar} setStateFunction={setAsideBar} />}
<button>
{/* <SearchIcon /> */}
</button>
</div>
<span className="ms-madi-regular tracking-wider text-2xl -rotate-12">WebWish</span>
<div>
<button className="mr-3">
<a href="/auth/login">
{/* <LoginIcon /> */}
</a>
</button>
<button>
{/* <ShopIcon /> */}
</button>
</div>
</nav>
</header>
)
}
My index.tsx:
import { Inter } from "next/font/google";
import { NavBar } from "./components/NavBar";
import { useState } from "react";
const inter = Inter({ subsets: ["latin"] });
export default function Home() {
const [asideBar, setAsideBar] = useState(false);
return (
<main
className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
>
<button onClick={() => setAsideBar(true)} className="mr-4">
Open the sidebar
</button>
<button onClick={() => setAsideBar(false)} className="mr-4">
close sidebar
</button>
{asideBar && <NavBar state={asideBar} setStateFunction={setAsideBar} />}
</main>
);
}
I have attempted to change the state in various ways, including using toggle. However, the state does not update as expected. It's unclear whether the condition in the component is incorrect or if there is another issue at play.