diff --git a/app/components/app_layout_component.html.erb b/app/components/app_layout_component.html.erb deleted file mode 100644 index 922f7046..00000000 --- a/app/components/app_layout_component.html.erb +++ /dev/null @@ -1,79 +0,0 @@ -<%= tag.div class: "flex flex-col lg:flex-row h-dvh lg:h-full bg-surface pt-safe", - data: { - controller: "app-layout", - app_layout_user_id_value: user_id, - app_layout_left_sidebar_class: left_sidebar_classes, - app_layout_right_sidebar_class: right_sidebar_classes, - } do %> - <%# MOBILE - Popout nav menu %> - - - <%# MOBILE - Top nav %> - - - <%# DESKTOP - Left navbar %> - - - <%# DESKTOP - Left sidebar %> - <%= tag.div class: class_names("hidden py-4 overflow-y-auto shrink-0", left_sidebar_classes, "lg:block" => show_left?), data: { app_layout_target: "leftSidebar" } do %> - <%= left_sidebar %> - <% end %> - - <%# SHARED - Main content %> - <%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 py-4 h-full w-full mx-auto max-w-5xl"), data: { app_layout_target: "content" } do %> - - - <%= content %> - <% end %> - - <%# DESKTOP - Right sidebar %> - <%= tag.div class: class_names("hidden h-full overflow-y-auto shrink-0", right_sidebar_classes, "lg:block" => show_right?), data: { app_layout_target: "rightSidebar" } do %> - <%= right_sidebar %> - <% end %> - - <%# MOBILE - Bottom Nav %> - <%= tag.nav class: "lg:hidden bg-surface shrink-0 z-10 pb-2 border-t border-tertiary pb-safe flex justify-around" do %> - <% nav_items.each do |nav_item| %> - <%= nav_item %> - <% end %> - <% end %> -<% end %> diff --git a/app/components/app_layout_component.rb b/app/components/app_layout_component.rb deleted file mode 100644 index 06d0a87c..00000000 --- a/app/components/app_layout_component.rb +++ /dev/null @@ -1,40 +0,0 @@ -class AppLayoutComponent < ViewComponent::Base - renders_many :nav_items, NavItem - renders_one :breadcrumbs - - # Desktop slots - renders_one :left_sidebar - renders_one :right_sidebar - renders_one :desktop_user_menu - - # Mobile slots - renders_one :mobile_sidebar - renders_one :mobile_user_menu - - def initialize(user:) - @user = user - end - - def show_left? - user.show_sidebar? - end - - def show_right? - user.show_ai_sidebar? - end - - def user_id - user.id - end - - def left_sidebar_classes - "w-[320px]" - end - - def right_sidebar_classes - "w-[400px]" - end - - private - attr_reader :user -end diff --git a/app/components/app_layout_component/nav_item.rb b/app/components/app_layout_component/nav_item.rb deleted file mode 100644 index 0f8a2992..00000000 --- a/app/components/app_layout_component/nav_item.rb +++ /dev/null @@ -1,12 +0,0 @@ -class AppLayoutComponent::NavItem < ViewComponent::Base - attr_reader :name, :path, :icon, :icon_custom, :active, :mobile_only - - def initialize(name:, path:, icon:, icon_custom: false, active: false, mobile_only: false) - @name = name - @path = path - @icon = icon - @icon_custom = icon_custom - @active = active - @mobile_only = mobile_only - end -end diff --git a/app/components/app_layout_controller.js b/app/javascript/controllers/app_layout_controller.js similarity index 58% rename from app/components/app_layout_controller.js rename to app/javascript/controllers/app_layout_controller.js index f953a930..58fa0fd5 100644 --- a/app/components/app_layout_controller.js +++ b/app/javascript/controllers/app_layout_controller.js @@ -2,25 +2,31 @@ import { Controller } from "@hotwired/stimulus"; // Connects to data-controller="dialog" export default class extends Controller { - static targets = ["leftSidebar", "rightSidebar", "mobileSidebar"] - static classes = ["leftSidebar", "rightSidebar"] + static targets = ["leftSidebar", "rightSidebar", "mobileSidebar"]; + static classes = ["leftSidebar", "rightSidebar"]; openMobileSidebar() { - this.mobileSidebarTarget.classList.remove("hidden") + this.mobileSidebarTarget.classList.remove("hidden"); } closeMobileSidebar() { - this.mobileSidebarTarget.classList.add("hidden") + this.mobileSidebarTarget.classList.add("hidden"); } toggleLeftSidebar() { - this.#updateUserPreference("show_sidebar", this.leftSidebarTarget.classList.contains("hidden")) - this.leftSidebarTarget.classList.toggle("hidden") + this.#updateUserPreference( + "show_sidebar", + this.leftSidebarTarget.classList.contains("hidden"), + ); + this.leftSidebarTarget.classList.toggle("hidden"); } toggleRightSidebar() { - this.#updateUserPreference("show_ai_sidebar", this.rightSidebarTarget.classList.contains("hidden")) - this.rightSidebarTarget.classList.toggle("hidden") + this.#updateUserPreference( + "show_ai_sidebar", + this.rightSidebarTarget.classList.contains("hidden"), + ); + this.rightSidebarTarget.classList.toggle("hidden"); } #updateUserPreference(field, value) { diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index d74eb8c3..12b44784 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,29 +1,68 @@ -<%= render "layouts/shared/htmldoc" do %> - <%= render AppLayoutComponent.new(user: Current.user) do |app_layout| %> - <% app_layout.with_nav_items([ - { name: "Home", path: root_path, icon: "pie-chart", active: page_active?(root_path) }, - { name: "Transactions", path: transactions_path, icon: "credit-card", active: page_active?(transactions_path) }, - { name: "Budgets", path: budgets_path, icon: "map", active: page_active?(budgets_path) }, - { name: "Assistant", path: chats_path, icon: "icon-assistant", icon_custom: true, active: page_active?(chats_path), mobile_only: true } - ]) %> +<% mobile_nav_items = [ + { name: "Home", path: root_path, icon: "pie-chart", icon_custom: false, active: page_active?(root_path) }, + { name: "Transactions", path: transactions_path, icon: "credit-card", icon_custom: false, active: page_active?(transactions_path) }, + { name: "Budgets", path: budgets_path, icon: "map", icon_custom: false, active: page_active?(budgets_path) }, + { name: "Assistant", path: chats_path, icon: "icon-assistant", icon_custom: true, active: page_active?(chats_path), mobile_only: true } +] %> + +<% desktop_nav_items = mobile_nav_items.reject { |item| item[:mobile_only] } %> + +<%= render "layouts/shared/htmldoc" do %> +
+ + + <%# MOBILE - Top nav %> + - <% app_layout.with_desktop_user_menu do %> - <%= render "users/user_menu", user: Current.user %> - <% end %> + <%# DESKTOP - Left navbar %> + + + <%# DESKTOP - Left sidebar %> + <%= tag.div class: class_names("hidden py-4 overflow-y-auto shrink-0 w-[320px]", "lg:block" => Current.user.show_sidebar?), data: { app_layout_target: "leftSidebar" } do %> <% if content_for?(:sidebar) %> <%= yield :sidebar %> <% else %> @@ -33,7 +72,30 @@ <% end %> <% end %> - <% app_layout.with_right_sidebar do %> + <%# SHARED - Main content %> + <%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 py-4 h-full w-full mx-auto max-w-5xl"), data: { app_layout_target: "content" } do %> + + + <% if content_for?(:page_header) %> + <%= yield :page_header %> + <% end %> + + <%= yield %> + <% end %> + + <%# DESKTOP - Right sidebar %> + <%= tag.div class: class_names("hidden h-full overflow-y-auto shrink-0 w-[400px]", "lg:block" => Current.user.show_ai_sidebar?), data: { app_layout_target: "rightSidebar" } do %> <%= tag.div id: "chat-container", class: class_names("flex flex-col h-full justify-between shrink-0 transition-all duration-300"), data: { controller: "chat hotkey", turbo_permanent: true } do %> @@ -50,21 +112,11 @@ <% end %> <% end %> - <% app_layout.with_breadcrumbs do %> - <% if content_for?(:breadcrumbs) %> - <%= yield :breadcrumbs %> - <% else %> - <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %> + <%# MOBILE - Bottom Nav %> + <%= tag.nav class: "lg:hidden bg-surface shrink-0 z-10 pb-2 border-t border-tertiary pb-safe flex justify-around" do %> + <% mobile_nav_items.each do |nav_item| %> + <%= render "layouts/shared/nav_item", **nav_item %> <% end %> <% end %> - - <%# Main page content %> -
- <% if content_for?(:page_header) %> - <%= yield :page_header %> - <% end %> - - <%= yield %> -
- <% end %> -<% end %> +
+<% end %> \ No newline at end of file diff --git a/app/components/app_layout_component/nav_item.html.erb b/app/views/layouts/shared/_nav_item.html.erb similarity index 81% rename from app/components/app_layout_component/nav_item.html.erb rename to app/views/layouts/shared/_nav_item.html.erb index 6f8854dc..fa7bcf45 100644 --- a/app/components/app_layout_component/nav_item.html.erb +++ b/app/views/layouts/shared/_nav_item.html.erb @@ -1,3 +1,5 @@ +<%# locals:(name:, path:, icon:, icon_custom:, active:, mobile_only: false) %> + <%= link_to path, class: "space-y-1 group block relative pb-1" do %>
<%= 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-nav-indicator" => active) %> @@ -6,7 +8,7 @@ "w-8 h-8 flex items-center justify-center mx-auto rounded-lg", active ? "bg-container shadow-xs text-primary" : "group-hover:bg-container-hover text-secondary" ) do %> - <%= helpers.icon(icon, color: active ? "current" : "default", custom: icon_custom) %> + <%= icon(icon, color: active ? "current" : "default", custom: icon_custom) %> <% end %>
@@ -15,4 +17,4 @@ <%= name %> <% end %> -<% end %> +<% end %> \ No newline at end of file