From e2c9f291b51a286f86c7903733a1d68cf99d16a1 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Wed, 4 Sep 2019 00:35:53 +0100 Subject: [PATCH] Ensure that the navbar works without JS --- resources/css/app.css | 1 + resources/css/utilities.css | 3 +++ resources/js/app.js | 7 ++++++- source/_layouts/app.html.twig | 4 ++-- source/_partials/layout/navbar.html.twig | 2 +- 5 files changed, 13 insertions(+), 4 deletions(-) create mode 100644 resources/css/utilities.css diff --git a/resources/css/app.css b/resources/css/app.css index f76cac393..a257dc60e 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -5,3 +5,4 @@ @import './components.css'; @import 'tailwindcss/utilities'; +@import './utilities.css'; diff --git a/resources/css/utilities.css b/resources/css/utilities.css new file mode 100644 index 000000000..f786b0da8 --- /dev/null +++ b/resources/css/utilities.css @@ -0,0 +1,3 @@ +.no-js .js-hidden { + display: none; +} diff --git a/resources/js/app.js b/resources/js/app.js index 104d99672..d7552e729 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -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 diff --git a/source/_layouts/app.html.twig b/source/_layouts/app.html.twig index cd759c499..0e76eacb0 100644 --- a/source/_layouts/app.html.twig +++ b/source/_layouts/app.html.twig @@ -1,5 +1,5 @@ - + {% if page.title is defined and page.url != '//' %}{{ page.title }} | {% endif %}{{ site.title }} - {{ site.subtitle }} {% include 'meta' %} @@ -21,7 +21,7 @@ {% endfor %} -
+
{% block body %}{% endblock %}
diff --git a/source/_partials/layout/navbar.html.twig b/source/_partials/layout/navbar.html.twig index ddbdb4bb2..a060cd57e 100644 --- a/source/_partials/layout/navbar.html.twig +++ b/source/_partials/layout/navbar.html.twig @@ -17,7 +17,7 @@ aria-label="Toggle main menu" @click="toggle" > - +