Sidebar: Menü ein-/ausklappbar (eingeklappt als Symbolleiste, Zustand wird gemerkt)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/renderer/app.js

@@ -154,6 +154,26 @@ $$('#sidebar .nav[data-view]').forEach((n) => n.addEventListener('click', () =>
   render();
 }));
 
+// ============================================================ Einklappbares Menü (Sidebar)
+(() => {
+  const KEY = 'mrterm.nav.collapsed';
+  const sb = $('#sidebar');
+  // Tooltips für die Symbolansicht
+  $$('#navMenu .nav').forEach((n) => { n.title = n.querySelector('span')?.textContent || ''; });
+  const apply = (collapsed) => {
+    sb.classList.toggle('nav-collapsed', collapsed);
+    $('#navToggle').title = collapsed ? 'Menü ausklappen' : 'Menü einklappen';
+  };
+  let collapsed = false;
+  try { collapsed = localStorage.getItem(KEY) === '1'; } catch {}
+  apply(collapsed);
+  $('#navToggle').onclick = () => {
+    collapsed = !collapsed;
+    apply(collapsed);
+    try { localStorage.setItem(KEY, collapsed ? '1' : '0'); } catch {}
+  };
+})();
+
 // ============================================================ Verzeichnisbaum (Sidebar)
 const TREE_KEY = 'mrterm.tree.open';
 const treeOpen = new Set((() => { try { return JSON.parse(localStorage.getItem(TREE_KEY) || '[]'); } catch { return []; } })());

src/renderer/index.html

@@ -27,6 +27,8 @@
 
     <div id="body">
       <nav id="sidebar">
+        <div id="navHead" class="tree-head nav-head"><span>Menü</span><button id="navToggle" title="Menü einklappen"><svg viewBox="0 0 24 24"><path d="M6 15l6-6 6 6"/></svg></button></div>
+        <div id="navMenu" class="nav-menu">
         <button class="nav active" data-view="hosts"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="13" width="18" height="7" rx="2"/><circle cx="7" cy="7.5" r="1"/><circle cx="7" cy="16.5" r="1"/></svg><span>Hosts</span></button>
         <button class="nav" data-view="sftp"><svg viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span>SFTP</span></button>
         <button class="nav" data-view="keys"><svg viewBox="0 0 24 24"><circle cx="8" cy="15" r="4"/><path d="M11 12l9-9M16 7l3 3M14 9l2 2"/></svg><span>Keychain</span></button>
@@ -34,6 +36,7 @@
         <button class="nav" data-view="snippets"><svg viewBox="0 0 24 24"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5"/></svg><span>Snippets</span></button>
         <button class="nav" data-view="known"><svg viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg><span>Known Hosts</span></button>
         <button class="nav" data-view="history"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span>Verlauf</span></button>
+        </div>
         <div class="nav-sep"></div>
         <div id="tree" class="tree"></div>
         <button id="updateBadge" class="nav update-badge" style="display:none"><svg viewBox="0 0 24 24"><path d="M12 4v12M6 10l6 6 6-6M4 20h16"/></svg><span>Update</span></button>

src/renderer/styles.css

@@ -332,3 +332,12 @@ kbd { background: var(--card); border: 1px solid var(--border); border-bottom-wi
 [data-theme='light'] .brand-term { color: #14a37a; }
 .rdp-area { background: #000; }
 .rdp-area .rdp-hint { margin: auto; color: var(--faint); font-size: 12px; }
+
+/* ---------- Einklappbares Menü in der Sidebar ---------- */
+.nav-head { padding-top: 0; }
+.nav-head button svg { transition: transform .15s; }
+.nav-menu { display: flex; flex-direction: column; gap: 2px; flex: none; }
+#sidebar.nav-collapsed .nav-head button svg { transform: rotate(180deg); }
+#sidebar.nav-collapsed .nav-menu { flex-direction: row; flex-wrap: wrap; gap: 2px; }
+#sidebar.nav-collapsed .nav-menu .nav { padding: 7px; flex: 0 0 auto; }
+#sidebar.nav-collapsed .nav-menu .nav span { display: none; }