68 lines
2.7 KiB
Twig
68 lines
2.7 KiB
Twig
<div class="navbar border-bottom border-b border-grey-lighter mb-6">
|
|
<header class="container mx-auto px-4">
|
|
<div class="sm:flex">
|
|
<div class="w-full sm:w-1/3 lg:w-1/4 flex items-center">
|
|
<div class="w-3/4 py-5">
|
|
<a href="/" title="Home">
|
|
{{ site.title }}
|
|
</a>
|
|
</div>
|
|
|
|
<div class="w-1/4 text-right sm:hidden">
|
|
<button type="button" class="nav-toggle appearance-none">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
{% set links = [
|
|
{
|
|
title: 'About',
|
|
href: '/',
|
|
pattern: '^/.$'
|
|
},
|
|
{
|
|
title: 'Experience',
|
|
href: '/experience',
|
|
pattern: '^/experience/?$'
|
|
},
|
|
{
|
|
title: 'Talks',
|
|
href: '/talks',
|
|
pattern: '^/talks/?'
|
|
},
|
|
{
|
|
title: 'Open Source',
|
|
href: '/opensource',
|
|
pattern: '^/opensource/?$'
|
|
},
|
|
{
|
|
title: 'Blog',
|
|
href: '/blog',
|
|
pattern: '^/blog/?'
|
|
},
|
|
{
|
|
title: 'Contact',
|
|
href: '/contact',
|
|
pattern: '^/contact/?'
|
|
}
|
|
] %}
|
|
|
|
<nav class="hidden w-full md:w-2/3 lg:w-3/4 sm:flex sm:flex-wrap sm:justify-end">
|
|
{% for link in links %}
|
|
<a
|
|
href="{{ link.href }}"
|
|
class="
|
|
flex items-center -mx-4 p-4 sm:border-b-3 sm:border-transparent sm:ml-4 sm:mr-0 sm:p-0
|
|
{{ loop.first ? 'border-t border-grey-lighter sm:border-t-0 sm:border-transparent' }}
|
|
{{ page.url matches '#' ~ link.pattern ~ '#' ? 'sm:bg-transparent sm:border-blue' }}
|
|
"
|
|
>
|
|
{{ link.title }}
|
|
</a>
|
|
{% endfor %}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</div>
|