feat(ui): toggle the diagram-list sidebar
Add a ☰ toolbar button (and ⌘/Ctrl+B shortcut) to show/hide the left sidebar for a wider editing/preview area. The preview re-fits when the sidebar — or the Optimize panel — toggles, so the diagram stays centred.
This commit is contained in:
@@ -34,6 +34,11 @@
|
||||
e.preventDefault();
|
||||
void store.save();
|
||||
}
|
||||
// ⌘/Ctrl+B: toggle the diagram-list sidebar.
|
||||
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'b') {
|
||||
e.preventDefault();
|
||||
store.showSidebar = !store.showSidebar;
|
||||
}
|
||||
// ⌘/Ctrl+E: jump into viewer mode and toggle the quick-edit drawer.
|
||||
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'e') {
|
||||
e.preventDefault();
|
||||
@@ -54,7 +59,9 @@
|
||||
<div class="app">
|
||||
<Toolbar />
|
||||
<div class="body">
|
||||
<Sidebar />
|
||||
{#if store.showSidebar}
|
||||
<Sidebar />
|
||||
{/if}
|
||||
{#if store.activeId}
|
||||
<div class="split" bind:this={splitHost} class:splitting>
|
||||
{#if store.layout !== 'preview'}
|
||||
|
||||
@@ -26,10 +26,12 @@
|
||||
return () => clearTimeout(timer);
|
||||
});
|
||||
|
||||
// Re-fit when the available space changes (layout / panel toggles).
|
||||
// Re-fit when the available space changes (layout / panel / sidebar toggles).
|
||||
$effect(() => {
|
||||
void store.layout;
|
||||
void store.showGit;
|
||||
void store.showOptimize;
|
||||
void store.showSidebar;
|
||||
tick().then(fit);
|
||||
});
|
||||
|
||||
|
||||
@@ -50,6 +50,12 @@
|
||||
|
||||
<header class="toolbar">
|
||||
<div class="left">
|
||||
<button
|
||||
class="ghost icon"
|
||||
class:on={store.showSidebar}
|
||||
title="Toggle diagram list (⌘B)"
|
||||
onclick={() => (store.showSidebar = !store.showSidebar)}>☰</button
|
||||
>
|
||||
<span class="logo">Mermix</span>
|
||||
<span class="divider"></span>
|
||||
{#if store.activeId}
|
||||
|
||||
@@ -42,6 +42,8 @@ class Store {
|
||||
toasts = $state<Toast[]>([]);
|
||||
/** Most recent successfully rendered SVG, used for export. */
|
||||
lastSvg = $state('');
|
||||
/** Whether the left sidebar (diagram list) is visible. */
|
||||
showSidebar = $state(true);
|
||||
/** Whether the Git side panel is visible. */
|
||||
showGit = $state(true);
|
||||
/** Whether the Optimize (Diagram Doctor) side panel is visible. */
|
||||
|
||||
Reference in New Issue
Block a user