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 components;
@tailwind utilities;
@layer base {
[x-cloak] {
display: none
}
}

1
templates/html.html.twig
View file

@ -10,6 +10,7 @@
</head>
<body>
{% block body %}{% endblock %}
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
{% block javascripts %}{% endblock %}
</body>
</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">
<ul>
{% for item in menuLinks.findAll %}
<li>
<a class="block px-5 py-5 text-2xl font-display text-blue-700 uppercase" href="#0">{{ item.name }}</a>
<li x-data="{ isOpen: false }">
<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 %}
<ul class="bg-gray-100">
<ul class="bg-gray-100" x-cloak x-show="isOpen">
{% for item in item.children %}
<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 }}
</a>
</li>