Simplify navbar
This commit is contained in:
parent
bb7c562577
commit
3e6dc96467
|
|
@ -18,4 +18,5 @@ imports:
|
||||||
- ../../data/companies.yml
|
- ../../data/companies.yml
|
||||||
- ../../data/events.yml
|
- ../../data/events.yml
|
||||||
- ../../data/links.yml
|
- ../../data/links.yml
|
||||||
|
- ../../data/menus.yml
|
||||||
- ../../data/work.yml
|
- ../../data/work.yml
|
||||||
|
|
|
||||||
36
data/menus.yml
Normal file
36
data/menus.yml
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
menus:
|
||||||
|
main:
|
||||||
|
about:
|
||||||
|
title: 'About'
|
||||||
|
href: '/'
|
||||||
|
pattern: '^/.$'
|
||||||
|
|
||||||
|
articles:
|
||||||
|
title: 'Articles'
|
||||||
|
href: '/articles'
|
||||||
|
pattern: '^/articles/?'
|
||||||
|
|
||||||
|
talks:
|
||||||
|
title: 'Talks'
|
||||||
|
href: '/talks'
|
||||||
|
pattern: '^/talks/?'
|
||||||
|
|
||||||
|
podcasts:
|
||||||
|
title: 'Podcasts'
|
||||||
|
href: '/podcasts'
|
||||||
|
pattern: '^/podcasts/?'
|
||||||
|
|
||||||
|
projects:
|
||||||
|
title: 'Projects'
|
||||||
|
href: '/projects'
|
||||||
|
pattern: '^/projects/?$'
|
||||||
|
|
||||||
|
book:
|
||||||
|
title: 'Book'
|
||||||
|
href: '/test-driven-drupal'
|
||||||
|
pattern: '^/test-driven-drupal/?$'
|
||||||
|
|
||||||
|
contact:
|
||||||
|
title: 'Contact'
|
||||||
|
href: '/contact'
|
||||||
|
pattern: '^/contact/?'
|
||||||
|
|
@ -1,9 +1,19 @@
|
||||||
import Navbar from './components/Navbar'
|
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|
||||||
window.hljs = require('highlightjs')
|
window.hljs = require('highlightjs')
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: '#nav',
|
||||||
components: { Navbar }
|
|
||||||
|
methods: {
|
||||||
|
toggle () {
|
||||||
|
this.isOpen = !this.isOpen
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
isOpen: false
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,127 +0,0 @@
|
||||||
<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 focus:underline 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"
|
|
||||||
:aria-current="isActive(item) ? 'page' : false"
|
|
||||||
>
|
|
||||||
<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: 'Articles',
|
|
||||||
href: '/articles',
|
|
||||||
pattern: '^/articles/?'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Talks',
|
|
||||||
href: '/talks',
|
|
||||||
pattern: '^/talks/?'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Podcasts',
|
|
||||||
href: '/podcasts',
|
|
||||||
pattern: '^/podcasts/?'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Projects',
|
|
||||||
href: '/projects',
|
|
||||||
pattern: '^/projects/?$'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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>
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</head>
|
</head>
|
||||||
<body class="antialiased font-sans text-gray-800 leading-relaxed">
|
<body class="antialiased font-sans text-gray-800 leading-relaxed">
|
||||||
<div id="app" class="min-h-screen flex flex-col" v-cloak>
|
<div id="app" class="min-h-screen flex flex-col">
|
||||||
{% block body %}{% endblock %}
|
{% block body %}{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,49 @@
|
||||||
<div class="w-full fixed top-0 mb-6 z-20 bg-blue-500 border-b-3 border-blue-700">
|
<div id="nav" class="w-full fixed top-0 mb-6 z-20 bg-blue-500 border-b-3 border-blue-700">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="block py-6 v-cloak-block">
|
<div class="md:flex">
|
||||||
<div class="text-sm">
|
<div class="w-full flex items-center md:w-1/3 lg:w-1/4">
|
||||||
<a href="/" class="font-semibold text-white" tabindex="-1">
|
<div class="w-3/4 py-6">
|
||||||
{{ site.title }}
|
<div class="text-sm">
|
||||||
</a>
|
<a href="{{ site.menus.main.about.href }}" class="font-semibold text-white" tabindex="-1">
|
||||||
|
{{ site.title }}
|
||||||
|
</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="toggle"
|
||||||
|
>
|
||||||
|
<svg class="fill-current text-inherit w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||||
|
<path v-if="!isOpen" 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"/>
|
||||||
|
<path v-else 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="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="[ isOpen ? 'block' : 'hidden' ]"
|
||||||
|
role="navigation"
|
||||||
|
>
|
||||||
|
{% for item in site.menus.main %}
|
||||||
|
{% set currentPage = page.url matches '#' ~ item.pattern ~ '#' %}
|
||||||
|
<a
|
||||||
|
class="mx-4 mt-1 -mb-px py-3 px-4 block rounded text-sm text-white no-underline hover:underline focus:outline-none focus:underline md:py-1 md:px-2 md:mx-2 md:mt-0 md:mr-0
|
||||||
|
{{ currentPage ? 'cursor-default bg-blue-500 hover:border-blue-600 hover:no-underline md:bg-blue-700' }}"
|
||||||
|
href="{{ item.href }}"
|
||||||
|
{% if currentPage %}aria-current="page"{% endif %}
|
||||||
|
>
|
||||||
|
<span class="flex items-center h-full">
|
||||||
|
{{ item.title }}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<navbar site-title="{{ site.title }}" page-url="{{ page.url }}"></navbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Reference in a new issue