Suha Siddiqui
60 lines
972 B
Vue
60 lines
972 B
Vue
<template>
|
|
<nav>
|
|
<Dropdown title="Level" :items="levels" />
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import Dropdown from './Dropdown.vue';
|
|
export default {
|
|
name: 'Navbar',
|
|
components: {
|
|
Dropdown
|
|
},
|
|
data () {
|
|
return {
|
|
levels: [
|
|
{
|
|
title: 'Beginner',
|
|
link: '#'
|
|
},
|
|
{
|
|
title: 'Advanced',
|
|
link:'#'
|
|
},
|
|
{
|
|
title: 'Original',
|
|
link: '#'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: left;
|
|
}
|
|
nav .menu-item {
|
|
color: #71bfed;
|
|
background-color: rgb(79, 76, 76);
|
|
padding: 10px 20px;
|
|
position: relative;
|
|
text-align: center;
|
|
border-bottom: 3px solid transparent;
|
|
display: flex;
|
|
transition: 0.4s;
|
|
}
|
|
nav .menu-item.active,
|
|
nav .menu-item:hover {
|
|
background-color: rgb(39, 38, 38);
|
|
border-bottom-color: #71bfed;
|
|
}
|
|
nav .menu-item a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
</style> |