mirror of
https://github.com/muerwre/muerwre.github.io.git
synced 2025-04-25 02:46:39 +07:00
44 lines
891 B
Vue
44 lines
891 B
Vue
<template>
|
|
<header :class="$style.header">
|
|
<NuxtLink to="/" :activeClass="$style.active">Home</NuxtLink>
|
|
<NuxtLink to="/about" :activeClass="$style.active">About</NuxtLink>
|
|
<NuxtLink to="/contacts" :activeClass="$style.active">Contacts</NuxtLink>
|
|
</header>
|
|
</template>
|
|
|
|
<script lang="ts" setup></script>
|
|
|
|
<style lang="scss" module>
|
|
.header {
|
|
text-align: left;
|
|
padding: 22px 0;
|
|
|
|
a {
|
|
color: var(--color-text);
|
|
text-decoration: none;
|
|
padding: 0 25px 0 0;
|
|
position: relative;
|
|
|
|
&.active {
|
|
color: var(--color-link);
|
|
|
|
&::after {
|
|
right: 28px;
|
|
left: 3px;
|
|
background: var(--color-link);
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
background: var(--color-text);
|
|
position: absolute;
|
|
height: 2px;
|
|
bottom: -6px;
|
|
left: 50%;
|
|
right: 50%;
|
|
transition: all 0.25s;
|
|
}
|
|
}
|
|
}
|
|
</style>
|