レスポンシブデザイン対応

3 files changed, 192 insertions, 2 deletions

diff --git a/src/ollama_web/static/app.js b/src/ollama_web/static/app.js
index 339030a..3a75ded 100644
--- a/src/ollama_web/static/app.js
+++ b/src/ollama_web/static/app.js
@@ -12,6 +12,9 @@ const fileInput = document.getElementById("file-input");
 const attachmentsEl = document.getElementById("attachments");
 const sessionListEl = document.getElementById("session-list");
 const newSessionBtn = document.getElementById("new-session-btn");
+const menuBtn = document.getElementById("menu-btn");
+const sidebar = document.getElementById("sidebar");
+const sidebarBackdrop = document.getElementById("sidebar-backdrop");
 
 let currentSessionId = null;
 let currentSession = null;
@@ -298,6 +301,24 @@ fileInput.addEventListener("change", () => {
 
 newSessionBtn.addEventListener("click", createSession);
 
+menuBtn.addEventListener("click", () => {
+  sidebar.classList.add("open");
+  sidebarBackdrop.classList.add("active");
+});
+
+sidebarBackdrop.addEventListener("click", () => {
+  sidebar.classList.remove("open");
+  sidebarBackdrop.classList.remove("active");
+});
+
+sessionListEl.addEventListener("click", (e) => {
+  const li = e.target.closest("li");
+  if (li && li.dataset.id && !e.target.closest(".delete")) {
+    sidebar.classList.remove("open");
+    sidebarBackdrop.classList.remove("active");
+  }
+});
+
 async function send() {
   const text = inputEl.value.trim();
   if (!text && !pendingFiles.length) return;
diff --git a/src/ollama_web/static/style.css b/src/ollama_web/static/style.css
index d12cf48..9fb37ea 100644
--- a/src/ollama_web/static/style.css
+++ b/src/ollama_web/static/style.css
@@ -38,6 +38,172 @@ body {
   flex-direction: column;
 }
 
+#sidebar-backdrop {
+  display: none;
+}
+
+#menu-btn {
+  display: none;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  font-size: 18px;
+  line-height: 1;
+  padding: 4px 10px;
+  margin-right: 8px;
+}
+
+@media (max-width: 768px) {
+  #menu-btn {
+    display: inline-flex;
+  }
+
+  #sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 260px;
+    z-index: 200;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+  }
+
+  #sidebar.open {
+    transform: translateX(0);
+  }
+
+  #sidebar-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 150;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+  }
+
+  #sidebar-backdrop.active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  header {
+    gap: 8px;
+    padding: 8px 10px;
+  }
+
+  header h1 {
+    font-size: 15px;
+  }
+
+  .controls {
+    gap: 6px;
+  }
+
+  .controls label[for="model-select"],
+  .think-toggle span {
+    display: none;
+  }
+
+  select#model-select {
+    max-width: 120px;
+  }
+
+  .input-row {
+    flex-wrap: nowrap;
+    gap: 6px;
+  }
+
+  .attach-btn {
+    width: 34px;
+    height: 34px;
+    font-size: 16px;
+    order: 1;
+    flex-shrink: 0;
+  }
+
+  textarea#input {
+    order: 2;
+    min-width: 0;
+    padding: 0 8px;
+    font-size: 14px;
+    height: 34px;
+    line-height: 34px;
+    resize: none;
+  }
+
+  button#send-btn,
+  #cancel-btn {
+    order: 3;
+    padding: 0 10px;
+    font-size: 13px;
+    height: 34px;
+    flex-shrink: 0;
+  }
+}
+
+@media (max-width: 520px) {
+  header {
+    flex-wrap: wrap;
+    padding: 8px;
+    gap: 6px;
+  }
+
+  header h1 {
+    font-size: 14px;
+    order: 1;
+  }
+
+  #menu-btn {
+    order: 0;
+  }
+
+  .controls {
+    order: 2;
+    width: 100%;
+    margin-left: 0;
+    justify-content: space-between;
+  }
+
+  select#model-select {
+    flex: 1;
+    max-width: none;
+  }
+
+  .think-toggle {
+    font-size: 13px;
+  }
+
+  #clear-btn {
+    font-size: 12px;
+    padding: 4px 6px;
+  }
+}
+
+@media (max-width: 360px) {
+  .controls {
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  select#model-select {
+    width: 100%;
+    order: 0;
+  }
+
+  .think-toggle {
+    order: 1;
+  }
+
+  #clear-btn {
+    order: 2;
+    margin-left: auto;
+  }
+}
+
 .sidebar-header {
   display: flex;
   align-items: center;
@@ -312,4 +478,5 @@ textarea#input {
   font-family: inherit;
 }
 
-button#send-btn { padding: 0 20px; }
\ No newline at end of file
+button#send-btn { padding: 0 20px; }
+
diff --git a/src/ollama_web/templates/index.html b/src/ollama_web/templates/index.html
index eae3b6d..1f4245a 100644
--- a/src/ollama_web/templates/index.html
+++ b/src/ollama_web/templates/index.html
@@ -17,9 +17,11 @@
     </div>
     <ul id="session-list"></ul>
   </aside>
+  <div id="sidebar-backdrop"></div>
 
   <div id="main">
     <header>
+      <button id="menu-btn" type="button" aria-label="セッション一覧">☰</button>
       <h1>ollama-web</h1>
       <div class="controls">
         <label for="model-select">モデル:</label>
@@ -35,7 +37,7 @@
         <label class="think-toggle">
           <input type="checkbox" id="think-toggle" /> thinking
         </label>
-        <button id="clear-btn" type="button">会話クリア</button>
+        <button id="clear-btn" type="button">クリア</button>
       </div>
     </header>