kunthawat/moreminimore-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(header): add UtilityBar + Marquee + Navigation from v6-nav

Browse Source 
- UtilityBar.astro (v6-utility): phone, clock, date, email from site settings
  Clock updated by fxClock() in src/lib/fx-animations.ts
- Marquee.astro (v6-marquee): log ticker with 4 entries (animated horizontally)
  Content duplicated for seamless loop
- Navigation.astro (v6-nav): REPLACED legacy. Adds 'บริการ' dropdown
  (4 services) + 'บทความ' link per plan round 2. Click-to-toggle on mobile.
- src/data/nav.ts: single source of truth for mainLinks + servicesDropdown
- fx-system.css: +27 lines for dropdown styles + active link underline
  (v6-nav originally had no dropdown — we added per spec)

Refs: .hermes/plans/2026-06-13_124000-moreminimore-v7-5-migration.md Task 2.1-2.4
This commit is contained in:
Kunthawat Greethong
2026-06-13 17:47:40 +07:00
parent 582998a340
commit 1f859921cb
5 changed files with 197 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/styles/fx-system.css
View File

@@ -482,4 +482,30 @@ img{max-width:100%;display:block}
.fx-btn.coral:hover{background:linear-gradient(135deg,var(--ink) 0%,var(--coral) 100%)}
.fx-marquee-track{animation:none}
.fx-faq-a::after{display:none}
.fx-hero::after{display:none}
.fx-hero::after{display:none}
/* ============================================
NAV DROPDOWN ENHANCEMENT (added 2026-06-13, plan round 2)
v6-nav didn't have a dropdown originally; we added
'บริการ' dropdown per user spec. Active link styling too.
============================================ */
.fx-nav-menu{position:relative}
.fx-nav-menu li{position:relative}
.fx-nav-dropdown{position:absolute;top:100%;left:0;min-width:240px;background:var(--paper);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);list-style:none;padding:8px 0;margin:0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity 0.18s,transform 0.18s,visibility 0.18s;z-index:60}
.fx-nav-has-dropdown:hover>.fx-nav-dropdown,
.fx-nav-dropdown-open>.fx-nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.fx-nav-dropdown li{margin:0}
.fx-nav-dropdown a{display:block;padding:10px 18px;font:600 12px/1.3 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.3px;color:var(--ink);text-decoration:none;transition:background 0.15s,color 0.15s}
.fx-nav-dropdown a:hover{background:var(--brand-yellow);color:var(--ink)}
.fx-nav-dropdown a.active{background:var(--coral);color:#FAFAFA}
.fx-nav-menu a.active{color:var(--coral)}
.fx-nav-menu a.active::after{content:'';display:block;height:2px;background:var(--coral);margin-top:4px}
@media (max-width:768px){
.fx-nav-inner{flex-direction:column;align-items:flex-start;padding:12px 16px}
.fx-nav-menu{flex-direction:column;width:100%;gap:0}
.fx-nav-menu>li{width:100%;border-bottom:1px solid var(--line-2)}
.fx-nav-menu>li>a{display:block;padding:12px 0}
.fx-nav-dropdown{position:static;box-shadow:none;border:none;background:var(--paper-2);opacity:1;visibility:visible;transform:none;max-height:0;overflow:hidden;padding:0;transition:max-height 0.25s,padding 0.25s}
.fx-nav-dropdown-open>.fx-nav-dropdown{max-height:400px;padding:8px 0}
.fx-nav-cta{margin-top:12px;align-self:flex-start}
}