(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))))