9d5cf249ea
There are several ways to show SVG in HTML. One of the recommended way is showing SVG inline. We are doing it. But long SVG paths make hard to maintain HTML files. Also some of the icons used multiple times. I created an icon component and show icon depending on its name. So all of the our SVG icons go to "icon.erb" file. I excluded this file from erb_formatter because it couldn't format `when` cases correctly.
21 lines
952 B
Plaintext
21 lines
952 B
Plaintext
<div id="mobile-menu" class="relative z-50 hidden group" role="dialog" aria-modal="true">
|
|
<div
|
|
class="fixed inset-0 bg-gray-900/80 transition-opacity ease-linear duration-300 opacity-0 group-[.mobile-menu-open]:opacity-100"
|
|
></div>
|
|
<div class="fixed inset-0 flex">
|
|
<div
|
|
class="relative mr-16 flex w-full max-w-xs flex-1 transition ease-in-out duration-300 transform -translate-x-full group-[.mobile-menu-open]:translate-x-0"
|
|
>
|
|
<div
|
|
class="absolute left-full top-0 flex w-16 justify-center pt-5 ease-in-out duration-300 opacity-0 group-[.mobile-menu-open]:opacity-100"
|
|
>
|
|
<button type="button" class="toggle-mobile-menu -m-2.5 p-2.5">
|
|
<span class="sr-only">Close sidebar</span>
|
|
<%== render("components/icon", locals: { name: "hero-x-mark", classes: "h-6 w-6 text-white" }) %>
|
|
</button>
|
|
</div>
|
|
<%== render("layouts/sidebar/content") %>
|
|
</div>
|
|
</div>
|
|
</div>
|