39 lines
1.3 KiB
Vue
39 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
|
|
withDefaults(
|
|
defineProps<{ brand?: string; hrefs?: string[], links?: string[]; active?: number }>(),
|
|
{ brand: "ZO", hrefs: () => ["/home", "/", "/hearsay", "/legacy"], links: () => ["Haza", "Szülinapok", "Hírek", "Legacy"], active: 0 },
|
|
);
|
|
const emit = defineEmits<{ navigate: [index: number] }>();
|
|
</script>
|
|
|
|
<template>
|
|
<nav
|
|
class="glass glass-static"
|
|
:style="{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 18px 10px 14px', borderRadius: '999px', gap: '16px' }" >
|
|
|
|
<div :style="{ display: 'flex', gap: '24px', fontSize: '13px', fontWeight: 500 }">
|
|
<a
|
|
v-for="(l, i) in links"
|
|
:key="l"
|
|
:href="hrefs[i]"
|
|
|
|
class="aero-text-shadow"
|
|
:style="{
|
|
color: 'var(--t-text)',
|
|
textDecoration: 'none',
|
|
opacity: i === active ? 1 : 0.78,
|
|
borderBottom: i === active ? '2px solid var(--t-accent-2)' : '2px solid transparent',
|
|
paddingBottom: '2px',
|
|
}"
|
|
>{{ l }}</a
|
|
>
|
|
</div>
|
|
<div :style="{ display: 'flex', alignItems: 'center', gap: '12px' }">
|
|
<div class="aero-text-shadow" :style="{ fontSize: '20px', fontWeight: 300, letterSpacing: '0.28em' }">{{ brand }}</div>
|
|
</div>
|
|
|
|
</nav>
|
|
</template>
|
|
|