ray
66 lines
2.4 KiB
Markdown
66 lines
2.4 KiB
Markdown
# 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.
|