feat: side bar playlist and other items not present on some screensizes. make completely responsive

Task #40 completed by ClaudeQueue ClaudeQueue
2026-06-30 01:06:54 +00:00
parent f266c4ffb9
commit 05e78677b0
3 changed files with 123 additions and 5 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -25,7 +25,7 @@
  <body>
    <div class="app">
      <!-- Sidebar -->
-      <aside class="sidebar">
+      <aside id="sidebar" class="sidebar">
        <div class="brand">
          <span class="brand-mark">▶</span> YT Player
        </div>
@@ -58,9 +58,20 @@
        </div>
      </aside>

+      <!-- Sidebar backdrop (mobile drawer) -->
+      <div id="sidebarBackdrop" class="sidebar-backdrop"></div>
+
      <!-- Main -->
      <main class="main">
        <header class="topbar">
+          <button
+            id="sidebarToggle"
+            class="sidebar-toggle"
+            type="button"
+            aria-label="Toggle sidebar"
+            aria-controls="sidebar"
+            aria-expanded="false"
+          >☰</button>
          <form id="searchForm" class="search-form">
            <input
              id="searchInput"