paku/website
1
0
Fork 0
Code Issues4 Pull requests Projects Releases Packages Wiki Activity Actions

Fix transition

Browse source
This commit is contained in:
Akira Tempaku 2025-06-08 12:48:20 +09:00
parent 4b97b2a354
commit c3275a4598
Signed by: paku
GPG key ID: 5B4E8402BCC50607
1 changed files with 7 additions and 9 deletions

16
src/components/header.lisp
View file

@ -29,7 +29,7 @@
(defcomp ~sp-header ()
(hsx
(header
:data-signals-open "false"
:data-signals "{open: false}"
:class "flex md:hidden justify-between py-2 border-b-1 top-0 bg-white"
(p :class "z-20 text-2xl font-bold"
(a :href "/" "skyizwhite"))
@ -38,23 +38,21 @@
:aria-label "Open menu"
:class "z-20 size-8 flex flex-col justify-center cursor-pointer relative"
:type "button"
:data-on-click "$open = !$open"
:data-on-click__viewtransition "$open = !$open"
(div :class "grid justify-items-center gap-1.5"
(span
:class "h-1 w-8 rounded-full bg-black transition duration-400"
:class "h-1 w-8 rounded-full bg-black transition duration-300"
:data-class "{'rotate-45 translate-y-2.5': $open}")
(span
:class "h-1 w-8 rounded-full bg-black transition duration-400"
:class "h-1 w-8 rounded-full bg-black transition duration-300"
:data-class "{'scale-x-0': $open}")
(span
:class "h-1 w-8 rounded-full bg-black transition duration-400"
:class "h-1 w-8 rounded-full bg-black transition duration-300"
:data-class "{'-rotate-45 -translate-y-2.5': $open}")))
(nav
:data-show.duration_300ms "$open"
:data-show "$open"
:class (clsx "fixed flex flex-col items-center justify-center"
"z-10 top-0 right-0 w-full h-full gap-16 bg-gray-200"
"transition duration-300 opacity-0")
:data-class "{'opacity-100': $open}"
"z-10 top-0 right-0 w-full h-full gap-16 bg-gray-200")
(h2 :class "text-5xl font-bold"
"Menu")
(ul :class "flex flex-col h-fit gap-8 text-3xl font-bold"