opdavies/florida-drupalcamp-tailwindcss
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Make child links toggleable

Browse source
This commit is contained in:
Oliver Davies 2020-12-26 23:01:55 +00:00
parent 5a2df50e90
commit 702b755319
3 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
assets/css/tailwind.pcss
View file

@ -1,3 +1,9 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base {
[x-cloak] {
display: none
}
}

1
templates/html.html.twig
View file

@ -10,6 +10,7 @@
</head> </head>
<body> <body>
{% block body %}{% endblock %} {% block body %}{% endblock %}
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
{% block javascripts %}{% endblock %} {% block javascripts %}{% endblock %}
</body> </body>
</html> </html>

21
templates/includes/navbar.html.twig
View file

@ -15,14 +15,27 @@
<div class="absolute top-16 w-full bg-white" x-cloak x-show="isOpen"> <div class="absolute top-16 w-full bg-white" x-cloak x-show="isOpen">
<ul> <ul>
{% for item in menuLinks.findAll %} {% for item in menuLinks.findAll %}
<li> <li x-data="{ isOpen: false }">
<a class="block px-5 py-5 text-2xl font-display text-blue-700 uppercase" href="#0">{{ item.name }}</a> <a
class="flex items-center justify-between px-5 py-5 text-2xl font-display text-blue-700 uppercase"
href="#0"
{% if item.children %}
@click.prevent="isOpen = !isOpen"
{% endif %}
>
<span>{{ item.name }}</span>
{% if item.children %}
<span>
<svg class="w-8 h-8 fill-current text-gray-600" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</span>
{% endif %}
</a>
{% if item.children %} {% if item.children %}
<ul class="bg-gray-100"> <ul class="bg-gray-100" x-cloak x-show="isOpen">
{% for item in item.children %} {% for item in item.children %}
<li> <li>
<a class="block px-5 py-2 text-2xl font-display text-blue-700 uppercase" href="#0"> <a class="flex items-center justify-between px-5 py-2 text-2xl font-display text-blue-700 uppercase" href="#0">
{{ item.name }} {{ item.name }}
</a> </a>
</li> </li>