diff options
Diffstat (limited to '')
| -rw-r--r-- | frontend/src/lib/toolbar/Toolbar.svelte | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/frontend/src/lib/toolbar/Toolbar.svelte b/frontend/src/lib/toolbar/Toolbar.svelte new file mode 100644 index 0000000..e87d731 --- /dev/null +++ b/frontend/src/lib/toolbar/Toolbar.svelte @@ -0,0 +1,42 @@ +<script lang="ts" context="module"> + import { writable, type Writable } from 'svelte/store'; + + interface ToolbarContext { + expand: boolean; + } + + function initToolbarContext() { + return setContext<Writable<ToolbarContext>>('toolbar', writable({ expand: false })); + } + + export function getToolbarContext() { + return getContext<Writable<ToolbarContext>>('toolbar'); + } +</script> + +<script lang="ts"> + import { getContext, setContext } from 'svelte'; + + const toolbar = initToolbarContext(); +</script> + +<div class="flex flex-col"> + <div + class="flex flex-row flex-wrap gap-4 text-sm xl:grid xl:grid-flow-col xl:grid-cols-[1fr_2fr_1fr]" + > + <div class="flex flex-row justify-start gap-2"> + <slot name="start" /> + </div> + <div class="flex flex-row flex-wrap justify-start gap-2 xl:flex-nowrap xl:justify-center"> + <slot name="center" /> + </div> + <div class="flex flex-row justify-end gap-2"> + <slot name="end" /> + </div> + </div> + {#if $toolbar.expand} + <div class="mt-4"> + <slot /> + </div> + {/if} +</div> |