Replace sidebar with bottom navbar on mobile for dashboard layout

On mobile (<md), the sidebar is now hidden and a fixed bottom navigation
bar provides access to key sections. The main content area gets full
width. Desktop sidebar behavior is unchanged.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: zalepa

app/helpers/application_helper.rb

@@ -57,6 +57,17 @@ def sidebar_icon(name, active = false)
     end
   end
 
+  def bottom_nav_link(label, path, icon_name)
+    active = current_sidebar_item == icon_name
+    base_classes = "flex flex-col items-center justify-center gap-0.5 flex-1 py-1 text-[10px] font-medium transition-colors"
+    active_classes = active ? "text-blue-700" : "text-gray-500"
+
+    link_to path, class: "#{base_classes} #{active_classes}" do
+      concat(sidebar_icon(icon_name, active))
+      concat(content_tag(:span, label))
+    end
+  end
+
   def star_button(starrable, starred: nil)
     return unless authenticated?
 

app/views/layouts/dashboard.html.erb

@@ -37,19 +37,19 @@
             <% if Current.session&.user&.admin? %>
               <%= link_to "Admin", admin_dashboard_path, class: "hover:text-blue-700 transition-colors" %>
             <% end %>
-            <%= link_to "Profile", edit_profile_path, class: "hover:text-blue-700 transition-colors" %>
-            <%= button_to "Sign out", session_path, method: :delete, class: "hover:text-blue-700 transition-colors cursor-pointer" %>
+            <%= link_to "Profile", edit_profile_path, class: "hover:text-blue-700 transition-colors hidden sm:inline" %>
+            <%= button_to "Sign out", session_path, method: :delete, class: "hover:text-blue-700 transition-colors cursor-pointer hidden sm:inline" %>
           <% else %>
             <%= link_to "Sign in", new_session_path, class: "hover:text-blue-700 transition-colors" %>
-            <%= link_to "Sign up", new_signup_path, class: "hover:text-blue-700 transition-colors" %>
+            <%= link_to "Sign up", new_signup_path, class: "hover:text-blue-700 transition-colors hidden sm:inline" %>
           <% end %>
         </div>
       </div>
     </header>
 
     <div class="flex flex-1 overflow-hidden" data-controller="sidebar">
-      <%# Sidebar %>
-      <aside data-sidebar-target="sidebar" class="w-16 bg-white border-r border-gray-200 flex flex-col transition-all duration-200 ease-in-out shrink-0">
+      <%# Desktop sidebar - hidden on mobile %>
+      <aside data-sidebar-target="sidebar" class="hidden md:flex w-16 bg-white border-r border-gray-200 flex-col transition-all duration-200 ease-in-out shrink-0">
         <div class="p-3">
           <button data-action="click->sidebar#toggle" class="w-10 h-10 flex items-center justify-center rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors cursor-pointer" aria-label="Toggle sidebar">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
@@ -72,7 +72,7 @@
       </aside>
 
       <%# Main content %>
-      <main class="flex-1 overflow-y-auto">
+      <main class="flex-1 overflow-y-auto pb-16 md:pb-0">
         <% if notice %>
           <div class="px-6 pt-4">
             <p class="py-2 px-3 bg-green-50 text-green-700 font-medium rounded-lg" id="notice"><%= notice %></p>
@@ -86,5 +86,19 @@
         <%= yield %>
       </main>
     </div>
+
+    <%# Mobile bottom navigation - hidden on desktop %>
+    <nav class="md:hidden fixed bottom-0 inset-x-0 bg-white border-t border-gray-200 z-50">
+      <div class="flex items-center justify-around h-16 px-2">
+        <%= bottom_nav_link("Dashboard", dashboard_path, "dashboard") %>
+        <%= bottom_nav_link("Meetings", meetings_path, "meetings") %>
+        <%= bottom_nav_link("Council", council_members_path, "council_members") %>
+        <%= bottom_nav_link("Topics", tags_path, "topics") %>
+        <%= bottom_nav_link("Search", search_path, "search") %>
+        <% if authenticated? %>
+          <%= bottom_nav_link("Starred", stars_path, "starred") %>
+        <% end %>
+      </div>
+    </nav>
   </body>
 </html>