30 lines
749 B
TypeScript
30 lines
749 B
TypeScript
|
import * as React from "bloatless-react";
|
||
|
|
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
|
||
|
|
|
||
|
|
export function NavigationButton<T>(
|
||
|
|
coreViewModel: CoreViewModel,
|
||
|
|
label: string,
|
||
|
|
navigationState: React.State<T | undefined>,
|
||
|
|
page: T,
|
||
|
|
arrowMobileOnly?: boolean,
|
||
|
|
) {
|
||
|
|
const isSelected = React.createProxyState(
|
||
|
|
[navigationState],
|
||
|
|
() => navigationState.value == page,
|
||
|
|
);
|
||
|
|
|
||
|
|
function open() {
|
||
|
|
navigationState.value = page;
|
||
|
|
}
|
||
|
|
|
||
|
|
const iconClass = `icon ${arrowMobileOnly == true ? "mobile-only" : ""}`;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button toggle:selected={isSelected} on:click={open}>
|
||
|
|
{label}
|
||
|
|
|
||
|
|
<span class={iconClass}>arrow_forward</span>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|