DeCentN2Madness
e5af9cbca2
- relocate header, footer, nav, hero, and page-hero styles into their owning components - move blog index, blog post, team, video, insurance, CTA, and home-section styles out of the global sheet - keep focused on shared primitives such as buttons, cards, links, and list styling - preserve existing layout and responsive behavior while reducing global CSS scope
41 lines
1.9 KiB
Plaintext
41 lines
1.9 KiB
Plaintext
---
|
|
import en from '../data/navigation.en.json';
|
|
import es from '../data/navigation.es.json';
|
|
const { lang = 'en' } = Astro.props;
|
|
const nav = { en, es, ar: en }[lang as 'en' | 'es' | 'ar'] || en;
|
|
const aboutLinks = lang === 'es'
|
|
? [['Equipo', '/team'], ['Carreras', '/careers'], ['Preguntas frecuentes', '/faqs']]
|
|
: [['Team', '/team'], ['Careers', '/careers'], ['FAQ', '/faqs']];
|
|
---
|
|
<nav class="main-nav" aria-label="Main navigation">
|
|
<ul>
|
|
{nav.primary.map((item) => (
|
|
<li class:list={{ 'has-submenu': item.href.endsWith('/about') || item.href.endsWith('/services') }}>
|
|
<a href={item.href}>{item.label}</a>
|
|
{item.href.endsWith('/about') && <ul class="submenu">
|
|
{aboutLinks.map(([label, href]) => <li><a href={href}>{label}</a></li>)}
|
|
</ul>}
|
|
{item.href.endsWith('/services') && <ul class="submenu">
|
|
{nav.services.map((service) => <li><a href={service.href}>{service.label}</a></li>)}
|
|
</ul>}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
|
|
<style>
|
|
.main-nav { margin-inline: auto; }
|
|
.main-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
|
|
.main-nav li { position: relative; }
|
|
.main-nav a { color: var(--color-primary); font-size: .9rem; text-decoration: none; }
|
|
.main-nav a:hover { color: var(--color-accent-strong); }
|
|
.main-nav .submenu { background: white; box-shadow: var(--shadow-md); display: none; gap: 0; left: -1rem; min-width: 180px; padding: .75rem 0; position: absolute; top: 100%; }
|
|
.main-nav .submenu a { display: block; padding: .45rem 1rem; }
|
|
.main-nav li:hover > .submenu, .main-nav li:focus-within > .submenu { display: block; }
|
|
@media (max-width: 950px) {
|
|
.main-nav { display: none; }
|
|
:global(.mobile-nav) .main-nav { display: block; }
|
|
:global(.mobile-nav) .main-nav ul { align-items: flex-start; flex-direction: column; padding: var(--space-md); }
|
|
}
|
|
</style>
|