"use client"; import useSession from "@/app/[language]/query/useSession"; import vcs from "@/assets/vcs.png"; import AvatarDrawing from "@/components/AvatarDrawing"; import AvatarView from "@/components/AvatarView"; import withQueryClient from "@/hoc/withQueryClient"; import { useTaehuiStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import Image from "next/image"; import Link from "next/link"; import { ReactNode } from "react"; import Container from "react-bootstrap/Container"; import Nav from "react-bootstrap/Nav"; import Navbar from "react-bootstrap/Navbar"; import NavbarBrand from "react-bootstrap/NavbarBrand"; import NavbarCollapse from "react-bootstrap/NavbarCollapse"; import NavbarToggle from "react-bootstrap/NavbarToggle"; import NavDropdown from "react-bootstrap/NavDropdown"; import NavLink from "react-bootstrap/NavLink"; import { ToastContainer } from "react-toastify"; import { useIsPath } from "taehui-lib/fe-utilities"; export default withQueryClient( observer(({ children }: { children: ReactNode }) => { const { taehuiAvatarID } = useTaehuiStore(); const t = useTranslations(); const isSessionLoading = useSession(); const isPath = useIsPath(); return ( <> <Navbar bg="dark" sticky="top" collapseOnSelect expand="lg"> <Container> <NavbarBrand as={Link} href="/"> <Image alt="" width={24} height={24} src="/favicon.ico" priority /> </NavbarBrand> <NavbarToggle aria-controls="collapsable" /> <NavbarCollapse id="collapsable"> <Nav> <NavLink as={Link} href="/forums" active={isPath("/forums", true)} > {t("forums")} </NavLink> <NavLink as={Link} href="/forums/qwilight" active={isPath("/forums/qwilight")} > {t("forumQwilight")} </NavLink> <NavLink as={Link} href="/forum/software" active={isPath("/forum/software")} > {t("forumSoftware")} </NavLink> <NavLink as={Link} href="/forum/assist" active={isPath("/forum/assist")} > {t("forumAssist")} </NavLink> <NavLink as={Link} href="/forum/date" active={isPath("/forum/date")} > {t("forumDate")} </NavLink> <NavLink as={Link} href="/ppt" active={isPath("/ppt")}> {t("ppt")} </NavLink> <NavLink as={Link} href="/commentary" active={isPath("/commentary")} > {t("commentary")} </NavLink> <NavLink href="/qwilight">Qwilight</NavLink> <NavLink href="/vcs"> <Image alt="" src={vcs} height={12} /> </NavLink> <NavDropdown title={ <AvatarDrawing avatarID={taehuiAvatarID} drawingLength={24} drawingHeight={24} /> } > <Container> <AvatarView isSessionLoading={isSessionLoading} /> </Container> </NavDropdown> </Nav> </NavbarCollapse> </Container> </Navbar> <Container className="p-4">{children}</Container> <ToastContainer hideProgressBar theme="dark" /> </> ); }), );