Mobile responsive template preparation (#2071)

* Mobile responsive template

* Fix sidebar mobile conflict

* Lint fix

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",

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" 
+  <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,12 +44,19 @@
         </li>
       </ul>
 
-      <div class="pl-2 mt-auto mx-auto">
+      <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) %>
@@ -43,14 +68,14 @@
         <% end %>
       <% end %>
 
-    <%= tag.main class: class_names("px-10 py-4 grow h-full", require_upgrade? ? "relative overflow-hidden" : "overflow-y-auto") do %>
+      <%= 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-10 h-full w-full z-50">
+          <div class="absolute inset-0 px-3 lg: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 %>
+        <%= 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 %>
@@ -68,7 +93,7 @@
       <%# 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"),
+                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? %>
@@ -82,4 +107,25 @@
         <% 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 %>

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>

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 %>

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) %>

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 %>