opdavies/rebuilding-bartik
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add more links

Browse source
This commit is contained in:
Oliver Davies 2018-11-20 02:26:07 +00:00
parent 151f55559c
commit 30e4411792
2 changed files with 52 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -1,4 +1,4 @@
# tailwind-bartik
# vue-tailwind-bartik
## Project setup
```

55
src/components/MainMenu.vue
View file

@ -15,10 +15,24 @@
</div>
</button>
<div class="container mx-auto px-4">
<nav class="p-1 md:p-0 sm:block" :class="[ open ? 'block' : 'hidden' ]">
<a href="#0" class="inline-block text-sm no-underline text-black bg-white px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg w-full sm:w-1/3 md:w-auto sm:text-center">Home</a>
</nav>
<div class="container mx-auto px-4 sm:block" :class="[ open ? 'block' : 'hidden' ]">
<div class="mt-2 sm:mt-0">
<nav class="flex flex-wrap pb-1 md:p-0 -mx-3 sm:-mx-0">
<div
class="px-1 sm:pl-0 mb-1 md:mb-0 inline-block w-full sm:w-1/3 md:w-auto"
:key="link.title"
v-for="link in links"
>
<a
class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center"
:class="[ link.active ? 'bg-white' : 'bg-blue-lighter hover:bg-white' ]"
:href="link.href"
>
{{ link.title }}
</a>
</div>
</nav>
</div>
</div>
</div>
</template>
@ -28,6 +42,39 @@
data: function () {
return {
open: false,
links: [
{
title: 'Home',
href: '#0',
active: true,
},
{
title: 'Drupal',
href: 'https://www.drupal.org',
active: false,
},
{
title: 'Vue.js',
href: 'https://vuejs.org',
active: false,
},
{
title: 'Tailwind CSS',
href: 'https://tailwindcss.com',
active: false,
},
{
title: 'View code on GitHub',
href: 'https://github.com/opdavies/vue-tailwind-bartik',
active: false,
},
// {
// title: 'Read blog post',
// href: 'https://github.com/opdavies/tailwind-bartik',
// active: false,
// },
]
}
},