diff options
author | Miguel Ángel Moreno <mail@migalmoreno.com> | 2022-12-30 21:24:04 +0100 |
---|---|---|
committer | Miguel Ángel Moreno <mail@migalmoreno.com> | 2022-12-30 21:29:58 +0100 |
commit | 088ee6dde7dfdfc1ea8ca37fc0154dbc92cb1a62 (patch) | |
tree | ee1591929e5682c19c4bbe64b7b8caadeef748ff /src/frontend | |
parent | 7732d3feccf351acfc478c34646a77f2b08aa3f4 (diff) |
feat(frontend): Add a mobile nav
Diffstat (limited to 'src/frontend')
-rw-r--r-- | src/frontend/tau/events.cljs | 5 | ||||
-rw-r--r-- | src/frontend/tau/subs.cljs | 5 | ||||
-rw-r--r-- | src/frontend/tau/views.cljs | 69 |
3 files changed, 50 insertions, 29 deletions
diff --git a/src/frontend/tau/events.cljs b/src/frontend/tau/events.cljs index 24da7d0..0e43688 100644 --- a/src/frontend/tau/events.cljs +++ b/src/frontend/tau/events.cljs @@ -43,6 +43,11 @@ (fn [db _] (assoc db :page-scroll 0))) +(rf/reg-event-db + ::toggle-mobile-nav + (fn [db _] + (assoc db :show-mobile-nav (not (:show-mobile-nav db))))) + (rf/reg-event-fx ::navigated (fn [{:keys [db]} [_ new-match]] diff --git a/src/frontend/tau/subs.cljs b/src/frontend/tau/subs.cljs index 8fd6452..047e93c 100644 --- a/src/frontend/tau/subs.cljs +++ b/src/frontend/tau/subs.cljs @@ -86,3 +86,8 @@ :show-pagination-loading (fn [db _] (:show-pagination-loading db))) + +(rf/reg-sub + :show-mobile-nav + (fn [db _] + (:show-mobile-nav db))) 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 "τ"}}]] + [: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 "τ"}}]] - [: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)] |