Don't show the mobile menu when page is loading

This commit is contained in:
Oliver Davies 2021-04-21 08:55:21 +01:00
parent 02d9c114f3
commit 3be60a5fa1
3 changed files with 5 additions and 2 deletions

View file

@ -0,0 +1,3 @@
[x-cloak] {
@apply hidden
}

View file

@ -59,7 +59,7 @@
<div class="w-1/4 text-right flex items-center justify-end md:hidden"> <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" <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" <svg class="js-hidden fill-current text-inherit w-6 h-6" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"> viewBox="0 0 20 20">
<path x-show="!isOpen" <path x-show="!isOpen"

View file

@ -30,7 +30,7 @@
{% import _self as menus %} {% import _self as menus %}
{% if items %} {% 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 %} {% if menu_level == 0 %}
<ul{{ attributes.addClass(' <ul{{ attributes.addClass('
w-full h-full mt-2px py-4 bg-blue-700 w-full h-full mt-2px py-4 bg-blue-700