tomodachi-share/src/app/provider.tsx

33 lines
919 B
TypeScript

"use client";
import { useEffect } from "react";
import { ProgressProvider } from "@bprogress/next/app";
export default function Providers({ children }: { children: React.ReactNode }) {
// Calculate header height
useEffect(() => {
const header = document.querySelector("header");
if (!header) return;
const updateHeaderHeight = () => {
document.documentElement.style.setProperty("--header-height", `${header.offsetHeight}px`);
};
const resizeObserver = new ResizeObserver(updateHeaderHeight);
resizeObserver.observe(header);
window.addEventListener("resize", updateHeaderHeight);
updateHeaderHeight();
return () => {
resizeObserver.disconnect();
window.removeEventListener("resize", updateHeaderHeight);
};
}, []);
return (
<ProgressProvider height="4px" color="var(--color-amber-500)" options={{ showSpinner: false }} shallowRouting>
{children}
</ProgressProvider>
);
}