131 lines
2.5 KiB
Vue
131 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { RouterLink } from "vue-router";
|
|
import NavToggle from "@/components/NavToggle.vue";
|
|
|
|
interface Props {
|
|
isActive: boolean;
|
|
}
|
|
|
|
interface Route {
|
|
href: string;
|
|
title: string;
|
|
}
|
|
|
|
const routerLinks: Array<Route> = [
|
|
{ href: "/", title: "Home" },
|
|
{ href: "/anatomy", title: "Anatomy" },
|
|
{ href: "/career-path", title: "Career Path" },
|
|
];
|
|
|
|
const props = defineProps<Props>();
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="navigation" :class="{ open: props.isActive }">
|
|
<div class="navigation__background" @click="$emit('selected')"></div>
|
|
|
|
<NavToggle class="navigation__toggle" @click="$emit('selected')" />
|
|
|
|
<ul class="navigation__list">
|
|
<li
|
|
class="navigation__item"
|
|
v-for="(route, idx) in routerLinks"
|
|
:key="idx"
|
|
>
|
|
<RouterLink :to="route.href" @click="$emit('selected')">
|
|
{{ route.title }}
|
|
</RouterLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.navigation {
|
|
position: fixed;
|
|
z-index: 9000;
|
|
|
|
&__background {
|
|
position: fixed;
|
|
|
|
background-color: rgba(#000, 0);
|
|
backdrop-filter: blur(0rem);
|
|
|
|
transition: 1s;
|
|
}
|
|
|
|
&.open &__background {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
background-color: rgba(#000, 0.75);
|
|
backdrop-filter: blur(0.25rem);
|
|
}
|
|
|
|
&__toggle {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 9000;
|
|
}
|
|
|
|
&.open &__toggle {
|
|
display: flex;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
&__list {
|
|
background-color: var(--color-navigation-background);
|
|
width: var(--navigation-width);
|
|
|
|
list-style: none;
|
|
|
|
margin: 0;
|
|
padding: 3.5rem 0 0 0;
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: -100vw;
|
|
|
|
transition: left ease-in-out 0.4s;
|
|
}
|
|
|
|
&.open &__list {
|
|
left: 0;
|
|
}
|
|
|
|
&__item {
|
|
font-size: var(--navigation-item-font-size);
|
|
line-height: var(--navigation-item-line-height);
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
font-weight: bold;
|
|
color: var(--color-router-link);
|
|
padding: 0 var(--container-spacing-right-safe) 0
|
|
var(--container-spacing-left-safe);
|
|
|
|
box-shadow: inset 0 0 0 0 var(--color-link-text-underline);
|
|
|
|
&:hover {
|
|
color: var(--color-router-link-hover);
|
|
box-shadow: inset var(--navigation-width) 0 0 0 var(--color-router-link);
|
|
}
|
|
|
|
&:before {
|
|
content: "👉";
|
|
font-size: 2rem;
|
|
margin: 0 1rem 0 0;
|
|
}
|
|
|
|
&.router-link-exact-active {
|
|
color: var(--color-router-link-active);
|
|
}
|
|
}
|
|
}
|
|
</style>
|