feat(frontend): further modularize nav items

1 files changed, 75 insertions, 109 deletions

diff --git a/src/frontend/tubo/views.cljs b/src/frontend/tubo/views.cljs
index 07495b1..d1e6ede 100644
--- a/src/frontend/tubo/views.cljs
+++ b/src/frontend/tubo/views.cljs
@@ -13,6 +13,29 @@
 (defonce services (rf/dispatch [::events/get-services]))
 (defonce kiosks (rf/dispatch [::events/get-kiosks 0]))
 
+(defn services-dropdown [services service-id service-color]
+  [:div.relative.flex.flex-col.items-center-justify-center.text-white.px-2
+   {:style {:background service-color}}
+   [:div.w-full.box-border.z-10.lg:z-0
+    [:select.border-none.focus:ring-transparent.bg-blend-color-dodge.font-bold.font-nunito.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.items-center.justify-end.absolute.min-h-full.top-0.right-4.lg:right-0.z-0
+    [:i.fa-solid.fa-caret-down]]])
+
+(defn mobile-nav-item [route icon label & {:keys [new-tab?]}]
+  [:li.px-5.py-2
+   [:a.flex {:href route :target (when new-tab? "_blank")}
+    [:div.w-6.flex.justify-center.items-center.mr-4
+     [:i.text-neutral-600.dark:text-neutral-300 {:class icon}]]
+    [:span label]]])
+
 (defn mobile-nav
   [show-mobile-nav? service-id service-color services available-kiosks]
   [:<>
@@ -22,124 +45,67 @@
     [:div.flex.justify-center.py-8.items-center.text-white {:style {:background service-color}}
      [layout/logo]
      [:h3.text-3xl.font-bold.px-4.font-roboto "Tubo"]]
-    [:div.relative.flex.flex-col.items-center-justify-center.text-white {:style {:background service-color}}
-     [: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-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]]]
+    [services-dropdown services service-id service-color]
     [:div.relative.py-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})}
-          [:i.fa-solid.fa-fire.text-neutral-600.dark:text-neutral-300]
-          [:span.ml-7 kiosk]]])]]
+        ^{:key kiosk} [mobile-nav-item
+                       (rfe/href ::routes/kiosk nil
+                                 {:serviceId service-id
+                                  :kioskId   kiosk})
+                       "fa-solid fa-fire" kiosk])]]
     [:div.relative.dark:border-neutral-800.border-gray-300.pt-4
      {:class "border-t-[1px]"}
      [:ul.flex.flex-col.font-roboto
-      [:li.px-5.py-2
-       [:a {:href (rfe/href ::routes/bookmarks)}
-        [:i.fa-solid.fa-bookmark.text-neutral-600.dark:text-neutral-300]
-        [:span.ml-8 "Bookmarks"]]]
-      [:li.px-5.py-2
-       [:a {:href (rfe/href ::routes/settings)}
-        [:i.fa-solid.fa-cog.text-neutral-600.dark:text-neutral-300]
-        [:span.ml-7 "Settings"]]]
-      [:li.px-5.py-2
-       [:a {:href "https://github.com/migalmoreno/tubo" :target "_blank"}
-        [:i.fa-brands.fa-github]
-        [:span.ml-7 "Source"]]]]]]])
+      [mobile-nav-item (rfe/href ::routes/bookmarks) "fa-solid fa-bookmark" "Bookmarks"]
+      [mobile-nav-item (rfe/href ::routes/settings) "fa-solid fa-cog" "Settings"]
+      [mobile-nav-item "https://github.com/migalmoreno/tubo" "fa-brands fa-github" "Source" :new-tab? true]]]]])
 
 (defn navbar
   [{{:keys [serviceId]} :query-params}]
-  (let [!query (r/atom "")
-        !input (r/atom nil)]
-    (fn [{{:keys [serviceId]} :query-params}]
-      (let [service-id                               @(rf/subscribe [:service-id])
-            service-color                            @(rf/subscribe [:service-color])
-            search-query                             @(rf/subscribe [:search-query])
-            services                                 @(rf/subscribe [:services])
-            {:keys [current-theme]}                  @(rf/subscribe [:settings])
-            id                                       (js/parseInt (or serviceId service-id))
-            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}}
-         [:div.flex.items-center.justify-between.flex-auto
-          [:div.px-2
-           [:a.text-white.font-bold
-            {:href (rfe/href ::routes/home)}
-            [:img.mb-1 {:src   "/images/tubo.png" :style {:maxHeight "25px" :maxWidth "40px"}
-                        :title "Tubo"}]]]
-          [:form.flex.items-center.relative
-           {:on-submit (fn [e]
-                         (.preventDefault e)
-                         (when-not (empty? @!query)
-                           (rf/dispatch [::events/navigate
-                                         {:name   ::routes/search
-                                          :params {}
-                                          :query  {:q search-query :serviceId service-id}}])))}
-           [:div.relative
-            [:input.bg-transparent.text-white.border-none.py-2.pr-6.mx-2.focus:ring-transparent.placeholder-white.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"}]
-            [: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]]]
-           [:div.flex.items-center.text-white
-            [:button.mx-2
-             {:type "submit"}
-             [:i.fa-solid.fa-search]]
-            [:a.mx-2.hidden.ml:block
-             {:href (rfe/href ::routes/settings)}
-             [:i.fa-solid.fa-cog]]
-            [:a.mx-2.hidden.ml:block
-             {:href (rfe/href ::routes/bookmarks)}
-             [:i.fa-solid.fa-bookmark]]]]
-          [:div.cursor-pointer.px-2.ml:hidden.text-white
-           {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
-           [:i.fa-solid.fa-bars]]
-          [mobile-nav show-mobile-nav? service-id service-color 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
-              {: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-4.ml:right-0.items-center.justify-end.z-0.ml:text-white
-             [:i.fa-solid.fa-caret-down]]]
-           [: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-3.py-2 {:key kiosk}
-                [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
-                                                         :kioskId   kiosk})}
-                 kiosk]])]]]]]))))
+  (let [service-id                               @(rf/subscribe [:service-id])
+        service-color                            @(rf/subscribe [:service-color])
+        services                                 @(rf/subscribe [:services])
+        {:keys [current-theme]}                  @(rf/subscribe [:settings])
+        id                                       (js/parseInt (or serviceId service-id))
+        show-mobile-nav?                         @(rf/subscribe [:show-mobile-nav])
+        show-search-form? @(rf/subscribe [:show-search-form])
+        {:keys [available-kiosks default-kiosk]} @(rf/subscribe [:kiosks])]
+    [:nav.sticky.flex.items-center.px-2.h-14.top-0.z-50.font-nunito
+     {:style {:background service-color}}
+     [:div.flex.flex-auto.items-center
+      [:div.ml-4
+       [:a.font-bold
+        {:href (rfe/href ::routes/home)}
+        [layout/logo]]]
+      [navigation/search-form]
+      [:div.flex.flex-auto.justify-end.lg:justify-between
+       {:class (when show-search-form? "hidden")}
+       [:div.hidden.lg:flex
+        [navigation/navigation-buttons service-color]
+        [services-dropdown services service-id service-color]
+        [:ul.flex.items-center.px-4.text-white
+        (for [kiosk available-kiosks]
+          [:li.px-3 {:key kiosk}
+           [:a {:href (rfe/href ::routes/kiosk nil {:serviceId service-id
+                                                    :kioskId   kiosk})}
+            kiosk]])]]
+       [:div.flex.items-center.text-white.justify-end.mr-2
+        (when-not show-search-form?
+          [:button.mx-3
+           {:on-click (fn []
+                        (rf/dispatch [::events/toggle-search-form]))}
+           [:i.fa-solid.fa-search]])
+        [:a.mx-3.hidden.lg:block
+         {:href (rfe/href ::routes/settings)}
+         [:i.fa-solid.fa-cog]]
+        [:a.mx-3.hidden.lg:block
+         {:href (rfe/href ::routes/bookmarks)}
+         [:i.fa-solid.fa-bookmark]]
+        [:button.mx-3.lg:hidden
+         {:on-click #(rf/dispatch [::events/toggle-mobile-nav])}
+         [:i.fa-solid.fa-bars]]]
+       [mobile-nav show-mobile-nav? service-id service-color services available-kiosks]]]]))
 
 (defn footer
   []