Style tabs, render turbo frames.

app/assets/stylesheets/application.tailwind.css

@@ -41,6 +41,27 @@
     border-radius: 0.5rem;
     color: #2b2b2b;
   }
+
+  .active-toolbar-tab {
+    background-color: white;
+    display: inline-block;
+    padding: 16px;
+    color: rgb(107 33 168);
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+
+  .inactive-toolbar-tab {
+    display: inline-block;
+    padding: 16px;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+
+  .inactive-toolbar-tab:hover {
+    color: rgb(75 85 99);
+    background-color: rgb(249 250 251);
+  }
 }
 
 

app/controllers/dashboard_controller.rb

@@ -4,6 +4,10 @@ class DashboardController < ApplicationController
 
   def index
     build_dashboard_variables!
+    respond_to do |format|
+      format.turbo_stream
+      format.html
+    end
   end
 
   def switch_taxable_income

app/views/components/_toolbar.html.erb

@@ -1,17 +1,19 @@
-<ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200">
-  <li class="mx-auto">
-    <a href="<%= root_path %>" aria-current="page" class="inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active">Budget Calculator</a>
-  </li>
-  <li class="mx-auto">
-    <%= link_to "Federal Tax Brackets", federal_tax_brackets_path, data: { turbo_stream: true }, class: "inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50" %>
-  </li>
-  <li class="mx-auto">
-    <a href="#" class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50">State Income Tax</a>
-  </li>
-  <li class="mx-auto">
-    <a href="#" class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50">Incomes</a>
-  </li>
-  <li class="mx-auto">
-    <a href="#"  class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50">Fixed Expenses</a>
-  </li>
-</ul>
+<%= turbo_frame_tag "dashboard_toolbar" do %>
+  <ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200">
+    <li class="mx-auto">
+      <%= link_to "Budget Calculator", root_path, data: { turbo_stream: true }, class: active_tab == :budget_calculator ? "active-toolbar-tab" : "inactive-toolbar-tab" %>
+    </li>
+    <li class="mx-auto">
+      <%= link_to "Federal Tax Brackets", federal_tax_brackets_path, data: { turbo_stream: true }, class: active_tab == :federal_tax_brackets ? "active-toolbar-tab" : "inactive-toolbar-tab" %>
+    </li>
+    <li class="mx-auto">
+      <a href="#" class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50">State Income Tax</a>
+    </li>
+    <li class="mx-auto">
+      <a href="#" class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50">Incomes</a>
+    </li>
+    <li class="mx-auto">
+      <a href="#"  class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50">Fixed Expenses</a>
+    </li>
+  </ul>
+<% end %>

app/views/dashboard/_index.html.erb

@@ -1,11 +1,5 @@
 <%= turbo_frame_tag "primary_frame" do %>
   <div class="min-h-full">
-    <div class="primary-card">
-      <div class="mx-auto px-4 py-6 sm:px-6 lg:px-8">
-        <%= render partial: "components/toolbar" %>
-      </div>
-    </div>
-
     <div class="primary-card">
       <div class="mx-auto py-6 sm:px-6 lg:px-8">
         <div class="grid grid-cols-3">
@@ -95,5 +89,5 @@
         <%= render partial: "shared/total_costs", locals: { total_cost: @total_cost } %>
       </div>
     </div>
-  </div>
-<% end %>
+  <% end %>
+</div>

app/views/dashboard/index.html.erb

@@ -1 +1,2 @@
+<%= render partial: "components/toolbar", locals: { active_tab: :budget_calculator }  %>
 <%= render partial: "dashboard/index" %>

app/views/dashboard/index.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.replace "primary_frame", partial: "dashboard/index" %>
+<%= turbo_stream.replace "dashboard_toolbar", partial: "components/toolbar", locals: { active_tab: :budget_calculator } %>

app/views/federal_tax_brackets/_index.html.erb

@@ -1,17 +1,30 @@
-<%= turbo_frame_tag :federal_tax_brackets do %>
-  <div class="primary-card">
-    <div class=" py-6 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-7">
-        <% tax_headings = ["Filing Status", "Tier", "From", "To", "Rate", "Cumulative"] %>
-        <% tax_headings.each do |tax_heading| %>
-          <div>
-            <strong><%= tax_heading %></strong>
+<%= turbo_frame_tag "primary_frame" do %>
+  <%= turbo_frame_tag :federal_tax_brackets do %>
+    <div class="min-h-full">
+      <div class="primary-card">
+        <div class="mx-auto py-6 sm:px-6 lg:px-8">
+          <div class="flex flex-row">
+            <h1 class="font-bold text-4xl mr-4">Federal Tax Brackets</h1>
+            <%= link_to 'New federal tax bracket', new_federal_tax_bracket_path, class: "rounded-lg py-2 px-5 bg-blue-600 text-white block font-medium" %>
           </div>
-        <% end %>
-        <div> </div>
+        </div>
       </div>
 
-      <%= render @federal_tax_brackets %>
+      <div class="primary-card">
+        <div class="mx-auto py-6 sm:px-6 lg:px-8">
+          <div class="grid grid-cols-7">
+            <% tax_headings = ["Filing Status", "Tier", "From", "To", "Rate", "Cumulative"] %>
+            <% tax_headings.each do |tax_heading| %>
+              <div>
+                <strong><%= tax_heading %></strong>
+              </div>
+            <% end %>
+            <div> </div>
+          </div>
+
+          <%= render @federal_tax_brackets %>
+        </div>
+      </div>
     </div>
-  </div>
+  <% end %>
 <% end %>

app/views/federal_tax_brackets/index.html.erb

@@ -3,12 +3,5 @@
     <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
   <% end %>
 
-  <div class="primary-card">
-    <div class="flex flex-row py-6 sm:px-6 lg:px-8">
-      <h1 class="font-bold text-4xl mr-4">Federal Tax Brackets</h1>
-      <%= link_to 'New federal tax bracket', new_federal_tax_bracket_path, class: "rounded-lg py-2 px-5 bg-blue-600 text-white block font-medium" %>
-    </div>
-  </div>
-
   <%= render partial: "federal_tax_brackets/index" %>
 </div>

app/views/federal_tax_brackets/index.turbo_stream.erb

@@ -1 +1,2 @@
-<%= turbo_stream.replace "primary_frame", partial: "federal_tax_brackets/index" %>
+<%= turbo_stream.replace "primary_frame", partial: "federal_tax_brackets/index" %>
+<%= turbo_stream.replace "dashboard_toolbar", partial: "components/toolbar", locals: { active_tab: :federal_tax_brackets } %>