82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
// Path: Frontend/src/components/shell/LeftRail/LeftRail.tsx
|
|
|
|
import { For, Show, type JSX } from "solid-js";
|
|
import { railItems, type RailItem } from "../data/shell.data";
|
|
import styles from "./LeftRail.module.scss";
|
|
|
|
type RailEntryProps = {
|
|
item: RailItem;
|
|
label: string;
|
|
abbreviation: string;
|
|
personal?: boolean;
|
|
};
|
|
|
|
const RailEntry = (props: RailEntryProps): JSX.Element => {
|
|
return (
|
|
<div
|
|
classList={{
|
|
[styles.itemSlot]: true,
|
|
[styles.itemSlotActive]: !!props.item.active,
|
|
}}
|
|
>
|
|
<span class={styles.activeIndicator} aria-hidden="true" />
|
|
|
|
<button
|
|
type="button"
|
|
classList={{
|
|
[styles.workspaceButton]: true,
|
|
[styles.workspaceButtonActive]: !!props.item.active,
|
|
[styles.personalButton]: !!props.personal,
|
|
}}
|
|
aria-label={props.label}
|
|
title={props.label}
|
|
>
|
|
{props.abbreviation}
|
|
</button>
|
|
|
|
<span class={styles.hoverLabel} role="presentation">
|
|
{props.label}
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
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
|
|
classList={{
|
|
[styles.rail]: true,
|
|
[styles.railCollapsed]: props.collapsed,
|
|
}}
|
|
aria-label="Server rail"
|
|
>
|
|
<div class={styles.topCluster}>
|
|
<Show when={!props.collapsed && personalItem}>
|
|
{(item): JSX.Element => (
|
|
<RailEntry item={item()} label={item().label} abbreviation={item().abbreviation} personal />
|
|
)}
|
|
</Show>
|
|
|
|
<Show when={!props.collapsed}>
|
|
<div class={styles.sectionDivider} aria-hidden="true" />
|
|
</Show>
|
|
</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>
|
|
</aside>
|
|
);
|
|
};
|