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> <template>
<div role="banner"> <div>
<header class="container mx-auto px-4"> <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 }}
{{ siteName }} </div>
</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="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> <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>
</div> </div>
<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: mobileNavHidden}"
role="navigation" role="navigation"
> >
<a <a
v-for="item in navItems" v-for="item in navItems"
:href="item.href" :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="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="{ :class="{
'border-blue hover:border-blue': pageUrl.match(new RegExp(item.pattern)), 'border-blue hover:border-blue': pageUrl.match(new RegExp(item.pattern)),
}" }"
> >
<span class="flex items-center h-full"> <span class="flex items-center h-full">
{{ item.title }} {{ item.title }}
</span> </span>
</a> </a>
</nav> </nav>
</div>
</header>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -72,7 +70,7 @@
pattern: '^/contact/?', pattern: '^/contact/?',
} }
] ]
}
} }
} }
}
</script> </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="border-bottom border-b border-grey-light mb-6">
<div class="container mx-auto v-cloak-block"> <div class="container mx-auto">
<div class="block py-5">{{ site.title }}</div> <div class="block py-5 v-cloak-block">
</div> {{ 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> </div>