(defcomp ~app-body (&key header-rows filter aside menu content) (div :class "max-w-screen-2xl mx-auto py-1 px-1" (div :class "w-full" (details :class "group/root p-2" :data-toggle-group "mobile-panels" (summary (header :class "z-50" (div :id "root-header-summary" :class "flex items-start gap-2 p-1 bg-sky-500" (div :id "root-header-child" :class "flex flex-col w-full items-center" (when header-rows header-rows))))) (div :id "root-menu" :sx-swap-oob "outerHTML" :class "md:hidden" (when menu menu)))) (div :id "filter" (when filter filter)) (main :id "root-panel" :class "max-w-full" (div :class "md:min-h-0" (div :class "flex flex-row md:h-full md:min-h-0" (aside :id "aside" :class "hidden md:flex md:flex-col max-w-xs md:h-full md:min-h-0 mr-3" (when aside aside)) (section :id "main-panel" :class "flex-1 md:h-full md:min-h-0 overflow-y-auto overscroll-contain js-grid-viewport" (when content content) (div :class "pb-8"))))))) (defcomp ~oob-sx (&key oobs filter aside menu content) (<> (when oobs oobs) (div :id "filter" :sx-swap-oob "outerHTML" (when filter filter)) (aside :id "aside" :sx-swap-oob "outerHTML" :class "hidden md:flex md:flex-col max-w-xs md:h-full md:min-h-0 mr-3" (when aside aside)) (div :id "root-menu" :sx-swap-oob "outerHTML" :class "md:hidden" (when menu menu)) (section :id "main-panel" :class "flex-1 md:h-full md:min-h-0 overflow-y-auto overscroll-contain js-grid-viewport" (when content content)))) (defcomp ~hamburger () (div :class "md:hidden bg-stone-200 rounded" (svg :class "h-12 w-12 transition-transform group-open/root:hidden block self-start" :viewBox "0 0 24 24" :fill "none" :stroke "currentColor" (path :stroke-linecap "round" :stroke-linejoin "round" :stroke-width "2" :d "M4 6h16M4 12h16M4 18h16")) (svg :aria-hidden "true" :viewBox "0 0 24 24" :class "w-12 h-12 rotate-180 transition-transform group-open/root:block hidden self-start" (path :d "M6 9l6 6 6-6" :fill "currentColor")))) (defcomp ~post-label (&key feature-image title) (<> (when feature-image (img :src feature-image :class "h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0")) (span title))) (defcomp ~page-cart-badge (&key href count) (a :href href :class "relative inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full border border-emerald-300 bg-emerald-50 text-emerald-800 hover:bg-emerald-100 transition" (i :class "fa fa-shopping-cart" :aria-hidden "true") (span count))) (defcomp ~header-row-sx (&key cart-mini blog-url site-title app-label nav-tree auth-menu nav-panel settings-url is-admin oob) (<> (div :id "root-row" :sx-swap-oob (if oob "outerHTML" nil) :class "flex flex-col items-center md:flex-row justify-center md:justify-between w-full p-1 bg-sky-500" (div :class "w-full flex flex-row items-top" (when cart-mini cart-mini) (div :class "font-bold text-5xl flex-1" (a :href (or blog-url "/") :class "flex justify-center md:justify-start items-baseline gap-2" (h1 (or site-title "")) (when app-label (span :class "text-lg text-white/80 font-normal" app-label)))) (nav :class "hidden md:flex gap-4 text-sm ml-2 justify-end items-center flex-0" (when nav-tree nav-tree) (when auth-menu auth-menu) (when nav-panel nav-panel) (when (and is-admin settings-url) (a :href settings-url :class "justify-center cursor-pointer flex flex-row items-center gap-2 rounded bg-stone-200 text-black p-3" (i :class "fa fa-cog" :aria-hidden "true")))) (~hamburger))) (div :class "block md:hidden text-md font-bold" (when auth-menu auth-menu)))) ; @css bg-sky-400 bg-sky-300 bg-sky-200 bg-sky-100 bg-violet-400 bg-violet-300 bg-violet-200 bg-violet-100 (defcomp ~menu-row-sx (&key id level colour link-href link-label link-label-content icon selected hx-select nav child-id child oob external) (let* ((c (or colour "sky")) (lv (or level 1)) (shade (str (- 500 (* lv 100))))) (<> (div :id id :sx-swap-oob (if oob "outerHTML" nil) :class (str "flex flex-col items-center md:flex-row justify-center md:justify-between w-full p-1 bg-" c "-" shade) (div :class "relative nav-group" (a :href link-href :sx-get (if external nil link-href) :sx-target (if external nil "#main-panel") :sx-select (if external nil (or hx-select "#main-panel")) :sx-swap (if external nil "outerHTML") :sx-push-url (if external nil "true") :class "w-full whitespace-normal flex items-center gap-2 font-bold text-2xl px-3 py-2" (when icon (i :class icon :aria-hidden "true")) (if link-label-content link-label-content (<> (when link-label (div link-label)) (when selected (span :class "text-lg text-white/80 font-normal" selected)))))) (when nav (nav :class "hidden md:flex gap-4 text-sm ml-2 justify-end items-center flex-0" nav))) (when (and child-id (not oob)) (div :id child-id :class "flex flex-col w-full items-center" (when child child)))))) (defcomp ~oob-header-sx (&key parent-id row) (div :id parent-id :sx-swap-oob "outerHTML" :class "flex flex-col w-full items-center" row)) (defcomp ~header-child-sx (&key id inner) (div :id (or id "root-header-child") :class "flex flex-col w-full items-center" inner)) (defcomp ~error-content (&key errnum message image) (div :class "text-center p-8 max-w-lg mx-auto" (div :class "font-bold text-2xl md:text-4xl text-red-500 mb-4" errnum) (div :class "text-stone-600 mb-4" message) (when image (div :class "flex justify-center" (img :src image :width "300" :height "300"))))) (defcomp ~nav-link (&key href hx-select label icon aclass select-colours is-selected) (div :class "relative nav-group" (a :href href :sx-get href :sx-target "#main-panel" :sx-select (or hx-select "#main-panel") :sx-swap "outerHTML" :sx-push-url "true" :aria-selected (when is-selected "true") :class (or aclass (str "justify-center cursor-pointer flex flex-row items-center gap-2 rounded bg-stone-200 text-black p-3 " (or select-colours ""))) (when icon (i :class icon :aria-hidden "true")) (when label (span label)))))