feat: Sidebar optional mods section
This commit is contained in:
parent
576c8f0d22
commit
88709c6218
2 changed files with 29 additions and 16 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue