From 52d170e36c3b84c4658213ccb7ef86095ec2eb81 Mon Sep 17 00:00:00 2001
From: Zach Gollwitzer <zach@maybe.co>
Date: Wed, 9 Apr 2025 12:42:46 -0400
Subject: [PATCH] Mobile responsive template preparation (#2071)

* Mobile responsive template

* Fix sidebar mobile conflict

* Lint fix
---
 .../controllers/sidebar_controller.js         |  25 ++-
 app/views/layouts/application.html.erb        | 148 ++++++++++++------
 .../layouts/shared/_breadcrumbs.html.erb      |   4 +-
 app/views/layouts/shared/_htmldoc.html.erb    |   4 +-
 app/views/layouts/sidebar/_nav_item.html.erb  |   6 +-
 app/views/users/_user_menu.html.erb           |   4 +-
 6 files changed, 117 insertions(+), 74 deletions(-)

diff --git a/app/javascript/controllers/sidebar_controller.js b/app/javascript/controllers/sidebar_controller.js
index 5e51a01c..a46794e3 100644
--- a/app/javascript/controllers/sidebar_controller.js
+++ b/app/javascript/controllers/sidebar_controller.js
@@ -7,7 +7,7 @@ export default class extends Controller {
     config: Object,
   };
 
-  static targets = ["leftPanel", "rightPanel", "content"];
+  static targets = ["leftPanel", "leftPanelMobile", "rightPanel", "content"];
 
   initialize() {
     this.leftPanelOpen = this.configValue.left_panel.is_open;
@@ -20,6 +20,16 @@ export default class extends Controller {
     this.#persistPreference("show_sidebar", this.leftPanelOpen);
   }
 
+  toggleLeftPanelMobile() {
+    if (this.leftPanelOpen) {
+      this.leftPanelMobileTarget.classList.remove("hidden");
+      this.leftPanelOpen = false;
+    } else {
+      this.leftPanelMobileTarget.classList.add("hidden");
+      this.leftPanelOpen = true;
+    }
+  }
+
   toggleRightPanel() {
     this.rightPanelOpen = !this.rightPanelOpen;
     this.#updatePanelWidths();
@@ -27,7 +37,6 @@ export default class extends Controller {
   }
 
   #updatePanelWidths() {
-    this.contentTarget.style.maxWidth = `${this.#contentMaxWidth()}px`;
     this.leftPanelTarget.style.width = `${this.#leftPanelWidth()}px`;
     this.rightPanelTarget.style.width = `${this.#rightPanelWidth()}px`;
     this.rightPanelTarget.style.overflow = this.#rightPanelOverflow();
@@ -61,18 +70,6 @@ export default class extends Controller {
     return "hidden";
   }
 
-  #contentMaxWidth() {
-    if (!this.leftPanelOpen && !this.rightPanelOpen) {
-      return 1024;
-    }
-
-    if (this.leftPanelOpen && !this.rightPanelOpen) {
-      return 896;
-    }
-
-    return 768;
-  }
-
   #persistPreference(field, value) {
     fetch(`/users/${this.userIdValue}`, {
       method: "PATCH",
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index d250f1e8..356484ee 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,18 +1,36 @@
 <%= render "layouts/shared/htmldoc" do %>
   <% sidebar_config = app_sidebar_config(Current.user) %>
 
-  <div class="flex h-full bg-gray-50" 
-       data-controller="sidebar" 
+  <div class="flex flex-col lg:flex-row h-dvh lg:h-full bg-gray-50"
+       data-controller="sidebar"
        data-sidebar-user-id-value="<%= Current.user.id %>"
        data-sidebar-config-value="<%= sidebar_config.to_json %>">
-    <nav class="flex flex-col shrink-0 w-[84px] py-4 mr-3">
-      <div class="pl-2 mb-3">
+    <nav class="flex justify-between lg:justify-start lg:flex-col shrink-0 lg:w-[84px] p-3 lg:px-0 lg:py-4 lg:mr-3">
+
+      <button data-action="sidebar#toggleLeftPanelMobile" class="lg:hidden inline-flex p-2 rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer">
+        <%= icon("panel-left", color: "gray") %>
+      </button>
+
+      <%# Mobile only account sidebar groups %>
+      <%= tag.div class: class_names("hidden bg-gray-50 z-20 absolute inset-0 h-dvh w-full p-4 overflow-y-auto transition-all duration-300"),
+                  data: { sidebar_target: "leftPanelMobile" } do %>
+        <div id="account-sidebar-tabs">
+          <div class="mb-4">
+            <button data-action="sidebar#toggleLeftPanelMobile">
+              <%= icon("x", color: "gray") %>
+            </button>
+          </div>
+          <%= render "accounts/account_sidebar_tabs", family: Current.family %>
+        </div>
+      <% end %>
+
+      <div class="lg:pl-2 lg:mb-3">
         <%= link_to root_path, class: "block" do %>
           <%= image_tag "logomark-color.svg", class: "w-9 h-9 mx-auto" %>
         <% end %>
       </div>
 
-      <ul class="space-y-0.5">
+      <ul class="space-y-0.5 hidden lg:block">
         <li>
           <%= render "layouts/sidebar/nav_item", name: "Home", path: root_path, icon_key: "pie-chart" %>
         </li>
@@ -26,60 +44,88 @@
         </li>
       </ul>
 
-      <div class="pl-2 mt-auto mx-auto">
-        <%= render "users/user_menu", user: Current.user %>
+      <div class="lg:pl-2 lg:mt-auto lg:mx-auto">
+        <div class="lg:hidden">
+          <%= render "users/user_menu", user: Current.user, placement: "bottom-end", offset: 12 %>
+        </div>
+
+        <div class="hidden lg:block">
+          <%= render "users/user_menu", user: Current.user %>
+        </div>
       </div>
     </nav>
 
-    <%= tag.div class: class_names("py-4 shrink-0 h-full overflow-y-auto transition-all duration-300"), 
+    <div class="flex justify-between lg:justify-normal grow overflow-y-auto">
+      <%= tag.div class: class_names("py-4 shrink-0 h-full overflow-y-auto transition-all duration-300 hidden lg:block"),
                 style: "width: #{sidebar_config.dig(:left_panel, :initial_width)}px",
                 data: { sidebar_target: "leftPanel" } do %>
-      <% if content_for?(:sidebar) %>
-        <%= yield :sidebar %>
-      <% else %>
-        <div id="account-sidebar-tabs" data-turbo-permanent>
-          <%= render "accounts/account_sidebar_tabs", family: Current.family %>
-        </div>
-      <% end %>
-    <% end %>
-
-    <%= tag.main class: class_names("px-10 py-4 grow h-full", require_upgrade? ? "relative overflow-hidden" : "overflow-y-auto") do %>
-      <% if require_upgrade? %>
-        <div class="absolute inset-0 px-10 h-full w-full z-50">
-          <%= render "shared/subscribe_modal" %>
-        </div>
-      <% end %>
-
-      <%= tag.div style: "max-width: #{sidebar_config.dig(:content_max_width)}px", class: class_names("mx-auto w-full h-full"), data: { sidebar_target: "content" } do %>
-        <% if content_for?(:breadcrumbs) %>
-          <%= yield :breadcrumbs %>
+        <% if content_for?(:sidebar) %>
+          <%= yield :sidebar %>
         <% else %>
-          <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %>
-        <% end %>
-
-        <% if content_for?(:page_header) %>
-          <%= yield :page_header %>
-        <% end %>
-
-        <%= yield %>
-      <% end %>
-    <% end %>
-
-    <%# AI chat sidebar %>
-    <%= tag.div id: "chat-container",
-                style: "width: #{sidebar_config.dig(:right_panel, :initial_width)}px; overflow: #{sidebar_config.dig(:right_panel, :overflow)}",
-                class: class_names("flex flex-col justify-between shrink-0 transition-all duration-300"),
-                data: { controller: "chat hotkey", sidebar_target: "rightPanel", turbo_permanent: true } do %>
-
-      <% if Current.user.ai_enabled? %>
-        <%= turbo_frame_tag chat_frame, src: chat_view_path(@chat), loading: "lazy", class: "h-full" do %>
-          <div class="flex justify-center items-center h-full">
-            <%= lucide_icon("loader-circle", class: "w-5 h-5 text-secondary animate-spin") %>
+          <div id="account-sidebar-tabs" data-turbo-permanent>
+            <%= render "accounts/account_sidebar_tabs", family: Current.family %>
           </div>
         <% end %>
-      <% else %>
-        <%= render "chats/ai_consent" %>
       <% end %>
-    <% end %>
+
+      <%= tag.main class: class_names("px-3 lg:px-10 py-4 grow h-full", require_upgrade? ? "relative overflow-hidden" : "overflow-y-auto") do %>
+        <% if require_upgrade? %>
+          <div class="absolute inset-0 px-3 lg:px-10 h-full w-full z-50">
+            <%= render "shared/subscribe_modal" %>
+          </div>
+        <% end %>
+
+        <%= tag.div class: class_names("mx-auto max-w-5xl w-full h-full"), data: { sidebar_target: "content" } do %>
+          <% if content_for?(:breadcrumbs) %>
+            <%= yield :breadcrumbs %>
+          <% else %>
+            <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %>
+          <% end %>
+
+          <% if content_for?(:page_header) %>
+            <%= yield :page_header %>
+          <% end %>
+
+          <%= yield %>
+        <% end %>
+      <% end %>
+
+      <%# AI chat sidebar %>
+      <%= tag.div id: "chat-container",
+                style: "width: #{sidebar_config.dig(:right_panel, :initial_width)}px; overflow: #{sidebar_config.dig(:right_panel, :overflow)}",
+                class: class_names("flex flex-col justify-between shrink-0 transition-all duration-300 hidden lg:block"),
+                data: { controller: "chat hotkey", sidebar_target: "rightPanel", turbo_permanent: true } do %>
+
+        <% if Current.user.ai_enabled? %>
+          <%= turbo_frame_tag chat_frame, src: chat_view_path(@chat), loading: "lazy", class: "h-full" do %>
+            <div class="flex justify-center items-center h-full">
+              <%= lucide_icon("loader-circle", class: "w-5 h-5 text-secondary animate-spin") %>
+            </div>
+          <% end %>
+        <% else %>
+          <%= render "chats/ai_consent" %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <nav class="lg:hidden bg-white shrink-0 z-10 pb-2">
+      <ul class="flex items-center justify-around gap-1">
+        <li>
+          <%= render "layouts/sidebar/nav_item", name: "Home", path: root_path, icon_key: "pie-chart" %>
+        </li>
+
+        <li>
+          <%= render "layouts/sidebar/nav_item", name: "Transactions", path: transactions_path, icon_key: "credit-card" %>
+        </li>
+
+        <li>
+          <%= render "layouts/sidebar/nav_item", name: "Budgets", path: budgets_path, icon_key: "map" %>
+        </li>
+
+        <li>
+          <%= render "layouts/sidebar/nav_item", name: "Assistant", path: chats_path, icon_key: "bot" %>
+        </li>
+      </ul>
+    </nav>
   </div>
 <% end %>
diff --git a/app/views/layouts/shared/_breadcrumbs.html.erb b/app/views/layouts/shared/_breadcrumbs.html.erb
index 313147fa..0f3045fe 100644
--- a/app/views/layouts/shared/_breadcrumbs.html.erb
+++ b/app/views/layouts/shared/_breadcrumbs.html.erb
@@ -2,7 +2,7 @@
 
 <nav class="flex items-center gap-2 mb-6">
   <% if sidebar_toggle_enabled %>
-    <button data-action="sidebar#toggleLeftPanel" class="p-2 inline-flex rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer">
+    <button data-action="sidebar#toggleLeftPanel" class="hidden p-2 lg:inline-flex rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer">
       <%= icon("panel-left", color: "gray") %>
     </button>
   <% end %>
@@ -25,7 +25,7 @@
 
   <% if sidebar_toggle_enabled %>
     <div class="ml-auto">
-      <button data-action="sidebar#toggleRightPanel" class="p-2 inline-flex rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer" title="Toggle AI Assistant">
+      <button data-action="sidebar#toggleRightPanel" class="p-2 hidden lg:inline-flex rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer" title="Toggle AI Assistant">
         <%= icon("panel-right", color: "gray") %>
       </button>
     </div>
diff --git a/app/views/layouts/shared/_htmldoc.html.erb b/app/views/layouts/shared/_htmldoc.html.erb
index ce0a6300..2215abd4 100644
--- a/app/views/layouts/shared/_htmldoc.html.erb
+++ b/app/views/layouts/shared/_htmldoc.html.erb
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html class="h-full text-primary font-sans <%= @os %>" lang="en">
+<html class="h-full text-primary overflow-hidden lg:overflow-auto font-sans <%= @os %>" lang="en">
   <head>
     <%= render "layouts/shared/head" %>
     <%= yield :head %>
   </head>
 
-  <body class="h-full antialiased">
+  <body class="h-full overflow-hidden lg:overflow-auto antialiased">
     <div class="fixed z-50 bottom-6 left-24 w-80">
       <div id="notification-tray" class="space-y-1 w-full">
         <%= render_flash_notifications %>
diff --git a/app/views/layouts/sidebar/_nav_item.html.erb b/app/views/layouts/sidebar/_nav_item.html.erb
index bfe8139f..a4dbb6c7 100644
--- a/app/views/layouts/sidebar/_nav_item.html.erb
+++ b/app/views/layouts/sidebar/_nav_item.html.erb
@@ -1,8 +1,8 @@
 <%# locals: (name:, path:, icon_key:) %>
 
-<%= link_to path, class: "space-y-1 py-1 group block" do %>
-  <div class="grow flex gap-1 items-center">
-    <%= tag.div class: class_names("w-1 h-4 rounded-tr-sm rounded-br-sm", "bg-gray-900" => page_active?(path)) %>
+<%= link_to path, class: "space-y-1 lg:py-1 group block" do %>
+  <div class="grow flex flex-col lg:flex-row gap-1 items-center">
+    <%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-gray-900" => page_active?(path)) %>
 
     <%= tag.div class: class_names("w-8 h-8 flex items-center justify-center mx-auto rounded-lg", page_active?(path) ? "bg-white shadow-xs text-primary" : "group-hover:bg-gray-100 text-secondary") do %>
       <%= icon(icon_key) %>
diff --git a/app/views/users/_user_menu.html.erb b/app/views/users/_user_menu.html.erb
index 38e078a9..8abe7c3a 100644
--- a/app/views/users/_user_menu.html.erb
+++ b/app/views/users/_user_menu.html.erb
@@ -1,6 +1,6 @@
-<%# locals: (user:) %>
+<%# locals: (user:, placement: "right-start", offset: 16) %>
 
-<div id="user-menu" data-controller="menu" data-menu-placement-value="right-start" data-menu-offset-value="16">
+<div id="user-menu" data-controller="menu" data-menu-placement-value="<%= placement %>" data-menu-offset-value="<%= offset %>">
   <button data-menu-target="button">
     <div class="w-9 h-9 cursor-pointer">
       <%= render "settings/user_avatar", user: user, variant: :small %>