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

Re-structure navbar

Browse source
This commit is contained in:
Oliver Davies 2018-12-16 16:57:08 +00:00
parent 14b0cb9cf1
commit b217cf5366
2 changed files with 41 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,40 +1,38 @@
<template>
<div role="banner">
<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">
{{ siteName }}
</div>
<div>
<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">
{{ siteName }}
</div>
<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">
<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>
<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">
<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>
<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="{hidden: mobileNavHidden}"
role="navigation"
>
<a
v-for="item in navItems"
:href="item.href"
class="block 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="{
'border-blue hover:border-blue': pageUrl.match(new RegExp(item.pattern)),
}"
>
<span class="flex items-center h-full">
{{ item.title }}
</span>
</a>
</nav>
</div>
</header>
<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="{hidden: mobileNavHidden}"
role="navigation"
>
<a
v-for="item in navItems"
:href="item.href"
class="block 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="{
'border-blue hover:border-blue': pageUrl.match(new RegExp(item.pattern)),
}"
>
<span class="flex items-center h-full">
{{ item.title }}
</span>
</a>
</nav>
</div>
</div>
</template>
<script>
@ -72,7 +70,7 @@
pattern: '^/contact/?',
}
]
}
}
}
}
</script>

13
source/_partials/layout/navbar.html.twig
View file

@ -1,7 +1,12 @@
<div class="border-bottom border-b border-grey-light mb-6">
<div class="container mx-auto v-cloak-block">
<div class="block py-5">{{ site.title }}</div>
</div>
<div class="container mx-auto">
<div class="block py-5 v-cloak-block">
{{ site.title }}
</div>
<navbar site-name="{{ site.title }}" page-url="{{ page.url }}"></navbar>
<navbar
site-name="{{ site.title }}"
page-url="{{ page.url }}"
></navbar>
</div>
</div>