b19da950a6
Use tailwind v4 @theme block so we can use bg-layer-0 instead of bg-[--layer-0] for theme colors.
97 lines
2.1 KiB
Svelte
97 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { type Snippet } from 'svelte';
|
|
import { panelState as state } from './PanelState.svelte';
|
|
|
|
const { children } = $props<{ children?: Snippet }>();
|
|
</script>
|
|
|
|
<div class="wrapper" class:visible={state.activePanel.value}>
|
|
<div class="tabs">
|
|
<button aria-label="Close" onclick={() => state.toggleOpen()}>
|
|
<span class="absolute i-[tabler--chevron-left] w-6 h-6 block"></span>
|
|
</button>
|
|
{#each state.keys as panelId (panelId)}
|
|
{#if !state.panels[panelId].hidden}
|
|
<button
|
|
aria-label={panelId}
|
|
class="tab {state.panels[panelId].classes}"
|
|
class:active={panelId === state.activePanel.value}
|
|
onclick={() => (state.activePanel.value = panelId)}
|
|
>
|
|
<span class={`block w-6 h-6 iconify ${state.panels[panelId].icon}`}></span>
|
|
</button>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
<div class="content">
|
|
{@render children?.()}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.wrapper {
|
|
top: 0px;
|
|
position: absolute;
|
|
display: grid;
|
|
z-index: 2;
|
|
grid-template-columns: 30px 1fr;
|
|
height: 100%;
|
|
right: 0px;
|
|
transform: translateX(calc(100% - 30px));
|
|
transition: transform 0.2s, background 0.2s ease;
|
|
width: 30%;
|
|
min-width: 350px;
|
|
}
|
|
|
|
.content {
|
|
background: var(--color-layer-1);
|
|
z-index: 10;
|
|
position: relative;
|
|
max-height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: solid thin var(--color-outline);
|
|
}
|
|
|
|
.tabs > button {
|
|
height: 35px;
|
|
padding: 5px;
|
|
border-radius: 0px;
|
|
background: none;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: solid thin var(--color-outline);
|
|
border-left: solid thin var(--color-outline);
|
|
background: var(--color-layer-1);
|
|
}
|
|
|
|
.tabs > button > span {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.tabs > button.active {
|
|
background: var(--color-layer-2);
|
|
}
|
|
|
|
.tabs > button.active span {
|
|
opacity: 1;
|
|
}
|
|
|
|
.visible .tabs {
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.visible > .tabs button:first-child > span {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.visible {
|
|
transform: translateX(0);
|
|
}
|
|
</style>
|