Add mobile-friendly sidebar with hamburger menu (#11)

- Added hamburger button in navbar for mobile screens
- Implemented slide-in/slide-out sidebar animation
- Set fixed sidebar width of 16rem
- Added ARIA attributes for accessibility
- Added overlay for mobile sidebar
- Made sidebar responsive with lg breakpoint
- Added screen reader only class for accessibility

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <noreply@anthropic.com>

Author: jhash

app/assets/stylesheets/application.css

@@ -8,3 +8,28 @@
  *
  * Consider organizing styles into separate files for maintainability.
  */
+
+/* Mobile Sidebar Styles */
+#sidebar-menu {
+  width: 16rem; /* Fixed width of 16rem */
+}
+
+/* Ensure main content adjusts on desktop */
+@media (min-width: 1024px) {
+  main {
+    margin-left: 0;
+  }
+}
+
+/* Screen reader only class */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

app/components/navbar_component.html.erb

@@ -2,6 +2,19 @@
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex justify-between h-16">
       <div class="flex items-center">
+        <% if current_user %>
+          <button type="button" 
+                  class="mr-3 p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 lg:hidden"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                  aria-controls="sidebar-menu"
+                  onclick="document.getElementById('sidebar-menu').classList.toggle('translate-x-0'); document.getElementById('sidebar-menu').classList.toggle('-translate-x-full'); document.getElementById('sidebar-overlay').classList.toggle('hidden'); this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'false' ? 'true' : 'false')">
+            <span class="sr-only">Open sidebar</span>
+            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+        <% end %>
         <%= link_to "Eight", root_path, class: "text-xl font-bold hover:text-gray-300 transition-colors" %>
       </div>
 

app/components/sidebar_component.html.erb

@@ -1,4 +1,4 @@
-<aside class="bg-gray-800 text-white w-64 min-h-screen flex flex-col" role="navigation" aria-label="Main navigation">
+<aside id="sidebar-menu" class="bg-gray-800 text-white min-h-screen flex flex-col fixed lg:static inset-y-0 left-0 z-40 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out" role="menu" aria-label="Main navigation">
   <div class="px-4 py-6">
     <nav class="space-y-1" role="tree">
       <% nav_items.each_with_index do |item, index| %>

app/views/layouts/application.html.erb

@@ -27,6 +27,12 @@
 
     <div class="flex min-h-screen">
       <% if logged_in? %>
+        <!-- Mobile sidebar overlay -->
+        <div id="sidebar-overlay" 
+             class="fixed inset-0 bg-gray-900 bg-opacity-50 z-30 hidden lg:hidden"
+             onclick="document.getElementById('sidebar-menu').classList.remove('translate-x-0'); document.getElementById('sidebar-menu').classList.add('-translate-x-full'); document.querySelector('[aria-controls=sidebar-menu]').setAttribute('aria-expanded', 'false'); this.classList.add('hidden');">
+        </div>
+        
         <%= render SidebarComponent.new(
           current_user: current_user, 
           current_path: request.path,