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:
30
src/components/UtilityBar.astro
Normal file
30
src/components/UtilityBar.astro
Normal 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>
|
||||
Reference in New Issue
Block a user