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

Ensure that the navbar works without JS

Browse source
This commit is contained in:
Oliver Davies 2019-09-04 00:35:53 +01:00
parent f356028ee4
commit e2c9f291b5
5 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/css/app.css
View file

@ -5,3 +5,4 @@
@import './components.css';
@import 'tailwindcss/utilities';
@import './utilities.css';

3
resources/css/utilities.css Normal file
View file

@ -0,0 +1,3 @@
.no-js .js-hidden {
display: none;
}

7
resources/js/app.js
View file

@ -3,7 +3,7 @@ import Vue from 'vue'
window.hljs = require('highlightjs')
new Vue({
el: '#nav',
el: '#app',
methods: {
toggle () {
@ -11,6 +11,11 @@ new Vue({
}
},
mounted: function () {
this.$el.classList.remove('no-js')
this.$el.classList.add('js')
},
data () {
return {
isOpen: false

4
source/_layouts/app.html.twig
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html class="no-js" lang="en-GB">
<html lang="en-GB">
<head>
<title>{% if page.title is defined and page.url != '//' %}{{ page.title }} | {% endif %}{{ site.title }} - {{ site.subtitle }}</title>
{% include 'meta' %}
@ -21,7 +21,7 @@
{% endfor %}
</head>
<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 %}
</div>

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

@ -17,7 +17,7 @@
aria-label="Toggle main menu"
@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-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>