From 3be60a5fa10974e13fa3f16818ed306beb15e09d Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 21 Apr 2021 08:55:21 +0100
Subject: [PATCH] Don't show the mobile menu when page is loading

---
 web/themes/custom/opdavies/assets/css/utilities/x-cloak.pcss   | 3 +++
 web/themes/custom/opdavies/templates/layout/page.html.twig     | 2 +-
 web/themes/custom/opdavies/templates/menu/menu--main.html.twig | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)
 create mode 100644 web/themes/custom/opdavies/assets/css/utilities/x-cloak.pcss

diff --git a/web/themes/custom/opdavies/assets/css/utilities/x-cloak.pcss b/web/themes/custom/opdavies/assets/css/utilities/x-cloak.pcss
new file mode 100644
index 0000000..8cf0e3e
--- /dev/null
+++ b/web/themes/custom/opdavies/assets/css/utilities/x-cloak.pcss
@@ -0,0 +1,3 @@
+[x-cloak] {
+  @apply hidden
+}
diff --git a/web/themes/custom/opdavies/templates/layout/page.html.twig b/web/themes/custom/opdavies/templates/layout/page.html.twig
index 71b863c..1ac529c 100644
--- a/web/themes/custom/opdavies/templates/layout/page.html.twig
+++ b/web/themes/custom/opdavies/templates/layout/page.html.twig
@@ -59,7 +59,7 @@
 
             <div class="w-1/4 text-right flex items-center justify-end md:hidden">
               <button type="button" class="p-1 appearance-none text-white hover:text-gray-300 focus:outline-none border-2 border-transparent focus-visible:border-white"
-                      aria-label="Toggle main menu" @click="isOpen = !isOpen">
+                      aria-label="Toggle main menu" @click="isOpen = !isOpen" x-cloak>
                 <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 x-show="!isOpen"
diff --git a/web/themes/custom/opdavies/templates/menu/menu--main.html.twig b/web/themes/custom/opdavies/templates/menu/menu--main.html.twig
index 71b86dd..5e0d14b 100644
--- a/web/themes/custom/opdavies/templates/menu/menu--main.html.twig
+++ b/web/themes/custom/opdavies/templates/menu/menu--main.html.twig
@@ -30,7 +30,7 @@
   {% import _self as menus %}
 
   {% if items %}
-    <div class="w-full md:block" :class="[ isOpen ? 'block' : 'hidden' ]">
+    <div class="w-full md:block" :class="[ isOpen ? 'block' : 'hidden' ]" x-cloak>
       {% if menu_level == 0 %}
       <ul{{ attributes.addClass('
         w-full h-full mt-2px py-4 bg-blue-700