69 lines
2.4 KiB
Common Lisp
69 lines
2.4 KiB
Common Lisp
(defpackage #:website/components/header
|
|
(:use #:cl
|
|
#:hsx
|
|
#:jingle)
|
|
(:export #:~header))
|
|
(in-package #:website/components/header)
|
|
|
|
(defparameter *pc-menu*
|
|
'(("/about" "about")
|
|
("/works" "works")
|
|
("/blog" "blog")))
|
|
|
|
(defparameter *sp-menu*
|
|
(cons '("/" "home") *pc-menu*))
|
|
|
|
(defcomp ~pc-header ()
|
|
(hsx
|
|
(header :class "hidden md:flex justify-between py-4 border-b-1 top-0 bg-white"
|
|
(p :class "z-20 text-3xl font-bold"
|
|
(a :href "/" "skyizwhite"))
|
|
(nav :class "flex items-end"
|
|
(ul :class "flex gap-4 text-xl font-bold"
|
|
(loop
|
|
:for (href label) :in *pc-menu* :collect
|
|
(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 ~sp-header ()
|
|
(hsx
|
|
(header
|
|
: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"))
|
|
(div
|
|
(button
|
|
:aria-label "Open menu"
|
|
:class "z-20 size-8 flex flex-col justify-center cursor-pointer relative"
|
|
:type "button"
|
|
: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-300"
|
|
:data-class "{'rotate-45 translate-y-2.5': $open}")
|
|
(span
|
|
: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-300"
|
|
:data-class "{'-rotate-45 -translate-y-2.5': $open}")))
|
|
(nav
|
|
: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")
|
|
(h2 :class "text-5xl font-bold"
|
|
"Menu")
|
|
(ul :class "flex flex-col h-fit gap-8 text-3xl font-bold"
|
|
(loop
|
|
:for (href label) :in *sp-menu* :collect
|
|
(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
|
|
(<>
|
|
(~pc-header)
|
|
(~sp-header))))
|