import { FooterLogo } from "@/components/shared/Logo"; import { MobileNavigation } from "@/components/shared/MobileNavigation"; import { Navigation } from "@/components/shared/Navigation"; import { Prose } from "@/components/shared/Prose"; import { Search } from "@/components/shared/Search"; import { ThemeSelector } from "@/components/shared/ThemeSelector"; import navigation from "@/lib/docsNavigation"; import { Button } from "@formbricks/ui"; import clsx from "clsx"; import Link from "next/link"; import { useRouter } from "next/router"; import { useEffect, useRef, useState } from "react"; import MetaInformation from "../shared/MetaInformation"; import DocsFeedback from "./DocsFeedback"; function GitHubIcon(props: any) { return ( ); } function Header({ navigation }: any) { let [isScrolled, setIsScrolled] = useState(false); useEffect(() => { function onScroll() { setIsScrolled(window.scrollY > 0); } onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => { window.removeEventListener("scroll", onScroll); }; }, []); return (
); } interface LayoutProps { children: React.ReactNode; meta: { title: string; description?: string; }; } export const Layout: React.FC = ({ children, meta }) => { let router = useRouter(); let allLinks = navigation.flatMap((section) => section.links); let linkIndex = allLinks.findIndex((link) => link.href === router.pathname); let previousPage = allLinks[linkIndex - 1]; let nextPage = allLinks[linkIndex + 1]; let section = navigation.find((section) => section.links.find((link) => link.href === router.pathname)); const linkRef = useRef(null); const parentRef = useRef(null); const preserveScroll = () => { const scroll = Math.abs(linkRef.current.getBoundingClientRect().top - linkRef.current.offsetTop); sessionStorage.setItem("scrollPosition", (scroll + 89).toString()); }; const useExternalLinks = (selector: string) => { useEffect(() => { const links = document.querySelectorAll(selector); links.forEach((link) => { link.setAttribute("target", "_blank"); link.setAttribute("rel", "noopener noreferrer"); }); return () => { links.forEach((link) => { link.removeAttribute("target"); link.removeAttribute("rel"); }); }; }, [selector]); }; useExternalLinks(".prose a"); useEffect(() => { if (parentRef.current) { const scrollPosition = Number.parseInt(sessionStorage.getItem("scrollPosition"), 10); if (scrollPosition) { parentRef.current.scrollTop = scrollPosition; } } }, []); return ( <>
{(meta.title || section) && (
{section && (

{section.title}

)} {meta.title && (

{meta.title}

)}
)} {children}
{previousPage && (
Previous
{previousPage.title}
)} {nextPage && (
Next
{nextPage.title}
)}

Need help? 🤓

Join our Discord and ask away. We're happy to help where we can!

); };