2025-05-02 09:39:55 +09:00
|
|
|
(defpackage #:website/components/header
|
2025-05-02 01:31:26 +09:00
|
|
|
(:use #:cl
|
2025-05-04 00:26:49 +09:00
|
|
|
#:hsx
|
|
|
|
#:jingle)
|
2025-05-02 01:31:26 +09:00
|
|
|
(:export #:~header))
|
2025-05-02 09:39:55 +09:00
|
|
|
(in-package #:website/components/header)
|
2025-05-02 01:31:26 +09:00
|
|
|
|
2025-05-25 17:43:47 +09:00
|
|
|
(defparameter *pc-menu*
|
2025-05-03 13:26:31 +09:00
|
|
|
'(("/about" "about")
|
2025-05-18 08:12:43 +09:00
|
|
|
("/works" "works")
|
2025-05-02 01:31:26 +09:00
|
|
|
("/blog" "blog")))
|
|
|
|
|
2025-05-25 17:43:47 +09:00
|
|
|
(defparameter *sp-menu*
|
|
|
|
(cons '("/" "home") *pc-menu*))
|
|
|
|
|
2025-05-03 13:01:49 +09:00
|
|
|
(defcomp ~pc-header ()
|
2025-05-02 01:31:26 +09:00
|
|
|
(hsx
|
2025-05-25 16:14:27 +09:00
|
|
|
(header :class "hidden md:flex justify-between py-4 border-b-1 top-0 bg-white"
|
2025-05-13 07:26:09 +09:00
|
|
|
(p :class "z-20 text-3xl font-bold"
|
2025-05-26 17:51:42 +09:00
|
|
|
(a :href "/" "skyizwhite"))
|
2025-05-03 15:11:31 +09:00
|
|
|
(nav :class "flex items-end"
|
2025-05-26 17:51:42 +09:00
|
|
|
(ul :class "flex gap-4 text-xl font-bold"
|
2025-05-02 01:31:26 +09:00
|
|
|
(loop
|
2025-05-25 17:43:47 +09:00
|
|
|
:for (href label) :in *pc-menu* :collect
|
2025-05-05 02:07:41 +09:00
|
|
|
(if (string= href (request-uri *request*))
|
2025-05-04 00:38:07 +09:00
|
|
|
(hsx (li :class "text-pink-500" label))
|
|
|
|
(hsx (li (a :href href :class "hover:text-pink-500" label))))))))))
|
2025-05-03 13:01:49 +09:00
|
|
|
|
2025-05-03 15:11:31 +09:00
|
|
|
(defcomp ~sp-header ()
|
2025-05-03 13:01:49 +09:00
|
|
|
(hsx
|
2025-05-03 15:11:31 +09:00
|
|
|
(header
|
2025-06-08 12:48:20 +09:00
|
|
|
:data-signals "{open: false}"
|
2025-05-25 16:14:27 +09:00
|
|
|
:class "flex md:hidden justify-between py-2 border-b-1 top-0 bg-white"
|
2025-05-13 07:26:09 +09:00
|
|
|
(p :class "z-20 text-2xl font-bold"
|
2025-05-26 17:51:42 +09:00
|
|
|
(a :href "/" "skyizwhite"))
|
2025-05-03 15:11:31 +09:00
|
|
|
(div
|
|
|
|
(button
|
2025-05-20 10:44:20 +09:00
|
|
|
:aria-label "Open menu"
|
2025-05-03 15:11:31 +09:00
|
|
|
:class "z-20 size-8 flex flex-col justify-center cursor-pointer relative"
|
|
|
|
:type "button"
|
2025-06-08 12:48:20 +09:00
|
|
|
:data-on-click__viewtransition "$open = !$open"
|
2025-05-03 15:11:31 +09:00
|
|
|
(div :class "grid justify-items-center gap-1.5"
|
|
|
|
(span
|
2025-06-08 12:48:20 +09:00
|
|
|
:class "h-1 w-8 rounded-full bg-black transition duration-300"
|
2025-06-07 23:24:04 +09:00
|
|
|
:data-class "{'rotate-45 translate-y-2.5': $open}")
|
2025-05-03 15:11:31 +09:00
|
|
|
(span
|
2025-06-08 12:48:20 +09:00
|
|
|
:class "h-1 w-8 rounded-full bg-black transition duration-300"
|
2025-06-07 23:24:04 +09:00
|
|
|
:data-class "{'scale-x-0': $open}")
|
2025-05-03 15:11:31 +09:00
|
|
|
(span
|
2025-06-08 12:48:20 +09:00
|
|
|
:class "h-1 w-8 rounded-full bg-black transition duration-300"
|
2025-06-07 23:24:04 +09:00
|
|
|
:data-class "{'-rotate-45 -translate-y-2.5': $open}")))
|
2025-05-03 15:11:31 +09:00
|
|
|
(nav
|
2025-06-08 12:48:20 +09:00
|
|
|
:data-show "$open"
|
2025-05-19 23:46:44 +09:00
|
|
|
:class (clsx "fixed flex flex-col items-center justify-center"
|
2025-06-08 12:48:20 +09:00
|
|
|
"z-10 top-0 right-0 w-full h-full gap-16 bg-gray-200")
|
2025-05-03 15:11:31 +09:00
|
|
|
(h2 :class "text-5xl font-bold"
|
|
|
|
"Menu")
|
2025-05-26 17:51:42 +09:00
|
|
|
(ul :class "flex flex-col h-fit gap-8 text-3xl font-bold"
|
2025-05-03 15:11:31 +09:00
|
|
|
(loop
|
2025-05-25 17:43:47 +09:00
|
|
|
:for (href label) :in *sp-menu* :collect
|
2025-05-05 02:07:41 +09:00
|
|
|
(if (string= href (request-uri *request*))
|
|
|
|
(hsx (li :class "text-pink-500" label))
|
|
|
|
(hsx (li (a :href href :class "hover:text-pink-500" label)))))))))))
|
2025-05-03 15:11:31 +09:00
|
|
|
|
|
|
|
(defcomp ~header ()
|
|
|
|
(hsx
|
|
|
|
(<>
|
2025-05-03 13:01:49 +09:00
|
|
|
(~pc-header)
|
|
|
|
(~sp-header))))
|