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

- 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

View File

@@ -0,0 +1,30 @@
---
/**
* MOREMINIMORE - UtilityBar (from v6-utility)
* Extracted from Desktop/moreminomore-mockup-v7-5.html lines 571-589
*
* Top info bar — phone + clock + date + mode indicator + email
* Phone/email pulled from src/content/settings/site.md (single source of truth)
*
* Clock/date are updated by fx-animations.ts → fxClock() (id="fx-time", id="fx-date")
*/
import { getEntry } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
const site = (await getEntry('settings', 'site')) as CollectionEntry<'settings'>;
const phone = site?.data?.phone ?? '080-995-5945';
const email = site?.data?.email ?? 'contact@moreminimore.com';
---
<div id="v6-utility-inner" class="fx-utility-bar">
<div class="fx-utility-bar-left">
<span class="fx-utility-item">📞 <strong>{phone}</strong></span>
<span class="fx-utility-item" id="fx-time">⏱ — : — : —</span>
<span class="fx-utility-item" id="fx-date">📅 — — —</span>
</div>
<div class="fx-utility-bar-right">
<span class="fx-mode-indicator">system</span>
<span class="fx-theme-toggle" id="fx-theme-toggle">◐ auto</span>
<a href={`mailto:${email}`} class="fx-utility-item" style="text-decoration:none">✉ {email}</a>
</div>
</div>