This repository has been archived on 2021-09-06. You can view files and clone it, but cannot push or open issues or pull requests.
vuejs_course/2021-03-27_routing-01-start.../src/components/nav/TheNavigation.vue

59 lines
834 B
Vue

<template>
<header>
<nav>
<ul>
<li>
<router-link to="/teams">Teams</router-link>
</li>
<li>
<router-link to="/users">Users</router-link>
</li>
</ul>
</nav>
</header>
</template>
<style scoped>
header {
width: 100%;
height: 5rem;
background-color: #11005c;
}
nav {
height: 100%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
li {
margin: 0 2rem;
}
a {
text-decoration: none;
background: transparent;
border: 1px solid transparent;
cursor: pointer;
color: white;
padding: 0.5rem 1.5rem;
display: inline-block;
}
a:hover,
a:active,
a.router-link-active {
color: #f1a80a;
border-color: #f1a80a;
background-color: #1a037e;
}
</style>