website/src/components/header.lisp

70 lines
2.4 KiB
Common Lisp
Raw Normal View History

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"))
(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
(defcomp ~sp-header ()
2025-05-03 13:01:49 +09:00
(hsx
(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"))
(div
(button
2025-05-20 10:44:20 +09:00
:aria-label "Open menu"
: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"
(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"
:data-class "{'rotate-45 translate-y-2.5': $open}")
(span
2025-06-08 12:48:20 +09:00
:class "h-1 w-8 rounded-full bg-black transition duration-300"
:data-class "{'scale-x-0': $open}")
(span
2025-06-08 12:48:20 +09:00
:class "h-1 w-8 rounded-full bg-black transition duration-300"
:data-class "{'-rotate-45 -translate-y-2.5': $open}")))
(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")
(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"
(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)))))))))))
(defcomp ~header ()
(hsx
(<>
2025-05-03 13:01:49 +09:00
(~pc-header)
(~sp-header))))