wip
This commit is contained in:
parent
537a9c6da6
commit
80a744cfd2
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue