280 lines
9.4 KiB
TypeScript
280 lines
9.4 KiB
TypeScript
import Link from "next/link";
|
|
import NavOption from "components/PanelComponents/NavOption";
|
|
import { useRouter } from "next/router";
|
|
import Button from "components/Button";
|
|
import HorizontalLine from "components/HorizontalLine";
|
|
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
|
|
import Markdown from "markdown-to-jsx";
|
|
import { useMediaDesktop } from "hooks/useMediaQuery";
|
|
import { useAppLayout } from "contexts/AppLayoutContext";
|
|
import ToolTip from "components/ToolTip";
|
|
|
|
type MainPanelProps = {
|
|
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
|
|
};
|
|
|
|
export default function MainPanel(props: MainPanelProps): JSX.Element {
|
|
const langui = props.langui;
|
|
const router = useRouter();
|
|
const isDesktop = useMediaDesktop();
|
|
const appLayout = useAppLayout();
|
|
|
|
return (
|
|
<div
|
|
className={`flex flex-col justify-center content-start gap-y-2 justify-items-center text-center p-8 ${
|
|
appLayout.mainPanelReduced && isDesktop && "px-4"
|
|
}`}
|
|
>
|
|
{/* Reduce/expand main menu */}
|
|
<div
|
|
className={`mobile:hidden top-1/2 fixed ${
|
|
appLayout.mainPanelReduced ? "left-[4.65rem]" : "left-[18.65rem]"
|
|
}`}
|
|
onClick={() =>
|
|
appLayout.setMainPanelReduced(!appLayout.mainPanelReduced)
|
|
}
|
|
>
|
|
<Button className="material-icons bg-light !px-2">
|
|
{appLayout.mainPanelReduced ? "chevron_right" : "chevron_left"}
|
|
</Button>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="grid place-items-center">
|
|
<Link href="/" passHref>
|
|
<div
|
|
onClick={() => appLayout.setMainPanelOpen(false)}
|
|
className={`${
|
|
appLayout.mainPanelReduced && isDesktop ? "w-12" : "w-1/2"
|
|
} aspect-square cursor-pointer transition-colors [mask:url('/icons/accords.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black hover:bg-dark mb-4`}
|
|
></div>
|
|
</Link>
|
|
|
|
{appLayout.mainPanelReduced && isDesktop ? (
|
|
""
|
|
) : (
|
|
<h2 className="text-3xl">Accord’s Library</h2>
|
|
)}
|
|
|
|
<div
|
|
className={`flex ${
|
|
appLayout.mainPanelReduced && isDesktop
|
|
? "flex-col gap-3"
|
|
: "flex-row"
|
|
} flex-wrap gap-2`}
|
|
>
|
|
<ToolTip
|
|
content={<h3 className="text-2xl">{"Open settings"}</h3>}
|
|
placement="right"
|
|
className="text-left"
|
|
disabled={!appLayout.mainPanelReduced}
|
|
>
|
|
<Button
|
|
className={
|
|
appLayout.mainPanelReduced && isDesktop
|
|
? ""
|
|
: "!py-0.5 !px-2.5"
|
|
}
|
|
onClick={() => {
|
|
appLayout.setConfigPanelOpen(true);
|
|
}}
|
|
>
|
|
<span
|
|
className={`material-icons ${
|
|
!(appLayout.mainPanelReduced && isDesktop) && "!text-sm"
|
|
} `}
|
|
>
|
|
settings
|
|
</span>
|
|
</Button>
|
|
</ToolTip>
|
|
|
|
{router.locale && (
|
|
<ToolTip
|
|
content={<h3 className="text-2xl">{"Change language"}</h3>}
|
|
placement="right"
|
|
className="text-left"
|
|
disabled={!appLayout.mainPanelReduced}
|
|
>
|
|
<Button
|
|
onClick={() => appLayout.setLanguagePanelOpen(true)}
|
|
className={
|
|
appLayout.mainPanelReduced && isDesktop
|
|
? ""
|
|
: "!py-0.5 !px-2.5 !text-sm"
|
|
}
|
|
>
|
|
{router.locale.toUpperCase()}
|
|
</Button>
|
|
</ToolTip>
|
|
)}
|
|
|
|
<ToolTip
|
|
content={<h3 className="text-2xl">{"Open search"}</h3>}
|
|
placement="right"
|
|
className="text-left"
|
|
disabled={!appLayout.mainPanelReduced}
|
|
>
|
|
<Button
|
|
className={
|
|
appLayout.mainPanelReduced && isDesktop
|
|
? ""
|
|
: "!py-0.5 !px-2.5"
|
|
}
|
|
>
|
|
<span
|
|
className={`material-icons ${
|
|
!(appLayout.mainPanelReduced && isDesktop) && "!text-sm"
|
|
} `}
|
|
>
|
|
search
|
|
</span>
|
|
</Button>
|
|
</ToolTip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<HorizontalLine />
|
|
|
|
<NavOption
|
|
url="/library"
|
|
icon="library_books"
|
|
title={langui.library}
|
|
subtitle={langui.library_short_description}
|
|
reduced={appLayout.mainPanelReduced && isDesktop}
|
|
onClick={() => appLayout.setMainPanelOpen(false)}
|
|
/>
|
|
|
|
<NavOption
|
|
url="/contents"
|
|
icon="workspaces"
|
|
title={langui.contents}
|
|
subtitle={langui.contents_short_description}
|
|
reduced={appLayout.mainPanelReduced && isDesktop}
|
|
onClick={() => appLayout.setMainPanelOpen(false)}
|
|
/>
|
|
|
|
<NavOption
|
|
url="/wiki"
|
|
icon="travel_explore"
|
|
title={langui.wiki}
|
|
subtitle={langui.wiki_short_description}
|
|
reduced={appLayout.mainPanelReduced && isDesktop}
|
|
onClick={() => appLayout.setMainPanelOpen(false)}
|
|
/>
|
|
|
|
{/*
|
|
|
|
<NavOption
|
|
url="/chronicles"
|
|
icon="watch_later"
|
|
title={langui.chronicles}
|
|
subtitle={langui.chronicles_short_description}
|
|
|
|
reduced={appLayout.mainPanelReduced && isDesktop}
|
|
onClick={() => appLayout.setMainPanelOpen(false)}
|
|
/>
|
|
|
|
*/}
|
|
|
|
<HorizontalLine />
|
|
|
|
<NavOption
|
|
url="/news"
|
|
icon="feed"
|
|
title={langui.news}
|
|
reduced={appLayout.mainPanelReduced && isDesktop}
|
|
onClick={() => appLayout.setMainPanelOpen(false)}
|
|
/>
|
|
{/*
|
|
<NavOption
|
|
url="/merch"
|
|
icon="store"
|
|
title={langui.merch}
|
|
|
|
reduced={appLayout.mainPanelReduced && isDesktop}
|
|
onClick={() => appLayout.setMainPanelOpen(false)}
|
|
/>
|
|
|
|
*/}
|
|
|
|
<NavOption
|
|
url="/gallery"
|
|
icon="collections"
|
|
title={langui.gallery}
|
|
reduced={appLayout.mainPanelReduced && isDesktop}
|
|
onClick={() => appLayout.setMainPanelOpen(false)}
|
|
/>
|
|
|
|
{/*
|
|
|
|
<NavOption
|
|
url="/archives"
|
|
icon="inventory"
|
|
title={langui.archives}
|
|
|
|
reduced={appLayout.mainPanelReduced && isDesktop}
|
|
onClick={() => appLayout.setMainPanelOpen(false)}
|
|
/>
|
|
|
|
|
|
*/}
|
|
|
|
<NavOption
|
|
url="/about-us"
|
|
icon="info"
|
|
title={langui.about_us}
|
|
reduced={appLayout.mainPanelReduced && isDesktop}
|
|
onClick={() => appLayout.setMainPanelOpen(false)}
|
|
/>
|
|
|
|
{appLayout.mainPanelReduced && isDesktop ? "" : <HorizontalLine />}
|
|
|
|
<div
|
|
className={`text-center ${
|
|
appLayout.mainPanelReduced && isDesktop ? "hidden" : ""
|
|
}`}
|
|
>
|
|
<p>
|
|
{langui.licensing_notice && (
|
|
<Markdown>{langui.licensing_notice}</Markdown>
|
|
)}
|
|
</p>
|
|
<a
|
|
aria-label="Read more about the license we use for this website"
|
|
className="transition-[filter] colorize-black hover:colorize-dark"
|
|
href="https://creativecommons.org/licenses/by-sa/4.0/"
|
|
>
|
|
<div className="mt-4 mb-8 grid grid-flow-col place-content-center gap-1 hover:[--theme-color-black:var(--theme-color-dark)]">
|
|
<div className="w-6 aspect-square [mask:url('/icons/creative-commons-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" />
|
|
<div className="w-6 aspect-square [mask:url('/icons/creative-commons-by-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" />
|
|
<div className="w-6 aspect-square [mask:url('/icons/creative-commons-sa-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" />
|
|
</div>
|
|
</a>
|
|
<p>
|
|
{langui.copyright_notice && (
|
|
<Markdown>{langui.copyright_notice}</Markdown>
|
|
)}
|
|
</p>
|
|
<div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
|
|
<a
|
|
aria-label="Browse our GitHub repository, which include this website source code"
|
|
className="transition-colors [mask:url('/icons/github-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] w-10 aspect-square bg-black hover:bg-dark"
|
|
href="https://github.com/Accords-Library"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
></a>
|
|
<a
|
|
aria-label="Join our Discord server!"
|
|
className="transition-colors [mask:url('/icons/discord-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] w-10 aspect-square bg-black hover:bg-dark"
|
|
href="/discord"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|