how to keep state of sidebar same in every page in next.js?

I want to keep the same state of the sidebar when i navigate between pages , how do i achive that ?

code in _app.js

    function MyApp({ Component, pageProps }) {
  const open = useState(false);
  const [jsonData, setJsonData] = useState({});

  const headerVisibility = useState("");

  return (
    <>
      <HeaderContext.Provider value={headerVisibility}>
        <NavigationBar open={open} />
        <Content open={open}>
          <Component {...pageProps} />
        </Content>
      </HeaderContext.Provider>
    </>
  );
}
// console.clear();
export default MyApp;

this is how i am fetching data in navigation/sidebar

  useEffect(async () => {
    const rawData = await fetch("http://localhost:8000/data");
    const jsonData = await abc.json();

    setData((prevState) => jsonData);
    setnavData((prevState) => jsonData);

  
  }, []);