mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-03-27 11:51:24 +01:00
34 lines
1.3 KiB
HTML
34 lines
1.3 KiB
HTML
<div class="tw:min-h-16">
|
|
<div
|
|
id="fab-wrapper"
|
|
class="tw:fixed tw:bottom-5 tw:right-5 tw:ml-auto tw:w-max tw:flex tw:flex-col tw:items-end mt-5 tw:z-20">
|
|
<div
|
|
id="menu"
|
|
class="tw:flex tw:flex-col tw:items-end tw:space-y-6 tw:transition-all tw:duration-300 tw:ease-in-out tw:opacity-0 tw:invisible tw:hidden tw:mb-2">
|
|
|
|
{{ slot }}
|
|
</div>
|
|
|
|
<button
|
|
class="btn btn-primary rounded-circle p-0 tw:w-12 tw:h-12 tw:flex tw:items-center tw:justify-center tw:shadow-lg tw:hover:shadow-xl tw:focus:shadow-xl tw:transition-all tw:duration-300 tw:ease-in-out"
|
|
_="
|
|
on click or focusout
|
|
if #menu.classList.contains('tw:invisible') and event.type === 'click'
|
|
add .{'tw:rotate-45'} to #fab-icon
|
|
remove .{'tw:invisible'} from #menu
|
|
remove .{'tw:hidden'} from #menu
|
|
remove .{'tw:opacity-0'} from #menu
|
|
else
|
|
wait 0.2s
|
|
remove .{'tw:rotate-45'} from #fab-icon
|
|
add .{'tw:invisible'} to #menu
|
|
add .{'tw:hidden'} to #menu
|
|
add .{'tw:opacity-0'} to #menu
|
|
end
|
|
"
|
|
>
|
|
<i id="fab-icon" class="fa-solid fa-plus tw:text-3xl tw:transition-transform tw:duration-300 tw:ease-in-out"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|