(defpackage #:website/components/header (:use #:cl #:hsx) (:import-from #:jingle #:request-uri) (:export #:~header)) (in-package #:website/components/header) (defparameter *nav-menu* '(("/about" "about") ("/work" "work") ("/blog" "blog"))) (defcomp ~pc-header () (hsx (nav :class "hidden md:flex items-end" (ul :preload "mouseover" :class "flex gap-4 text-xl font-medium" (loop :for (href label) :in *nav-menu* :collect (if (search href (request-uri jingle:*request*)) (hsx (li :class "text-pink-500" label)) (hsx (li (a :href href :class "hover:text-pink-500" label))))))))) (defcomp ~sp-header () (hsx (div :class "block md:hidden" :x-data "{ open: false }" (button :class "z-20 size-8 flex flex-col justify-center cursor-pointer relative" :type "button" :@click "open = !open" (div :class "grid justify-items-center gap-1.5" (span :class "h-1 w-8 rounded-full bg-black transition" :|:class| "open && 'rotate-45 translate-y-2.5'") (span :class "h-1 w-8 rounded-full bg-black transition" :|:class| "open && 'scale-x-0'") (span :class "h-1 w-8 rounded-full bg-black" :|:class| "open && '-rotate-45 -translate-y-2.5'"))) (nav :class (<> "fixed flex flex-col items-center justify-center " "z-10 top-0 right-0 w-full h-full gap-16 bg-gray-200") :x-show "open" :|x-transition:enter| "transition ease-out duration-400" :|x-transition:enter-start| "translate-x-full" :|x-transition:enter-end| "translate-x-0" :|x-transition:leave| "transition ease-in duration-400" :|x-transition:leave-start| "translate-x-0" :|x-transition:leave-end| "translate-x-full" (h2 :class "text-5xl font-bold" "Menu") (ul :preload "mousedown" :class "flex flex-col h-fit gap-8 text-3xl font-medium" (loop :for (href label) :in *nav-menu* :collect (if (search href (request-uri jingle:*request*)) (hsx (li :class "text-pink-500" label)) (hsx (li (a :href href :class "hover:text-pink-500" :@click "open = false" label)))))))))) (defcomp ~header () (hsx (header :class "flex justify-between py-2 md:py-4 border-b-1 top-0 bg-white" (h1 :class "z-20 text-2xl md:text-3xl font-bold" (a :href "/" "skyizwhite")) (~pc-header) (~sp-header))))