feat: Sidebar optional mods section

This commit is contained in:
LynithDev 2024-06-13 20:05:52 +02:00
parent 576c8f0d22
commit 88709c6218
2 changed files with 29 additions and 16 deletions

View file

@ -8,7 +8,7 @@ type SidebarProps = ParentProps & {
};
base: string;
links: {
[key: string]: [JSX.Element, string, string][];
[key: string]: ([JSX.Element, string, string] | undefined)[];
};
};
@ -44,19 +44,24 @@ function Sidebar(props: SidebarProps) {
<h3 class="text-fg-secondary text-xs font-medium m-1.5 mt-5">{section.toUpperCase()}</h3>
<div class="flex flex-col gap-y-1 fill-fg-primary text-fg-primary font-medium">
<For each={props.links[section]}>
{link => (
<a
onClick={() => goto(link[2])}
class={
`px-3 py-1 rounded-md text-md hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2]) ? 'bg-gray-05' : ''}`
}
>
<span class="flex flex-row items-center gap-x-3 *:w-5">
{link[0]}
{link[1]}
</span>
</a>
)}
{(link) => {
if (!link)
return;
return (
<a
onClick={() => goto(link[2])}
class={
`px-3 py-1 rounded-md text-md hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2]) ? 'bg-gray-05' : ''}`
}
>
<span class="flex flex-row items-center gap-x-3 *:w-5">
{link[0]}
{link[1]}
</span>
</a>
);
}}
</For>
</div>
</div>

View file

@ -8,6 +8,7 @@ import ClusterOverview from './cluster/ClusterOverview';
import ClusterLogs from './cluster/ClusterLogs';
import ClusterMods from './cluster/ClusterMods';
import ClusterScreenshots from './cluster/ClusterScreenshots';
import useCluster from '~ui/hooks/useCluster';
function ClusterRoutes() {
return (
@ -22,18 +23,25 @@ function ClusterRoutes() {
function ClusterRoot(props: ParentProps) {
const [searchParams] = useSearchParams();
const cluster = useCluster(searchParams.id);
if (!cluster) {
location.href = '/';
return;
}
return (
<div class="flex flex-row flex-1 h-full gap-x-7">
<div class="mt-8">
<Sidebar
base="/clusters"
state={{ id: searchParams.id }}
state={{ id: cluster()!.uuid }}
links={{
Cluster: [
[<EyeIcon />, 'Overview', '/'],
// [<User01Icon />, 'Accounts', '/users'],
[<PackagePlusIcon />, 'Mods', '/mods'],
// TODO: Better way of checking mods
(cluster()?.meta.loader !== 'vanilla' ? [<PackagePlusIcon />, 'Mods', '/mods'] : undefined),
[<Image03Icon />, 'Screenshots', '/screenshots'],
[<Globe04Icon />, 'Worlds', '/worlds'],
[<File06Icon />, 'Logs', '/logs'],