diff options
| -rw-r--r-- | src/frontend/tubo/navigation/events.cljs | 21 | ||||
| -rw-r--r-- | src/frontend/tubo/navigation/views.cljs | 85 |
2 files changed, 56 insertions, 50 deletions
diff --git a/src/frontend/tubo/navigation/events.cljs b/src/frontend/tubo/navigation/events.cljs index a4c961d..94f5a6e 100644 --- a/src/frontend/tubo/navigation/events.cljs +++ b/src/frontend/tubo/navigation/events.cljs @@ -24,13 +24,21 @@ (fn [_ [_ route]] {:navigate! route})) +(rf/reg-event-db + :navigation/hide-mobile-menu + (fn [db] + (assoc db :navigation/show-mobile-menu false))) + (rf/reg-event-fx - :navigation/toggle-mobile-menu - (fn [{:keys [db]} _] - {:db (assoc db - :navigation/show-mobile-menu - (not (:navigation/show-mobile-menu db))) - :body-overflow (not (:navigation/show-mobile-menu db))})) + :navigation/show-mobile-menu + (fn [{:keys [db]}] + {:db (assoc db :navigation/show-mobile-menu true) + :body-overflow (not (:navigation/show-mobile-menu db)) + :fx [[:dispatch + [:layout/show-bg-overlay + {:extra-classes ["z-30"] + :on-click #(rf/dispatch + [:navigation/hide-mobile-menu])}]]]})) (rf/reg-event-fx :navigation/navigated @@ -46,6 +54,7 @@ :body-overflow false :fx [(when (:main-player/show db) [:dispatch [:bg-player/switch-from-main]]) + [:dispatch [:layout/hide-bg-overlay]] [:dispatch [:queue/show false]] [:dispatch [:services/fetch-all diff --git a/src/frontend/tubo/navigation/views.cljs b/src/frontend/tubo/navigation/views.cljs index 3966483..25985fe 100644 --- a/src/frontend/tubo/navigation/views.cljs +++ b/src/frontend/tubo/navigation/views.cljs @@ -60,35 +60,6 @@ (conj icon {:class ["text-neutral-600" "dark:text-neutral-300"]})] [:span {:class (when active? "font-bold")} label]]]) -(defn mobile-nav - [show-mobile-nav? service-color services available-kiosks & - {:keys [service-id] :as kiosk-args}] - [:<> - [layout/focus-overlay #(rf/dispatch [:navigation/toggle-mobile-menu]) - show-mobile-nav?] - [:div.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.transition-all.ease-in-out.delay-75.bg-white.dark:bg-neutral-900.z-20 - {:class [(if show-mobile-nav? "left-0" "left-[-245px]")]} - [:div.flex.justify-center.py-4.items-center.text-white - {:style {:background service-color}} - [layout/logo :height 75 :width 75] - [:h3.text-3xl.font-bold "Tubo"]] - [services/services-dropdown services service-id service-color] - [:div.relative.py-4 - [:ul.flex.flex-col - (for [[i kiosk] (map-indexed vector available-kiosks)] - ^{:key i} - [mobile-nav-item - (rfe/href :kiosk-page nil {:serviceId service-id :kioskId kiosk}) - [:i.fa-solid.fa-fire] kiosk - :active? (kiosks/kiosk-active? (assoc kiosk-args :kiosk kiosk))])]] - [:div.relative.dark:border-neutral-800.border-gray-300.pt-4 - {:class "border-t-[1px]"} - [:ul.flex.flex-col - [mobile-nav-item (rfe/href :bookmarks-page) [:i.fa-solid.fa-bookmark] - "Bookmarks"] - [mobile-nav-item (rfe/href :settings-page) [:i.fa-solid.fa-cog] - "Settings"]]]]]) - (defn nav-left-content [title] (let [show-search-form? @(rf/subscribe [:search/show-form]) @@ -110,7 +81,7 @@ (when-not (or show-queue? show-main-player? show-search-form?) [:button.text-white.mx-3.lg:hidden {:on-click #(rf/dispatch - [:navigation/toggle-mobile-menu])} + [:navigation/show-mobile-menu])} [:i.fa-solid.fa-bars]]) (when-not (or show-queue? show-main-player? show-search-form?) [:h1.text-white.text-lg.sm:text-xl.font-bold.line-clamp-1.lg:hidden @@ -167,23 +138,11 @@ [:i.fa-solid.fa-bookmark]]]])) (defn navbar - [{{:keys [kioskId]} :query-params path :path :as match}] - (let [service-id @(rf/subscribe [:service-id]) - service-color @(rf/subscribe [:service-color]) - services @(rf/subscribe [:services]) - show-mobile-nav? @(rf/subscribe [:navigation/show-mobile-menu]) - settings @(rf/subscribe [:settings]) - kiosks @(rf/subscribe [:kiosks])] + [match] + (let [service-color @(rf/subscribe [:service-color])] [:nav.sticky.flex.items-center.px-2.h-14.top-0.z-20 {:style {:background service-color}} [:div.flex.flex-auto.items-center - [mobile-nav show-mobile-nav? service-color services - (:available-kiosks kiosks) - :kiosk-id kioskId - :service-id service-id - :default-service (:default-service settings) - :default-kiosk (:default-kiosk kiosks) - :path path] [nav-left-content (case (-> match :data @@ -195,3 +154,41 @@ nil)] [search-form] [nav-right-content match]]])) + +(defn mobile-menu + [{{:keys [kioskId]} :query-params path :path}] + (let [service-id @(rf/subscribe [:service-id]) + service-color @(rf/subscribe [:service-color]) + services @(rf/subscribe [:services]) + show-mobile-nav? @(rf/subscribe [:navigation/show-mobile-menu]) + kiosks @(rf/subscribe [:kiosks]) + settings @(rf/subscribe [:settings])] + [:div.fixed.overflow-x-hidden.min-h-screen.w-60.top-0.transition-all.ease-in-out.delay-75.bg-white.dark:bg-neutral-900.z-30 + {:class [(if show-mobile-nav? "left-0" "left-[-245px]")]} + [:div.flex.justify-center.py-4.items-center.text-white + {:style {:background service-color}} + [layout/logo :height 75 :width 75] + [:h3.text-3xl.font-bold "Tubo"]] + [services/services-dropdown services service-id service-color] + [:div.relative.py-4 + [:ul.flex.flex-col + (for [[i kiosk] (map-indexed vector (:available-kiosks kiosks))] + ^{:key i} + [mobile-nav-item + (rfe/href :kiosk-page nil {:serviceId service-id :kioskId kiosk}) + [:i.fa-solid.fa-fire] kiosk + :active? + (kiosks/kiosk-active? + :kiosk-id kioskId + :service-id service-id + :default-service (:default-service settings) + :default-kiosk (:default-kiosk kiosks) + :path path + :kiosk kiosk)])]] + [:div.relative.dark:border-neutral-800.border-gray-300.pt-4 + {:class "border-t-[1px]"} + [:ul.flex.flex-col + [mobile-nav-item (rfe/href :bookmarks-page) [:i.fa-solid.fa-bookmark] + "Bookmarks"] + [mobile-nav-item (rfe/href :settings-page) [:i.fa-solid.fa-cog] + "Settings"]]]])) |