Move navbar into a Vue component
This commit is contained in:
parent
b1fe8cadf2
commit
81faaa0380
|
|
@ -1,9 +1,8 @@
|
|||
(function ($) {
|
||||
$('html.no-js').addClass('js').removeClass('no-js');
|
||||
window.Vue = require('vue');
|
||||
|
||||
$('.nav-toggle').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
import Navbar from './components/Navbar';
|
||||
|
||||
$(this).siblings('.nav-right').toggleClass('is-active');
|
||||
});
|
||||
})(jQuery);
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
components: { Navbar },
|
||||
})
|
||||
|
|
|
|||
80
assets/js/components/Navbar.vue
Normal file
80
assets/js/components/Navbar.vue
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div class="navbar border-bottom border-b border-grey-light mb-6" 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">
|
||||
<a href="/" title="Home" class="text-grey-darkest no-underline hover:underline">
|
||||
{{ siteName }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="w-1/4 text-right sm:hidden">
|
||||
<button type="button" class="nav-toggle appearance-none" @click="mobileNavHidden = !mobileNavHidden">
|
||||
<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-2 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['siteName', 'pageUrl'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
mobileNavHidden: true,
|
||||
|
||||
navItems: [
|
||||
{
|
||||
title: 'About',
|
||||
href: '/',
|
||||
pattern: '^/.$',
|
||||
},
|
||||
{
|
||||
title: 'Talks',
|
||||
href: '/talks',
|
||||
pattern: '^/talks/?',
|
||||
},
|
||||
{
|
||||
title: 'Blog',
|
||||
href: '/blog',
|
||||
pattern: '^/blog/?',
|
||||
},
|
||||
{
|
||||
title: 'Book',
|
||||
href: '/test-driven-drupal',
|
||||
pattern: '^/test-driven-drupal/?$',
|
||||
},
|
||||
{
|
||||
title: 'Contact',
|
||||
href: '/contact',
|
||||
pattern: '^/contact/?',
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -13,11 +13,11 @@
|
|||
"cross-env": "^5.1.5",
|
||||
"font-awesome": "^4.7.0",
|
||||
"highlightjs": "^9.10.0",
|
||||
"jquery.2": "^1.0.0",
|
||||
"laravel-mix": "^2.1.11",
|
||||
"laravel-mix-purgecss": "^2.1.2",
|
||||
"laravel-mix-tailwind": "^0.1.0",
|
||||
"tailwindcss": "^0.6",
|
||||
"tailwindcss-visuallyhidden": "^1.0.1"
|
||||
"tailwindcss-visuallyhidden": "^1.0.1",
|
||||
"vue": "^2.5.17"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,13 +35,6 @@
|
|||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelector('.nav-toggle').onclick = function() {
|
||||
document.querySelector('.navbar nav').classList.toggle('hidden').toggle('block');
|
||||
return false;
|
||||
};
|
||||
</script>
|
||||
|
||||
{% if site.google_analytics_tracking_id %}
|
||||
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '{{ site.google_analytics_tracking_id }}', 'auto'); ga('send', 'pageview');</script>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{% extends 'app' %}
|
||||
|
||||
{% block body %}
|
||||
{% include 'navbar' %}
|
||||
<navbar site-name="{{ site.title }}" page-url="{{ page.url }}"></navbar>
|
||||
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="md:flex -mx-4">
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<a href="{{ href }}" class="block p-4 border-l-3 sm:border-l-0 sm:border-b-2 sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline {{ page.url matches '#' ~ pattern ~ '#' ? 'border-blue' : 'border-transparent hover:border-grey-light' }} {{ loop.first ? 'border-t border-grey-lighter sm:border-t-0 sm:border-transparent' }}">
|
||||
<span class="flex items-center h-full">
|
||||
{{- title -}}
|
||||
</span>
|
||||
</a>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<div class="navbar border-bottom border-b border-grey-light mb-6" 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">
|
||||
<a href="/" title="Home" class="text-grey-darkest no-underline hover:underline">
|
||||
{{ 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>
|
||||
|
||||
<nav class="hidden block w-full -mx-4 sm:w-2/3 lg:w-3/4 sm:flex sm:flex-wrap sm:justify-end bg-white absolute sm:relative mt-px border-b sm:border-b-0" role="navigation">
|
||||
{% include 'nav-item' with {
|
||||
title: 'About',
|
||||
href: '/',
|
||||
pattern: '^/.$',
|
||||
} %}
|
||||
|
||||
{% include 'nav-item' with {
|
||||
title: 'Talks',
|
||||
href: '/talks',
|
||||
pattern: '^/talks/?',
|
||||
} %}
|
||||
|
||||
{% include 'nav-item' with {
|
||||
title: 'Blog',
|
||||
href: '/blog',
|
||||
pattern: '^/blog/?',
|
||||
} %}
|
||||
|
||||
{% include 'nav-item' with {
|
||||
title: 'Book',
|
||||
href: '/test-driven-drupal',
|
||||
pattern: '^/test-driven-drupal/?$',
|
||||
} %}
|
||||
|
||||
{% include 'nav-item' with {
|
||||
title: 'Contact',
|
||||
href: '/contact',
|
||||
pattern: '^/contact/?',
|
||||
} %}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
|
@ -42,7 +42,7 @@ If you have questions or would like to suggest something for me to include in th
|
|||
Enter your email address to subscribe to the Test Driven Drupal mailing list.
|
||||
</div>
|
||||
|
||||
{% include 'pages/book/signup-form' %}
|
||||
<!-- {% include 'pages/book/signup-form' %} -->
|
||||
|
||||
[0]: {{site.url}}/blog/tags/testing
|
||||
[1]: {{site.url}}/talks/tdd-test-driven-drupal
|
||||
|
|
|
|||
|
|
@ -5,9 +5,8 @@ require('laravel-mix-tailwind');
|
|||
|
||||
mix.disableNotifications()
|
||||
.sass('assets/sass/app.sass', 'source/dist/css')
|
||||
.combine([
|
||||
'node_modules/jquery/dist/jquery.js',
|
||||
'node_modules/highlightjs/highlight.pack.js',
|
||||
.js([
|
||||
// 'node_modules/highlightjs/highlight.pack.js',
|
||||
'assets/js/app.js',
|
||||
], 'source/dist/js/all.js')
|
||||
.copyDirectory('node_modules/font-awesome/fonts', 'source/dist/fonts')
|
||||
|
|
|
|||
Reference in a new issue