Maybe/app/views/budgets/_budget_header.html.erb

<%# locals: (budget:, previous_budget:, next_budget:, latest_budget:) %>

<div class="flex items-center gap-1 mb-4">
  <div class="flex items-center gap-2">
    <% if @previous_budget %>
      <%= link_to budget_path(@previous_budget) do %>
        <%= lucide_icon "chevron-left" %>
      <% end %>
    <% else %>
      <%= lucide_icon "chevron-left", class: "text-gray-400" %>
    <% end %>

    <% if @next_budget %>
      <%= link_to budget_path(@next_budget) do %>
        <%= lucide_icon "chevron-right" %>
      <% end %>
    <% else %>
      <%= lucide_icon "chevron-right", class: "text-gray-400" %>
    <% end %>
  </div>

  <div data-controller="menu" data-menu-placement-value="bottom-start">
    <%= tag.button data: { menu_target: "button" }, class: "flex items-center gap-1 hover:bg-gray-50 rounded-md p-2" do %>
      <span class="text-gray-900 font-medium"><%= @budget.name %></span>
      <%= lucide_icon "chevron-down", class: "w-5 h-5 shrink-0 text-gray-500" %>
    <% end %>

    <div data-menu-target="content" class="hidden z-10">
      <%= render "budgets/picker", family: Current.family, year: Date.current.year %>
    </div>
  </div>

  <div class="ml-auto">
    <% if @budget.current? %>
      <span class="border border-alpha-black-200 text-gray-900 text-sm font-medium px-3 py-2 rounded-lg">Today</span>
    <% else %>
      <%= link_to "Today", budget_path(@latest_budget), class: "btn btn--outline" %>
    <% end %>
  </div>
</div>