ray
139 lines
5.6 KiB
Markdown
139 lines
5.6 KiB
Markdown
# Multi-Page Header Redesign — Replication Workflow
|
|
|
|
## Pattern Summary
|
|
|
|
When the user picks a header design variant across all pages of a multi-page static web app, the changes fall into two layers: CSS and HTML. Replicate in order — CSS first (so the HTML has rules to reference), then HTML.
|
|
|
|
## Layer 1: CSS Changes (apply to all pages)
|
|
|
|
### 1a. Change `.header-card` gradient
|
|
|
|
The header card uses `background: linear-gradient(...)` in a `<style>` block. Some pages have multiple `.header-card` definitions at different specificity points — update ALL of them.
|
|
|
|
### 1b. Replace `.nav-link` hover effect
|
|
|
|
The old shine effect (`::before` with horizontal gradient slide) is replaced with an underline indicator (`::after` with width transition):
|
|
|
|
```css
|
|
.nav-link { position: relative; } /* remove overflow:hidden */
|
|
.nav-link::after {
|
|
content: '';
|
|
position: absolute; bottom: 0; left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 0; height: 2px;
|
|
background: white; border-radius: 1px;
|
|
transition: width 0.2s ease;
|
|
}
|
|
.nav-link:hover::after { width: 50%; }
|
|
```
|
|
|
|
### 1c. Active page class
|
|
|
|
```css
|
|
.nav-link.active-page {
|
|
color: white !important;
|
|
font-weight: 600 !important;
|
|
background: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
.nav-link.active-page::after { width: 50%; }
|
|
```
|
|
|
|
### 1d. User avatar ring
|
|
|
|
```css
|
|
.user-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,0.15); }
|
|
```
|
|
|
|
## Layer 2: HTML Changes (per-page, adjust active link)
|
|
|
|
### 2a. Desktop navigation restructure
|
|
|
|
Replace the centered `<div class="hidden lg:flex items-center gap-0.5 mx-auto">` with a `w-full` layout that has brand mark on left, nav links centered, user on right:
|
|
|
|
```html
|
|
<div class="hidden lg:flex items-center gap-6 w-full">
|
|
<!-- Brand (same on all pages) -->
|
|
<a href="index.html" class="flex items-center gap-2.5 flex-shrink-0 group">
|
|
<div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center
|
|
group-hover:bg-white/15 transition-colors">
|
|
<svg class="w-4 h-4 text-white/80" ...>gear icon</svg>
|
|
</div>
|
|
<span class="font-semibold text-sm text-white/90 tracking-tight">ShopProQuote</span>
|
|
</a>
|
|
|
|
<!-- Nav Links (active link changes per page) -->
|
|
<div class="flex items-center gap-1 ml-auto mr-auto">
|
|
<a href="page.html"
|
|
class="nav-link active-page px-3 md:px-4 py-2 text-xs md:text-sm font-medium
|
|
text-white transition-all duration-200">
|
|
...
|
|
</a>
|
|
<!-- inactive links: text-white/60 hover:text-white -->
|
|
<a href="other.html"
|
|
class="nav-link px-3 md:px-4 py-2 text-xs md:text-sm font-medium
|
|
text-white/60 hover:text-white transition-all duration-200">
|
|
...
|
|
</a>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### 2b. User button
|
|
|
|
Replace the old button with a gradient avatar circle + ring:
|
|
|
|
```html
|
|
<button id="user-menu-btn"
|
|
class="flex items-center gap-2 p-1.5 pr-3 rounded-xl
|
|
bg-white/8 hover:bg-white/12 transition-all duration-200 group">
|
|
<div class="w-7 h-7 md:w-8 md:h-8 rounded-full user-avatar
|
|
bg-gradient-to-br from-blue-400 to-blue-600
|
|
flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
|
|
<svg class="w-3.5 h-3.5" ...>person icon</svg>
|
|
</div>
|
|
<div class="hidden md:block text-left">
|
|
<p id="user-email"
|
|
class="text-xs font-medium text-white/90 truncate max-w-32"></p>
|
|
</div>
|
|
<svg class="w-3 h-3 text-white/40 group-hover:text-white/70 transition-colors" ...>
|
|
chevron
|
|
</svg>
|
|
</button>
|
|
```
|
|
|
|
### 2c. Mobile nav links
|
|
|
|
Update styling to match:
|
|
- Inactive: `text-white/60 hover:text-white hover:bg-white/8`
|
|
- Active: `text-white font-semibold` (no `bg-white/20`, no `shadow-sm`)
|
|
- Container border: `border-white/10` (was `border-white/20`)
|
|
|
|
## Replication Order
|
|
|
|
1. **Do one page first** — typically the one the user is looking at
|
|
2. **Verify** — hard refresh, check desktop + mobile
|
|
3. **Replicate CSS changes to other pages** — same rules apply everywhere
|
|
4. **Replicate HTML changes** — adjust ONLY the active link for each page
|
|
5. **Verify ALL pages** — navigate between them to confirm each page's active link highlights correctly
|
|
|
|
## Per-Page Active Link Table
|
|
|
|
| Page file | Active link href | Active page name |
|
|
|-----------|-----------------|-----------------|
|
|
| `index.html` | `index.html` | Dashboard |
|
|
| `repair-orders.html` | `repair-orders.html` | Repair Orders |
|
|
| `appointments.html` | `appointments.html` | Appointments |
|
|
| `customers.html` | `customers.html` | Customers |
|
|
|
|
The active link gets `class="nav-link active-page ..."` and `text-white` (not `text-white/60`). All others get `text-white/60 hover:text-white`.
|
|
|
|
## Pitfalls
|
|
|
|
- **Multiple `.header-card` CSS definitions.** Some pages define `.header-card` in 2-3 different `<style>` blocks within the same file. Update ALL of them — same specificity, later wins.
|
|
- **SVG formatting varies between pages.** Some pages use multi-line SVGs, others use single-line. Match the exact whitespace when crafting patch strings.
|
|
- **Mobile nav active link also needs updating.** Both desktop and mobile nav sections have their own copy of the nav links.
|
|
- **`justify-between` vs `flex` layout.** Pages from different reference builds may use different flex layouts in the header row. Match the existing structure.
|
|
- **Brand mark is identical across all pages.** The exact same HTML can be copied to each page — only the active nav link changes.
|
|
- **Test dark mode too.** The CSS `!important` rules should override both light and dark variants of Tailwind classes.
|