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

Add mobile navigation menu

Browse source 
Fixes #1
This commit is contained in:
Oliver Davies 2020-09-09 12:24:40 +01:00
parent c4111ac571
commit b8c49b7295
1 changed files with 43 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/components/navbar.vue
View file

@ -2,11 +2,27 @@
<div class="bg-black">
<div class="max-w-6xl mx-auto py-6 px-4">
<div class="flex justify-between">
<div>
<div class="w-1/2 flex items-center">
<a class="text-white font-bold" href="#" v-text="name"></a>
</div>
<nav class="space-x-6">
<div class="w-1/2 flex justify-end md:hidden">
<button class="text-white focus:text-yellow" type="button" @click="isOpen = !isOpen">
<span class="sr-only">Toggle mobile nav</span>
<svg
class="h-8 w-8"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<nav class="hidden space-x-6 md:block">
<a
class="
text-xs font-bold uppercase
@ -15,6 +31,28 @@
"
href="#"
v-for="(link, i) in links"
:class="{
'text-white': !link.isActive,
'text-yellow': link.isActive
}"
:key="i"
>
{{ link.text }}
</a>
</nav>
</div>
</div>
<div :class="{ hidden: !isOpen }" class="absolute w-full bg-black md:hidden">
<nav class="py-3 border-white border-t">
<a
class="
px-4 py-3 block text-xs font-bold uppercase
hover:text-yellow
focus:text-yellow
"
href="#"
v-for="(link, i) in links"
:class="{
'text-yellow': link.isActive,
'text-white': !link.isActive
@ -26,7 +64,6 @@
</nav>
</div>
</div>
</div>
</template>
<script>
@ -46,7 +83,8 @@ export default {
{ text: 'Home', isActive: true },
{ text: 'Talks', isActive: false },
{ text: 'Contact', isActive: false }
]
],
isOpen: false
}
}
}