"use client"; import useWSAPI from "@/app/[language]/site/lib/useWSAPI"; import platform from "@/assets/discord-logo-white.png"; import AvatarView from "@/components/AvatarView"; import withQueryClient from "@/hoc/withQueryClient"; import { useSiteStore } from "@/state/Stores"; import { getDefaultAvatarID } from "@/utilities/Utility"; import { wwwAPIPath } from "@/utilities/wwwAPI"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import Image from "next/image"; import Link from "next/link"; import { ReactNode, useLayoutEffect, useRef } 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 t = useTranslations(); const titleView = useRef<HTMLDivElement>(null); const { setTitleView: setTitleView, siteAvatarID } = useSiteStore(); useWSAPI(); const isPath = useIsPath(); useLayoutEffect(() => { setTitleView(titleView); }, [setTitleView]); return ( <> <Navbar bg="dark" sticky="top" collapseOnSelect expand="md" ref={titleView} > <Container> <NavbarBrand href="/"> <Image alt="" width={24} height={24} src="/qwilight/favicon.ico" priority /> </NavbarBrand> <NavbarToggle aria-controls="collapsable" /> <NavbarCollapse id="collapsable"> <Nav> <NavLink as={Link} href="/note" active={isPath("/note")}> {t("note")} </NavLink> <NavLink as={Link} href="/site" active={isPath("/site")}> {t("site")} </NavLink> <NavLink as={Link} href="/avatar" active={isPath("/avatar")}> {t("avatar")} </NavLink> <NavLink as={Link} href="/hall" active={isPath("/hall")}> {t("hall")} </NavLink> <NavLink as={Link} href="/etc" active={isPath("/etc")}> {t("etc")} </NavLink> <NavLink href="/qwilight/platform"> <Image alt="" height={12} src={platform} /> </NavLink> <NavDropdown title={ <Image alt="" src={`${wwwAPIPath}/drawing?avatarID=${getDefaultAvatarID( siteAvatarID, )}&drawingVariety=0`} className="rounded border" width={24} height={24} /> } > <Container> <AvatarView /> </Container> </NavDropdown> </Nav> </NavbarCollapse> </Container> </Navbar> <Container className="p-4">{children}</Container> <ToastContainer theme="dark" hideProgressBar /> </> ); }), );