Maybe/app/views/layouts/_sidebar.html.erb

<div class="flex items-center justify-between">
  <%= link_to root_path do %>
    <%= image_tag "logo.svg", alt: "Maybe", class: "h-[22px]" %>
  <% end %>
  <div id="user-menu" data-controller="menu">
    <button data-menu-target="button">
      <div class="w-9 h-9">
        <%= render "settings/user_avatar", user: Current.user %>
      </div>
    </button>
    <div data-menu-target="content" class="hidden absolute w-[240px] z-10 left-[255px] top-[72px] bg-white rounded-sm shadow-xs border border-alpha-black-25">
      <div class="p-3 flex items-center gap-3">
        <div class="w-9 h-9 shrink-0">
          <%= render "settings/user_avatar", user: Current.user %>
        </div>

        <div class="overflow-hidden text-ellipsis">
          <span class="text-gray-900 font-medium text-sm"><%= Current.user.display_name %></span>
          <% if Current.user.display_name != Current.user.email %>
            <span class="text-gray-500 text-sm"><%= Current.user.email %></span>
          <% end %>
        </div>
      </div>
      <div class="border-t border-b border-alpha-black-100 p-1">
        <%= link_to settings_profile_path(return_to: request.fullpath), class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
          <%= lucide_icon("settings", class: "w-5 h-5 text-gray-500 shrink-0") %>
          <span class="text-gray-900 text-sm">Settings</span>
        <% end %>
        <div class="flex justify-between items-center gap-2">
          <div class="flex items-center gap-2 rounded-lg px-3 py-2">
            <%= lucide_icon("app-window", class: "w-5 h-5 text-gray-500 shrink-0") %>
            <div>
              <span class="text-gray-900 text-sm">Demo mode</span>
              <span class="text-gray-500 text-xs block">Coming soon...</span>
            </div>
          </div>
          <%# TODO: This will be a form toggle when implemented %>
          <div class="relative inline-block cursor-not-allowed" title="Coming soon...">
            <label class="cursor-not-allowed block bg-gray-100 w-9 h-5 rounded-full after:content-[''] after:block after:absolute after:top-0.5 after:left-0.5 after:bg-white after:w-4 after:h-4 after:rounded-full after:transition-transform after:duration-300 after:ease-in-out peer-checked:bg-green-600 peer-checked:after:translate-x-4"></label>
          </div>
        </div>
      </div>
      <div class="border-t border-b border-alpha-black-100 p-1">
        <%= link_to changelog_path, class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
          <%= lucide_icon("box", class: "w-5 h-5 text-gray-500 shrink-0") %>
          <span class="text-gray-900 text-sm">Changelog</span>
        <% end %>
        <%= link_to feedback_path, class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
          <%= lucide_icon("megaphone", class: "w-5 h-5 text-gray-500 shrink-0") %>
          <span class="text-gray-900 text-sm">Feedback</span>
        <% end %>
        <% if self_hosted? %>
          <%= link_to "https://link.maybe.co/discord", class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
            <%= lucide_icon("message-square-more", class: "w-5 h-5 text-gray-500 shrink-0") %>
            <span class="text-gray-900 text-sm">Contact</span>
          <% end %>
        <% else %>
          <%= link_to "mailto:hello@maybefinance.com", class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2", onclick: "Intercom('showNewMessage'); return false;" do %>
            <%= lucide_icon("message-square-more", class: "w-5 h-5 text-gray-500 shrink-0") %>
            <span class="text-gray-900 text-sm">Contact</span>
          <% end %>
        <% end %>
      </div>
      <div class="p-1">
        <%= button_to session_path(Current.session), method: :delete, class: "w-full text-red-400 flex gap-1 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
          <%= lucide_icon("log-out", class: "w-5 h-5 shrink-0") %>
          <span class="text-sm">Logout</span>
        <% end %>
      </div>
    </div>
  </div>
</div>
<nav>
  <ul class="mt-6 space-y-1">
    <li>
      <%= sidebar_link_to t(".dashboard"), root_path, icon: "layout-grid" %>
    </li>
    <li>
      <%= sidebar_link_to t(".accounts"), summary_accounts_path, icon: "layers" %>
    </li>
    <li>
      <%= sidebar_link_to t(".transactions"), transactions_path, icon: "credit-card" %>
    </li>
  </ul>
</nav>
<div class="flex flex-col mt-6">
  <div class="flex items-center justify-between px-3 py-2 mb-2">
    <div class="flex items-center gap-2 text-xs uppercase text-gray-500">
      <%= link_to accounts_path, class: "text-xs uppercase text-gray-500 font-bold tracking-wide" do %>
        <%= t(".portfolio") %>
      <% end %>
      <span class="font-bold tracking-wide">&bull;</span>

      <%= form_with url: list_accounts_path, method: :get, data: { controller: Current.family.accounts.any? ? "auto-submit-form" : nil, turbo_frame: "account-list" } do |form| %>
        <%= period_select form: form, selected: "last_30_days", classes: "w-full border-none pl-2 pr-7 text-xs bg-transparent gap-1 cursor-pointer font-semibold tracking-wide focus:outline-none focus:ring-0" %>
      <% end %>
    </div>
    <%= link_to new_account_path, id: "sidebar-new-account", class: "block hover:bg-gray-100 font-semibold text-gray-900 flex items-center rounded p-1", title: t(".new_account"), data: { turbo_frame: "modal" } do %>
      <%= lucide_icon("plus", class: "w-5 h-5 text-gray-500") %>
    <% end %>
  </div>

  <%= turbo_frame_tag "account-list", target: "_top" do %>
    <% if Current.family.accounts.any? %>
      <% account_groups.each do |group| %>
        <%= render "accounts/account_list", group: group %>
      <% end %>
    <% else %>
      <%= link_to new_account_path, class: "flex items-center min-h-10 gap-4 px-3 py-2 mb-1 text-gray-500 text-sm font-medium rounded-[10px] hover:bg-gray-100", data: { turbo_frame: "modal" } do %>
        <%= lucide_icon("plus", class: "w-5 h-5") %>
        <%= tag.p t(".new_account") %>
      <% end %>
    <% end %>
  <% end %>
</div>