settings-site: phase 7 mobile responsiveness

settings-site/public/index.html

@@ -11,7 +11,8 @@
   <div id="toast-container"></div>
 
   <!-- Sidebar -->
-  <nav class="sidebar">
+  <div class="sidebar-backdrop" id="sidebar-backdrop" aria-hidden="true"></div>
+  <nav class="sidebar" id="sidebar">
     <div class="logo">Broccolini Settings</div>
     <a href="/" class="active">Core</a>
     <a href="/channels">Channels</a>
@@ -30,6 +31,9 @@
 
   <!-- Top bar -->
   <div class="topbar">
+    <button type="button" class="menu-toggle" id="menu-toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="sidebar">
+      <span class="menu-toggle-bars" aria-hidden="true"></span>
+    </button>
     <h1>Settings</h1>
     <div class="status">
       <span class="dot" id="bot-status-dot"></span>