My article on creating LiveView modals with Tailwind CSS and Alpine.js is up.
stryrckt
tme_317
petrus-jvrensburg
This is how I set up the mobile menu transitions for a tailwind ui template. It requires three changes:
- Add id’s to two of the elements
- Change their classes slightly (
lg:hidden→hiddenandflex→hidden) - Add click handlers
--- a/lib/my_app_web/components/layouts/app.html.heex
+++ b/lib/my_app_web/components/layouts/app.html.heex
@@ -4,33 +4,25 @@
Off-canvas menu for mobile, show/hide based on off-canvas menu state.
-->
- <div class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
+ <div id="mobile-menu-wrapper" class="relative z-40 hidden" role="dialog" aria-modal="true">
<!--
Off-canvas menu backdrop, show/hide based on off-canvas menu state.
-
- Entering: "transition-opacity ease-linear duration-300"
- From: "opacity-0"
- To: "opacity-100"
- Leaving: "transition-opacity ease-linear duration-300"
- From: "opacity-100"
- To: "opacity-0"
-->
<div class="fixed inset-0 bg-black bg-opacity-25"></div>
<div class="fixed inset-0 z-40 flex">
<!--
Off-canvas menu, show/hide based on off-canvas menu state.
-
- Entering: "transition ease-in-out duration-300 transform"
- From: "-translate-x-full"
- To: "translate-x-0"
- Leaving: "transition ease-in-out duration-300 transform"
- From: "translate-x-0"
- To: "-translate-x-full"
-->
- <div class="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl">
+ <div
+ id="mobile-menu"
+ phx-click-away={toggle_mobile_menu()}
+ class="relative hidden w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl"
+ >
<div class="flex px-4 pb-2 pt-5">
+ <!-- Close button -->
<button
+ phx-click={toggle_mobile_menu()}
type="button"
class="-m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400"
>
@@ -488,7 +480,11 @@
<div class="flex h-16 items-center justify-between">
<div class="flex flex-1 items-center lg:hidden">
<!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
- <button type="button" class="-ml-2 rounded-md bg-white p-2 text-gray-400">
+ <button
+ phx-click={toggle_mobile_menu()}
+ type="button"
+ class="-ml-2 rounded-md bg-white p-2 text-gray-400"
+ >
<span class="sr-only">Open menu</span>
<svg
class="h-6 w-6"
Then in lib/my_app_web/components/layouts.ex I define the toggle function:
def toggle_mobile_menu(js \\ %JS{}) do
js
|> JS.toggle(
to: "#mobile-menu-wrapper",
in:
{"transition-opacity ease-linear duration-300", "transform opacity-0",
"transform opacity-100"},
out:
{"transition-opacity ease-linear duration-300", "transform opacity-100",
"transform opacity-0"}
)
|> JS.toggle(
to: "#mobile-menu",
in: {"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"},
out: {"transition ease-in-out duration-300 transform", "translate-x-0", "-translate-x-full"}
)
end
3