Moku/Work
1
0
Fork 0
Code Issues Pull Requests Activity

Feat: Add collapsible shell

Browse Source
This commit is contained in:
MangoPig
2026-06-17 05:37:29 +01:00
parent 630b3778db
commit 7fdc5f2d22
15 changed files with 478 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
Frontend/src/components/shell/LeftRail/LeftRail.tsx
View File

@@ -1,6 +1,6 @@
// Path: Frontend/src/components/shell/LeftRail/LeftRail.tsx
import { For, type JSX } from "solid-js";
import { For, Show, type JSX } from "solid-js";
import { Plus } from "../../../lib/icons";
import { railItems, type RailItem } from "../data/shell.data";
import styles from "./LeftRail.module.scss";
@@ -42,29 +42,49 @@ const RailEntry = (props: RailEntryProps): JSX.Element => {
);
};
export const LeftRail = (): JSX.Element => {
type LeftRailProps = {
collapsed: boolean;
};
export const LeftRail = (props: LeftRailProps): JSX.Element => {
const personalItem = railItems.find((item) => item.kind === "personal");
const organizationItems = railItems.filter((item) => item.kind === "organization");
return (
<aside class={styles.rail} aria-label="Server rail">
<aside
classList={{
[styles.rail]: true,
[styles.railCollapsed]: props.collapsed,
}}
aria-label="Server rail"
>
<div class={styles.topCluster}>
{personalItem ? <RailEntry item={personalItem} label={personalItem.label} abbreviation="M" personal /> : null}
<Show when={!props.collapsed && personalItem}>
{(item): JSX.Element => (
<RailEntry item={item()} label={item().label} abbreviation={item().abbreviation} personal />
)}
</Show>
<div class={styles.sectionDivider} aria-hidden="true" />
<Show when={!props.collapsed}>
<div class={styles.sectionDivider} aria-hidden="true" />
</Show>
</div>
<div class={styles.items}>
<For each={organizationItems}>
{(item): JSX.Element => <RailEntry item={item} label={item.label} abbreviation={item.abbreviation} />}
</For>
</div>
<Show when={!props.collapsed}>
<div class={styles.items}>
<For each={organizationItems}>
{(item): JSX.Element => <RailEntry item={item} label={item.label} abbreviation={item.abbreviation} />}
</For>
</div>
</Show>
<div class={styles.bottomCluster}>
<button type="button" class={styles.addButton} aria-label="Create server" title="Create server">
<Plus size={16} strokeWidth={2} />
</button>
</div>
<Show when={!props.collapsed}>
<div class={styles.bottomCluster}>
<button type="button" class={styles.addButton} aria-label="Create server" title="Create server">
<Plus size={16} strokeWidth={2} />
</button>
</div>
</Show>
</aside>
);
};