# Nav Centering Pattern — 4-Page App

## Applied: Jun 2026 session

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

## Before Structure

```html
<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

```html
<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.