127 lines
3.5 KiB
Vue
127 lines
3.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="md:flex">
|
|
<div class="w-full flex items-center md:w-1/3 lg:w-1/4">
|
|
<div class="w-3/4 py-6">
|
|
<div class="text-sm">
|
|
<a
|
|
href="/"
|
|
class="font-semibold text-white"
|
|
tabindex="-1"
|
|
>
|
|
{{ siteTitle }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-1/4 text-right flex items-center justify-end md:hidden">
|
|
<button
|
|
type="button"
|
|
class="nav-toggle appearance-none text-white hover:text-gray-300 focus:outline-none"
|
|
aria-label="Toggle main menu"
|
|
@click="isOpen = !isOpen"
|
|
>
|
|
<svg
|
|
v-if="!isOpen"
|
|
class="fill-current text-inherit 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
|
|
v-if="isOpen"
|
|
class="fill-current text-inherit w-5 h-5"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
><path
|
|
d="M10 8.586L2.929 1.515 1.515 2.929 8.585 10l-7.07 7.071 1.414 1.414L10 11.415l7.071 7.07 1.414-1.414L11.415 10l7.07-7.071-1.414-1.414L10 8.585z"
|
|
fill-rule="evenodd"
|
|
/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<nav
|
|
class="block w-full absolute py-4 -mx-4 mt-2px bg-blue-700 border-b md:mt-0 md:mx-0 md:relative md:flex md:flex-wrap md:flex-1 md:justify-end md:bg-blue-500 md:border-b-0"
|
|
:class="{ hidden: !isOpen }"
|
|
role="navigation"
|
|
>
|
|
<a
|
|
v-for="(item, index) in items"
|
|
:key="index"
|
|
class="block py-3 px-4 mx-4 mt-1 -mb-px rounded text-sm text-white no-underline hover:underline focus:outline-none md:py-1 md:px-2 md:mx-2 md:mt-0 md:mr-0"
|
|
:class="{ 'cursor-default bg-blue-500 hover:border-blue-600 hover:no-underline md:bg-blue-700': isActive(item) }"
|
|
:href="item.href"
|
|
>
|
|
<span class="flex items-center h-full">{{ item.title }}</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
siteTitle: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
pageUrl: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
isOpen: false,
|
|
|
|
items: [
|
|
{
|
|
title: 'About',
|
|
href: '/',
|
|
pattern: '^/.$'
|
|
},
|
|
{
|
|
title: 'Projects',
|
|
href: '/projects',
|
|
pattern: '^/projects/?$'
|
|
},
|
|
{
|
|
title: 'Articles',
|
|
href: '/articles',
|
|
pattern: '^/articles/?'
|
|
},
|
|
{
|
|
title: 'Talks',
|
|
href: '/talks',
|
|
pattern: '^/talks/?'
|
|
},
|
|
{
|
|
title: 'Podcasts',
|
|
href: '/podcasts',
|
|
pattern: '^/podcasts/?'
|
|
},
|
|
{
|
|
title: 'Book',
|
|
href: '/test-driven-drupal',
|
|
pattern: '^/test-driven-drupal/?$'
|
|
},
|
|
{
|
|
title: 'Contact',
|
|
href: '/contact',
|
|
pattern: '^/contact/?'
|
|
}
|
|
],
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
isActive (item) {
|
|
return this.pageUrl.match(new RegExp(item.pattern))
|
|
}
|
|
}
|
|
}
|
|
</script>
|