feat: add collapsible left sidebar

_layouts/default.html

@@ -101,6 +101,10 @@ <h1 class="site-title">{{ page.title | default: site.title }}</h1>
       </header>
 
       <div class="content-wrapper">
+        <button class="sidebar-toggle" type="button" aria-label="Toggle sidebar" aria-expanded="true">
+          <svg class="sidebar-toggle-icon collapse-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 17 6 12 11 7"></polyline><polyline points="18 17 13 12 18 7"></polyline></svg>
+          <svg class="sidebar-toggle-icon expand-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg>
+        </button>
         <div class="sidebar">
           <div class="search-container">
             <div class="prompt-count" id="promptCount">

script.js

@@ -1,3 +1,35 @@
+// Sidebar toggle functionality
+function initializeSidebarToggle() {
+  const toggle = document.querySelector(".sidebar-toggle");
+  if (!toggle) return;
+
+  const body = document.body;
+  const collapseIcon = toggle.querySelector(".collapse-icon");
+  const expandIcon = toggle.querySelector(".expand-icon");
+  const stored = localStorage.getItem("sidebar-collapsed");
+  const isCollapsed = stored === "true";
+
+  if (isCollapsed) {
+    body.classList.add("sidebar-collapsed");
+    toggle.setAttribute("aria-expanded", "false");
+    collapseIcon.style.display = "none";
+    expandIcon.style.display = "block";
+  } else {
+    toggle.setAttribute("aria-expanded", "true");
+    collapseIcon.style.display = "block";
+    expandIcon.style.display = "none";
+  }
+
+  toggle.addEventListener("click", () => {
+    const nowCollapsed = !body.classList.contains("sidebar-collapsed");
+    body.classList.toggle("sidebar-collapsed", nowCollapsed);
+    localStorage.setItem("sidebar-collapsed", nowCollapsed ? "true" : "false");
+    toggle.setAttribute("aria-expanded", nowCollapsed ? "false" : "true");
+    collapseIcon.style.display = nowCollapsed ? "none" : "block";
+    expandIcon.style.display = nowCollapsed ? "block" : "none";
+  });
+}
+
 // Dark mode functionality
 function toggleDarkMode() {
   const body = document.body;
@@ -198,6 +230,9 @@ document.addEventListener("DOMContentLoaded", () => {
   // Initialize language and tone selectors
   initializeLanguageAndTone();
 
+  // Initialize sidebar toggle
+  initializeSidebarToggle();
+
   filterPrompts();
 });
 

style.css

@@ -670,6 +670,64 @@ body.dark-mode {
 .content-wrapper {
     display: flex;
     flex: 1;
+    position: relative;
+}
+
+.sidebar-toggle {
+    position: absolute;
+    top: 50%;
+    left: var(--sidebar-width);
+    transform: translate(-50%, -50%);
+    z-index: 20;
+    width: 24px;
+    height: 48px;
+    border-radius: 0 8px 8px 0;
+    border: 1px solid var(--border-color);
+    border-left: none;
+    background: var(--bg-color-light);
+    color: var(--accent-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: left 0.3s ease, background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.sidebar-toggle:hover {
+    background: rgba(16, 185, 129, 0.1);
+    border-color: var(--accent-color);
+}
+
+.sidebar-toggle-icon {
+    width: 16px;
+    height: 16px;
+}
+
+.dark-mode .sidebar-toggle {
+    background: var(--bg-color-dark);
+    border-color: var(--border-color-dark);
+}
+
+.dark-mode .sidebar-toggle:hover {
+    background: rgba(16, 185, 129, 0.2);
+    border-color: var(--accent-color);
+}
+
+body.sidebar-collapsed .sidebar-toggle {
+    left: 0;
+    transform: translate(0, -50%);
+    border-radius: 0 8px 8px 0;
+    border-left: 1px solid var(--border-color);
+}
+
+.dark-mode.sidebar-collapsed .sidebar-toggle {
+    border-left-color: var(--border-color-dark);
+}
+
+@media (max-width: 768px) {
+    .sidebar-toggle {
+        display: none;
+    }
 }
 
 .sidebar {
@@ -679,6 +737,20 @@ body.dark-mode {
     height: calc(100vh - var(--header-height) - var(--footer-height));
     overflow-y: auto;
     background-color: var(--bg-color-light);
+    flex-shrink: 0;
+    transition: width 0.3s ease, padding 0.3s ease, opacity 0.2s ease, border-color 0.3s ease;
+}
+
+body.sidebar-collapsed .sidebar {
+    width: 0;
+    padding: 0;
+    border-right-width: 0;
+    opacity: 0;
+    overflow: hidden;
+}
+
+body.sidebar-collapsed .sidebar .search-container {
+    pointer-events: none;
 }
 
 .dark-mode .sidebar {
@@ -2240,7 +2312,8 @@ input:checked + .slider:before {
 
 .create-yaml-button:hover {
     background-color: #0e9f71;
-} 
+}
+
 /* JSON Prompt Icon Styles */
 .prompt-json-icon {
     display: inline-flex;
@@ -2328,4 +2401,4 @@ input:checked + .slider:before {
 
 .dark-mode .json-null {
     color: #8b949e;
-}  
+}