feat(frontend): refine app navbar

1 files changed, 55 insertions, 20 deletions

diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs
index c1a04ed..5978808 100644
--- a/src/frontend/tubo/views.cljs
+++ b/src/frontend/tubo/views.cljs
@@ -11,6 +11,46 @@
 (defonce services (rf/dispatch [::events/get-services]))
 (defonce kiosks (rf/dispatch [::events/get-kiosks 0]))
 
+(defn mobile-nav
+  [show-mobile-nav? service-id services available-kiosks]
+  [:<>
+   [:div.w-full.fixed.min-h-screen.right-0.top-0
+    {:class    "bg-black/50"
+     :style    {:visibility (when-not show-mobile-nav? "hidden")}
+     :on-click #(rf/dispatch [::events/toggle-mobile-nav])}]
+   [:div.items-center.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.ease-in-out.delay-75.bg-white.dark:bg-neutral-900
+    {:class (str "transition-[right] " (if show-mobile-nav? "right-0" "right-[-245px]"))}
+    [:div.flex.justify-center.py-8.items-center
+     [:img.mb-1 {:src   "/images/tubo.png" :style {:maxHeight "25px" :maxWidth "40px"}
+                 :title "Tubo"}]
+     [:h3.text-3xl.font-bold.px-4 "Tubo"]]
+    [:div.relative.flex.flex-col.items-center-justify-center
+     [:div.w-full.box-border.z-10.ml:text-white
+      [: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-kiosk (js/parseInt (.. % -target -value))])
+        :value     service-id
+        :style     {:background "transparent"}}
+       (when services
+         (for [service services]
+           [:option.text-white.bg-neutral-900.border-none
+            {:value (:id service) :key (:id service)}
+            (-> service :info :name)]))]]
+     [:div.flex.absolute.min-h-full.top-0.right-6.items-center.justify-end.z-0
+      [:i.fa-solid.fa-caret-down]]]
+    [:div.relative.pb-4
+     [:ul.flex.font-roboto.flex-col
+      (for [kiosk available-kiosks]
+        [:li.px-5.py-2 {:key kiosk}
+         [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
+                                                  :kioskId   kiosk})}
+          kiosk]])]]
+    [:div.relative.dark:border-neutral-800.border-gray-300.pt-4
+     {:class "border-t-[1px]"}
+     [:ul.flex.font-roboto
+      [:li.px-5.py-2
+       [:a {:href (rfe/href ::routes/settings)}
+        "Settings"]]]]]])
+
 (defn navbar
   [{{:keys [serviceId]} :query-params}]
   (let [!query (r/atom "")
@@ -18,11 +58,11 @@
     (fn [{{:keys [serviceId]} :query-params}]
       (let [service-id                               @(rf/subscribe [:service-id])
             service-color                            @(rf/subscribe [:service-color])
-            search-query                            @(rf/subscribe [:search-query])
+            search-query                             @(rf/subscribe [:search-query])
             services                                 @(rf/subscribe [:services])
             {:keys [current-theme]}                  @(rf/subscribe [:settings])
             id                                       (js/parseInt (or serviceId service-id))
-            mobile-nav?                              @(rf/subscribe [:show-mobile-nav])
+            show-mobile-nav?                         @(rf/subscribe [:show-mobile-nav])
             {:keys [available-kiosks default-kiosk]} @(rf/subscribe [:kiosks])]
         [:nav.flex.px-2.py-2.5.items-center.sticky.top-0.z-50.font-nunito
          {:style {:background service-color}}
@@ -40,40 +80,35 @@
                                          {:name   ::routes/search
                                           :params {}
                                           :query  {:q search-query :serviceId service-id}}])))}
-           [:div
-            [:input.bg-transparent.text-white.border-none.rounded.py-2.px-0.mx-2.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto
+           [:div.relative
+            [:input.bg-transparent.text-white.border-none.rounded.py-2.pr-6.mx-2.focus:ring-transparent.placeholder-white.box-border.w-40.xs:w-auto
              {:type          "text"
               :ref #(reset! !input %)
               :default-value @!query
               :on-change     #(let [input (.. % -target -value)]
                                 (when-not (empty? input) (rf/dispatch [::events/change-search-query input]))
                                 (reset! !query input))
-              :placeholder   "Search for something"}]]
-           [:div.flex.items-center.px-2.text-white
-            [:button.mx-2
-             {:type "button"
+              :placeholder   "Search for something"}]
+            [:button.mx-2.text-xs.text-white.absolute.right-0.top-3
+             {:type     "button"
               :on-click #(when @!input
                            (set! (.-value @!input) "")
                            (reset! !query "")
                            (.focus @!input))
-              :class (when (empty? @!query) "invisible")}
-             [:i.fa-solid.fa-circle-xmark]]
+              :class    (when (empty? @!query) "invisible")}
+             [:i.fa-solid.fa-circle-xmark]]]
+           [:div.flex.items-center.px-2.text-white
             [:button.mx-2
              {:type "submit"}
              [:i.fa-solid.fa-search]]
-            [:a.mx-2 {:href (rfe/href ::routes/settings)}
+            [:a.mx-2.hidden.ml:block
+             {:href (rfe/href ::routes/settings)}
              [:i.fa-solid.fa-cog]]]]
           [:div.cursor-pointer.px-2.ml:hidden.text-white
            {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
            [:i.fa-solid.fa-bars]]
-          [:div.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] "
-                        (if (= current-theme :light) "bg-white" "bg-neutral-900")
-                        " ml:w-full ml:flex ml:min-h-0 ml:relative 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]]
+          [mobile-nav show-mobile-nav? service-id services available-kiosks]
+          [:div.hidden.ml:flex.w-full
            [:div.relative.flex.flex-col.items-center.justify-center.ml:flex-row
             [:div.w-full.box-border.z-10.ml:text-white
              [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito.px-5.w-full
@@ -90,7 +125,7 @@
            [:div.relative.flex-auto.ml:pl-4
             [:ul.flex.font-roboto.flex-col.ml:flex-row.ml:text-white
              (for [kiosk available-kiosks]
-               [:li.px-5.py-2 {:key kiosk}
+               [:li.px-4.py-2 {:key kiosk}
                 [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
                                                          :kioskId   kiosk})}
                  kiosk]])]]]]]))))