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" > - +