mirror of
https://github.com/Lissy93/dashy.git
synced 2025-12-06 08:34:14 +01:00
43 lines
914 B
Vue
43 lines
914 B
Vue
<template>
|
|
<nav id="nav">
|
|
<router-link to="/" class="nav-item">Home</router-link>
|
|
<router-link to="/about" class="nav-item">About</router-link>
|
|
</nav>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Nav',
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
@import '../../src/styles/color-pallet.scss';
|
|
|
|
nav {
|
|
display: flex;
|
|
align-items: center;
|
|
.nav-item {
|
|
display: inline-block;
|
|
padding: 0.75rem 0.5rem;
|
|
margin: 0.5rem;
|
|
outline: none;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background: #607d8b33;
|
|
-webkit-box-shadow: 1px 1px 2px #232323;
|
|
box-shadow: 1px 1px 2px #232323;
|
|
color: $ascent;
|
|
text-decoration: none;
|
|
&:hover {
|
|
background: #607d8b1c;
|
|
box-shadow: 1px 4px 3px #232323;
|
|
}
|
|
}
|
|
.router-link-active {
|
|
border: 1px solid $ascent;
|
|
}
|
|
}
|
|
</style>
|