feat(frontend): Add a mobile nav

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