Documentation

Navigation Restructure: Sidebar → Navbar Dropdown

Date: February 25, 2026 Inspired by: Deel's top-navigation pattern (see attached screenshot) Goal: Replace the left sidebar with a navbar-centric navigation using a "Finanças" dropdown, move branding + exchange rate to the navbar left side, and adopt a gray-only color palette.

Current State

  • Sidebar (app/views/shared/_sidebar.html.erb): Fixed 260px left panel with:
    • Logo + "Lifehub" branding + "Gestão Patrimonial"
    • USD/BRL exchange rate badge
    • Navigation links (Dashboard, Contas, Despesas, Metas, Investimentos, Analytics, Simulador, Planejamento, Configurações)
    • Bottom cards: current date, Patrimônio Total
  • Navbar (app/views/shared/_navbar.html.erb): Top bar with:
    • Mobile hamburger (left)
    • Right-side actions: hide balances, dark mode, notifications, user profile dropdown
  • Footer Nav (app/views/shared/_footer_nav.html.erb): Mobile bottom tab bar
  • Layout (app/views/layouts/application.html.erb): flex h-dvh with sidebar + content column

Target State (Deel-inspired)

Navbar Layout (left → center → right):

┌─────────────────────────────────────────────────────────────┐
│ [Logo] Lifehub  USD/BRL R$5.87  │  [Finanças ▼]  │  🔔 👤 │
└─────────────────────────────────────────────────────────────┘

Left section:

  • Lifehub logo (small icon) + "Lifehub" text
  • USD/BRL exchange rate badge (compact, inline)

Center section:

  • "Finanças" dropdown button → opens dropdown with all nav links
  • Each link has its icon + label (like Deel's Finance dropdown)

Right section:

  • Hide balances toggle
  • Dark mode toggle
  • Notification bell
  • User profile dropdown (existing)

Dropdown Content (Finanças):

┌──────────────────────────┐
│ ◻ Overview               │  (was "Dashboard")
│ ◻ Contas                 │
│ ◻ Despesas               │
│ ◻ Metas                  │
│ ◻ Investimentos          │
│ ◻ Analytics              │
│ ◻ Simulador              │
│ ◻ Planejamento           │
│ ─────────────────────────│
│ ◻ Configurações          │
└──────────────────────────┘

Visual Style

  • Backgrounds: Shades of gray only (#0d1117, #161b22, #1c2128, #21262d)
  • Borders: Gray tones (rgba(255,255,255,0.06) → rgba(255,255,255,0.08))
  • No colored backgrounds on nav items; white/gray text with subtle hover
  • Active item: subtle gray highlight + white text (no blue dot)
  • Dropdown: Dark gray card with subtle border

Implementation Steps

Step 1: Rename "Dashboard" → "Overview"

Files:

  • app/views/shared/_sidebar.html.erb — label change
  • app/views/shared/_sidebar_links.html.erb — label change
  • app/views/shared/_footer_nav.html.erb — label change
  • config/locales/en.yml — add nav.overview key
  • Any view referencing "Dashboard" as a page title

Step 2: Create Navbar Finance Dropdown Stimulus Controller

File: app/javascript/controllers/finance_dropdown_controller.js

  • Manages open/close of the "Finanças" dropdown
  • Closes on outside click and Escape key
  • Uses CSS transitions for smooth animation

Step 3: Restructure Navbar (_navbar.html.erb)

Left section:

  • Logo icon + "Lifehub" brand text
  • Exchange rate badge (compact inline version)

Center section:

  • "Finanças" dropdown button with chevron
  • Dropdown panel with all navigation links + icons

Right section:

  • Keep existing: hide balances, dark mode, notifications, user profile

Step 4: Remove Sidebar

Files:

  • app/views/shared/_sidebar.html.erb — gut contents, keep only mobile version or remove entirely
  • app/views/layouts/application.html.erb — remove sidebar render, simplify layout to single column
  • app/javascript/controllers/mobile_sidebar_controller.js — repurpose or remove

Step 5: Update Layout

File: app/views/layouts/application.html.erb

  • Remove flex row layout (was sidebar + content)
  • Use simple single-column layout: navbar → main content → footer
  • Main content takes full width

File: app/views/shared/_footer_nav.html.erb

  • Rename Dashboard → Overview
  • Keep compact mobile navigation

Step 7: Update CSS Variables / Gray Color Scheme

File: app/assets/tailwind/application.css

  • Update --bg-sidebar variable or introduce --bg-navbar, --bg-dropdown
  • Ensure all navigation elements use gray-only palette

Step 8: Update Helper Methods

File: app/helpers/application_helper.rb

  • Add navbar_nav_item helper for dropdown items
  • Keep sidebar_icon helper (reuse for dropdown icons)

Step 9: Test & Verify

  • Run bin/ci to ensure no regressions
  • Verify responsive behavior (mobile hamburger → dropdown)
  • Check dark/light mode consistency

Files Modified

File Action
app/views/layouts/application.html.erb Remove sidebar, simplify layout
app/views/shared/_navbar.html.erb Complete rewrite with dropdown
app/views/shared/_sidebar.html.erb Remove (keep mobile drawer optionally)
app/views/shared/_footer_nav.html.erb Rename Dashboard → Overview
app/views/shared/_sidebar_links.html.erb Remove or keep for legacy
app/helpers/application_helper.rb Add navbar_nav_item helper
app/javascript/controllers/finance_dropdown_controller.js New controller
app/assets/tailwind/application.css Update CSS variables
config/locales/en.yml Add overview translation
Dashboard views Update page titles

Notes

  • The mobile experience will use the footer tab bar (already exists) plus a hamburger → full-screen nav overlay
  • The "Patrimônio Total" card from the sidebar bottom will be removed from nav; it's already on the dashboard page
  • The "Hoje" date card will be removed from nav as well
  • Organization switching remains in the sidebar area or moves to user profile dropdown