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

Fix issues

Browse source
This commit is contained in:
Oliver Davies 2019-03-26 15:57:08 +00:00
parent d7b5ec15d1
commit c97714167d
2 changed files with 42 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/js/app.js
View file

@ -1,9 +1,7 @@
window.hljs = require('highlightjs') import Navbar from './components/Navbar'
window.Vue = require('vue') import Vue from 'vue'
import Navbar from './components/Navbar'; new Vue({
const app = new Vue({
el: '#app', el: '#app',
components: { Navbar }, components: { Navbar }
}) })

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

@ -4,15 +4,30 @@
<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">
<div class="text-sm"> <div class="text-sm">
<a :href="siteUrl" class="text-black" tabindex="-1"> <a
href="siteUrl"
class="text-black"
tabindex="-1"
>
{{ siteTitle }} {{ siteTitle }}
</a> </a>
</div> </div>
</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="hidden = !hidden" aria-label="Toggle main menu"> <button
<svg class="fill-current text-gray-600 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> type="button"
class="nav-toggle appearance-none"
aria-label="Toggle main menu"
@click="hidden = !hidden"
>
<svg
class="fill-current text-gray-600 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>
@ -23,7 +38,8 @@
role="navigation" role="navigation"
> >
<a <a
v-for="item in items" v-for="(index, item) in items"
:key="index"
class="block text-black no-underline focus:outline-none p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-gray-300 focus:border-gray-300 focus:bg-white sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline text-sm -mb-px" class="block text-black no-underline focus:outline-none p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-gray-300 focus:border-gray-300 focus:bg-white sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline text-sm -mb-px"
:class="{'border-blue-600 hover:border-blue-600': isActive(item)}" :class="{'border-blue-600 hover:border-blue-600': isActive(item)}"
:href="item.href" :href="item.href"
@ -38,14 +54,17 @@
<script> <script>
export default { export default {
props: { props: {
siteUrl: String, siteUrl: {
siteTitle: String, type: String,
pageUrl: String, required: true
}, },
siteTitle: {
methods: { type: String,
isActive(item) { required: true
return this.pageUrl.match(new RegExp(item.pattern)) },
pageUrl: {
type: String,
required: true
} }
}, },
@ -97,5 +116,12 @@ export default {
], ],
} }
}, },
methods: {
isActive(item) {
return this.pageUrl.match(new RegExp(item.pattern))
}
}
} }
</script> </script>