78 lines
1.9 KiB
Svelte
78 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { getActiveTab, setActiveTab, type WorkspaceTab } from '../../stores/workspace.svelte';
|
|
|
|
interface Props {
|
|
expanded?: boolean;
|
|
ontoggle?: () => void;
|
|
}
|
|
|
|
let { expanded = false, ontoggle }: Props = $props();
|
|
|
|
const settingsIcon = 'M10.3 2L9.9 4.4a7 7 0 0 0-1.8 1l-2.2-.9-1.7 3 1.8 1.5a7 7 0 0 0 0 2l-1.8 1.5 1.7 3 2.2-.9a7 7 0 0 0 1.8 1L10.3 18h3.4l.4-2.4a7 7 0 0 0 1.8-1l2.2.9 1.7-3-1.8-1.5a7 7 0 0 0 0-2l1.8-1.5-1.7-3-2.2.9a7 7 0 0 0-1.8-1L13.7 2h-3.4zM12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z';
|
|
|
|
function handleSettingsClick() {
|
|
if (getActiveTab() === 'settings' && expanded) {
|
|
ontoggle?.();
|
|
} else {
|
|
setActiveTab('settings');
|
|
if (!expanded) ontoggle?.();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<nav class="sidebar-rail">
|
|
<button
|
|
class="rail-btn"
|
|
class:active={getActiveTab() === 'settings' && expanded}
|
|
onclick={handleSettingsClick}
|
|
title="Settings (Ctrl+,)"
|
|
>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
|
<path
|
|
d={settingsIcon}
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
fill="none"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</nav>
|
|
|
|
<style>
|
|
.sidebar-rail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
padding: 0.5rem 0.375rem;
|
|
background: var(--ctp-mantle);
|
|
border-right: 1px solid var(--ctp-surface0);
|
|
flex-shrink: 0;
|
|
width: 2.75rem;
|
|
}
|
|
|
|
.rail-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
color: var(--ctp-subtext0);
|
|
cursor: pointer;
|
|
transition: color 0.15s, background 0.15s;
|
|
}
|
|
|
|
.rail-btn:hover {
|
|
color: var(--ctp-text);
|
|
background: var(--ctp-surface0);
|
|
}
|
|
|
|
.rail-btn.active {
|
|
color: var(--ctp-blue);
|
|
background: var(--ctp-surface0);
|
|
}
|
|
</style>
|