hermes-config/skills/software-development/web-ui-repair/references/nav-centering-pattern.md

Nav Centering Pattern — 4-Page App

Applied: Jun 2026 session

Applied to Dashboard (index.html), Repair Orders, Customers, Appointments.

Before Structure

<div class="flex items-center justify-between py-2 md:py-2.5">
  <!-- Left: Mobile Hamburger + Desktop Nav Links -->
  <div class="flex items-center gap-0.5">
    <button id="mobile-menu-btn" class="lg:hidden p-2...">☰</button>
    <div class="hidden lg:flex items-center gap-0.5">
      ... nav links ...
    </div>
  </div>
  <!-- Mobile Page Title -->
  <span class="lg:hidden text-sm font-semibold text-white">Page</span>
  <!-- Right: Controls -->
  <div class="flex items-center gap-1.5 md:gap-2">
    ... user menu ...
  </div>
</div>

After Structure

<div class="flex items-center py-2 md:py-2.5">
  <!-- Left: Mobile Hamburger (hidden on desktop) -->
  <div class="flex-1 flex lg:hidden">
    <button id="mobile-menu-btn" class="p-2...">☰</button>
  </div>
  <!-- Desktop Navigation (centered) -->
  <div class="hidden lg:flex items-center gap-0.5 mx-auto">
    ... nav links ...
  </div>
  <!-- Mobile Page Title -->
  <span class="lg:hidden text-sm font-semibold text-white">PageName</span>
  <!-- Right: Controls -->
  <div class="flex-1 flex justify-end items-center gap-1.5">
    ... user menu ...
  </div>
</div>

Per-Page Details

Page	Mobile Title	Active Nav Link
index.html	Dashboard	Dashboard
repair-orders.html	Repair Orders	Repair Orders
customers.html	Customers	Customers
appointments.html	Appointments	Appointments

What Changed Per Page

There are 3 structural differences to apply per page (use justify-between as search anchor):

1. Outer flex row: justify-between → removed. The flex-1 spacers handle the spacing.
2. Left div: flex items-center gap-0.5 → flex-1 flex lg:hidden. Hamburger button loses its own lg:hidden class.
3. Right controls div: flex items-center gap-1.5 md:gap-2 → flex-1 flex justify-end items-center gap-1.5.
4. Desktop nav div: Add mx-auto to the existing classes: hidden lg:flex items-center gap-0.5 mx-auto.
5. Stray closing div: The old left wrapper (flex items-center gap-0.5) used to have a </div> that closed it. With the new structure, that closing </div> becomes orphaned — remove it. It's usually right before the Mobile Page Title span.