aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/tau/views.cljs
diff options
context:
space:
mode:
authorMiguel Ángel Moreno <mail@migalmoreno.com>2022-12-30 21:24:04 +0100
committerMiguel Ángel Moreno <mail@migalmoreno.com>2022-12-30 21:29:58 +0100
commit088ee6dde7dfdfc1ea8ca37fc0154dbc92cb1a62 (patch)
treeee1591929e5682c19c4bbe64b7b8caadeef748ff /src/frontend/tau/views.cljs
parent7732d3feccf351acfc478c34646a77f2b08aa3f4 (diff)
feat(frontend): Add a mobile nav
Diffstat (limited to 'src/frontend/tau/views.cljs')
-rw-r--r--src/frontend/tau/views.cljs69
1 files changed, 40 insertions, 29 deletions
diff --git a/src/frontend/tau/views.cljs b/src/frontend/tau/views.cljs
index 3201687..16b73af 100644
--- a/src/frontend/tau/views.cljs
+++ b/src/frontend/tau/views.cljs
@@ -30,11 +30,15 @@
global-search @(rf/subscribe [:global-search])
services @(rf/subscribe [:services])
id (js/parseInt (or serviceId service-id))
+ mobile-nav? @(rf/subscribe [:show-mobile-nav])
{:keys [available-kiosks default-kiosk]} @(rf/subscribe [:kiosks])]
- [:nav.flex.p-2.content-center.sticky.top-0.z-50.font-nunito
+ [:nav.flex.px-2.py-2.5.content-center.sticky.top-0.z-50.font-nunito
{:style {:background service-color}}
- [:div.flex
- [:form.flex.items-center
+ [:div.flex.items-center.justify-between.flex-auto
+ [:div.py-2
+ [:a.px-5.text-white.font-bold.font-nunito
+ {:href (rfe/href ::routes/home) :dangerouslySetInnerHTML {:__html "&tau;"}}]]
+ [:form.flex.items-center.relative
{:on-submit (fn [e]
(.preventDefault e)
(rf/dispatch [::events/navigate
@@ -42,42 +46,49 @@
:params {}
:query {:q global-search :serviceId service-id}}]))}
[:div
- [:a.px-5.text-white.font-bold.font-nunito
- {:href (rfe/href ::routes/home) :dangerouslySetInnerHTML {:__html "&tau;"}}]]
- [:div.relative
- [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito
- {:on-change #(rf/dispatch [::events/change-service (js/parseInt (.. % -target -value))])
- :value service-id
- :style {:background "transparent"}}
- (when services
- (for [service services]
- [:option.bg-neutral-900.border-none {:value (:id service) :key (:id service)}
- (-> service :info :name)]))]
- [:div.flex.absolute.min-h-full.min-w-full.top-0.right-0.items-center.justify-end
- {:style {:zIndex "-1"}}
- [:i.fa-solid.fa-caret-down.mr-4]]]
- [:div
- [:input.bg-transparent.border-none.rounded.py-2.px-1.mx-2.focus:ring-transparent.placeholder-white
+ [:input.bg-transparent.border-none.rounded.py-2.px-1.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto
{:type "text"
:value global-search
:on-change #(rf/dispatch [::events/change-global-search (.. % -target -value)])
:placeholder "Search for something"}]]
- [:div
- [:button.text-white.mx-2
+ [:div.flex.items-center.px-2
+ [:button.text-white
{:type "submit"}
[:i.fas.fa-search]]]]
- [:div
- [:ul.flex.content-center.p-2.text-white.font-roboto
- (for [kiosk available-kiosks]
- [:li.px-5 {:key kiosk}
- [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
- :kioskId kiosk})}
- kiosk]])]]]]))
+ [:div.cursor-pointer.px-2.ml:hidden
+ {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
+ [:i.fa-solid.fa-bars]]
+ [:div.bg-neutral-900.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.shadow-xl.shadow-black.pt-8
+ {:class (str "ease-in-out delay-75 transition-[right] "
+ "ml:w-full ml:flex ml:min-h-0 ml:relative ml:text-white ml:bg-transparent ml:shadow-none ml:p-0 ml:right-0 "
+ (if mobile-nav? "right-0" "right-[-245px]"))}
+ [:div.cursor-pointer.px-2.ml:hidden.absolute.top-1.right-2
+ {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
+ [:i.fa-solid.fa-close.text-xl]]
+ [:div.relative.flex.flex-col.items-center.justify-center.ml:flex-row
+ [:div.w-full.box-border.z-10
+ [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito.px-5.w-full
+ {:on-change #(rf/dispatch [::events/change-service (js/parseInt (.. % -target -value))])
+ :value service-id
+ :style {:background "transparent"}}
+ (when services
+ (for [service services]
+ [:option.bg-neutral-900.border-none {:value (:id service) :key (:id service)}
+ (-> service :info :name)]))]]
+ [:div.flex.absolute.min-h-full.top-0.right-4.ml:right-0.items-center.justify-end.z-0
+ [:i.fa-solid.fa-caret-down]]]
+ [:div.relative.flex-auto.ml:pl-4
+ [:ul.flex.font-roboto.flex-col.ml:flex-row
+ (for [kiosk available-kiosks]
+ [:li.px-5.py-2 {:key kiosk}
+ [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
+ :kioskId kiosk})}
+ kiosk]])]]]]]))
(defn app
[]
(let [current-match @(rf/subscribe [:current-match])]
- [:div.min-h-screen.flex.flex-col.h-full.text-white.bg-neutral-900
+ [:div.min-h-screen.flex.flex-col.h-full.text-white.bg-neutral-900.overflow-x-hidden
[navbar current-match]
[:div.flex.flex-col.justify-between.relative.font-nunito {:class "min-h-[calc(100vh-58px)]"}
(when-let [view (-> current-match :data :view)]