ray/hermes-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
ray
2026-07-12 10:17:17 -04:00
commit dab5a4ebc6
1424 changed files with 330463 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/software-development/web-ui-repair/references/nav-centering-pattern.md
+65
View File
@@ -0,0 +1,65 @@
# 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.