opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
Oliver Davies 2018-12-19 20:45:19 +00:00
parent 537a9c6da6
commit 80a744cfd2
1 changed files with 11 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
assets/js/components/Navbar.vue
View file

@ -2,12 +2,10 @@
<div> <div>
<div class="sm:flex"> <div class="sm:flex">
<div class="w-full sm:w-1/3 lg:w-1/4 flex items-center"> <div class="w-full sm:w-1/3 lg:w-1/4 flex items-center">
<div class="w-3/4 py-5"> <div class="w-3/4 py-5">{{ siteName }}</div>
{{ siteName }}
</div>
<div class="w-1/4 text-right sm:hidden"> <div class="w-1/4 text-right sm:hidden">
<button type="button" class="nav-toggle appearance-none" @click="mobileNavHidden = !mobileNavHidden" aria-label="Toggle main menu"> <button type="button" class="nav-toggle appearance-none" @click="hidden = !hidden" aria-label="Toggle main menu">
<svg class="fill-current text-grey-dark w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg> <svg class="fill-current text-grey-dark w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg>
</button> </button>
</div> </div>
@ -15,20 +13,18 @@
<nav <nav
class="w-full -mx-4 mt-px sm:mt-0 sm:mx-0 block sm:flex sm:flex-wrap sm:flex-1 sm:justify-end bg-white absolute sm:relative border-b sm:border-b-0" class="w-full -mx-4 mt-px sm:mt-0 sm:mx-0 block sm:flex sm:flex-wrap sm:flex-1 sm:justify-end bg-white absolute sm:relative border-b sm:border-b-0"
:class="{hidden: mobileNavHidden}" :class="{hidden: hidden}"
role="navigation" role="navigation"
> >
<a <a
v-for="item in navItems" v-for="item in items"
:href="item.href"
class="block text-black focus:text-white focus:no-underline focus-within:bg-blue p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-grey-light sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline" class="block text-black focus:text-white focus:no-underline focus-within:bg-blue p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-grey-light sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline"
:class="{ :class="{
'border-blue hover:border-blue': isActive(item), 'border-blue hover:border-blue': isActive(item),
}" }"
:href="item.href"
> >
<span class="flex items-center h-full"> <span class="flex items-center h-full">{{ item.title }}</span>
{{ item.title }}
</span>
</a> </a>
</nav> </nav>
</div> </div>
@ -56,9 +52,9 @@ export default {
data() { data() {
return { return {
mobileNavHidden: true, hidden: true,
navItems: [ items: [
{ {
title: 'About', title: 'About',
href: '/', href: '/',
@ -83,9 +79,9 @@ export default {
title: 'Contact', title: 'Contact',
href: '/contact', href: '/contact',
pattern: '^/contact/?', pattern: '^/contact/?',
} },
] ],
} }
} },
} }
</script> </script>