Ensure that the navbar works without JS
This commit is contained in:
parent
f356028ee4
commit
e2c9f291b5
|
@ -5,3 +5,4 @@
|
||||||
@import './components.css';
|
@import './components.css';
|
||||||
|
|
||||||
@import 'tailwindcss/utilities';
|
@import 'tailwindcss/utilities';
|
||||||
|
@import './utilities.css';
|
||||||
|
|
3
resources/css/utilities.css
Normal file
3
resources/css/utilities.css
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
.no-js .js-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
|
@ -3,7 +3,7 @@ import Vue from 'vue'
|
||||||
window.hljs = require('highlightjs')
|
window.hljs = require('highlightjs')
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#nav',
|
el: '#app',
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
toggle () {
|
toggle () {
|
||||||
|
@ -11,6 +11,11 @@ new Vue({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
mounted: function () {
|
||||||
|
this.$el.classList.remove('no-js')
|
||||||
|
this.$el.classList.add('js')
|
||||||
|
},
|
||||||
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
isOpen: false
|
isOpen: false
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html class="no-js" lang="en-GB">
|
<html lang="en-GB">
|
||||||
<head>
|
<head>
|
||||||
<title>{% if page.title is defined and page.url != '//' %}{{ page.title }} | {% endif %}{{ site.title }} - {{ site.subtitle }}</title>
|
<title>{% if page.title is defined and page.url != '//' %}{{ page.title }} | {% endif %}{{ site.title }} - {{ site.subtitle }}</title>
|
||||||
{% include 'meta' %}
|
{% include 'meta' %}
|
||||||
|
@ -21,7 +21,7 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</head>
|
</head>
|
||||||
<body class="antialiased font-sans text-gray-800 leading-relaxed">
|
<body class="antialiased font-sans text-gray-800 leading-relaxed">
|
||||||
<div id="app" class="min-h-screen flex flex-col">
|
<div id="app" class="min-h-screen flex flex-col no-js">
|
||||||
{% block body %}{% endblock %}
|
{% block body %}{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
aria-label="Toggle main menu"
|
aria-label="Toggle main menu"
|
||||||
@click="toggle"
|
@click="toggle"
|
||||||
>
|
>
|
||||||
<svg class="fill-current text-inherit w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
<svg class="js-hidden fill-current text-inherit w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||||
<path v-if="!isOpen" 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"/>
|
<path v-if="!isOpen" 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"/>
|
||||||
<path v-else d="M10 8.586L2.929 1.515 1.515 2.929 8.585 10l-7.07 7.071 1.414 1.414L10 11.415l7.071 7.07 1.414-1.414L11.415 10l7.07-7.071-1.414-1.414L10 8.585z" fill-rule="evenodd"/>
|
<path v-else d="M10 8.586L2.929 1.515 1.515 2.929 8.585 10l-7.07 7.071 1.414 1.414L10 11.415l7.071 7.07 1.414-1.414L11.415 10l7.07-7.071-1.414-1.414L10 8.585z" fill-rule="evenodd"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
Loading…
Reference in a new issue