near/airsonic-ui
1
0
Fork 0
mirror of https://github.com/heyarne/airsonic-ui.git synced 2026-05-07 02:33:39 +02:00
Code Issues Projects Releases Wiki Activity

Add burger menu

Browse source
This commit is contained in:
Arne Schlüter 2018-08-29 17:28:26 +02:00
commit 3b58648b82
1 changed files with 36 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/cljs/airsonic_ui/views.cljs
View file

@ -2,6 +2,7 @@
"This module contains the outmost layer of our app views. It makes sure that "This module contains the outmost layer of our app views. It makes sure that
the proper subscriptions are run and arranges the complete layout." the proper subscriptions are run and arranges the complete layout."
(:require [re-frame.core :refer [dispatch subscribe]] (:require [re-frame.core :refer [dispatch subscribe]]
[reagent.core :as r]
[airsonic-ui.routes :as routes :refer [url-for]] [airsonic-ui.routes :as routes :refer [url-for]]
[airsonic-ui.events :as events] [airsonic-ui.events :as events]
[airsonic-ui.subs :as subs] [airsonic-ui.subs :as subs]
@ -20,32 +21,41 @@
(defn navbar-top (defn navbar-top
"Contains search, some navigational links and the logo" "Contains search, some navigational links and the logo"
[{:keys [user]}] [_]
(let [active? (r/atom false)
toggle-active #(swap! active? not)
navbar-item (fn navbar-item [{:keys [href]} label]
[:a.navbar-item {:href href :on-click toggle-active} label])]
(fn [{:keys [user]}]
[:nav.navbar.is-fixed-top.is-dark {:role "navigation", :aria-label "search and navigation"} [:nav.navbar.is-fixed-top.is-dark {:role "navigation", :aria-label "search and navigation"}
;; user is `nil` when we're not logged in, we can hide the extended navigation
[:div.navbar-brand [:div.navbar-brand
[:div.navbar-item>img {:src logo-url}]] [:div.navbar-item>img {:src logo-url}]
;; user is `nil` when we're not logged in, we can hide the extended navbar [:div.navbar-burger.burger {:on-click toggle-active} (repeat 3 [:span])]]
(when user (when user
[:div.navbar-menu [(if @active? :div.navbar-menu.is-active :div.navbar-menu)
[:div.navbar-start [:div.navbar-start
[:div.navbar-item [search/form]]] [:div.navbar-item [search/form]]]
[:div.navbar-end [:div.navbar-end
[:div.navbar-item.has-dropdown.is-hoverable [:div.navbar-item.has-dropdown.is-hoverable
[:div.navbar-link "Library"] [:div.navbar-link "Library"]
[:div.navbar-dropdown [:div.navbar-dropdown
[:a.navbar-item {:href (url-for ::routes/library {:criteria "recent"})} "Recently played"] [navbar-item {:href (url-for ::routes/library {:criteria "recent"})} "Recently played"]
[:a.navbar-item {:href (url-for ::routes/library {:criteria "newest"})} "Newest additions"] [navbar-item {:href (url-for ::routes/library {:criteria "newest"})} "Newest additions"]
[:a.navbar-item {:href (url-for ::routes/library {:criteria "starred"})} "Starred"]]] [navbar-item {:href (url-for ::routes/library {:criteria "starred"})} "Starred"]]]
[:a.navbar-item {} "Podcasts"] [navbar-item {} "Podcasts"]
[:a.navbar-item {} "Playlists"] [navbar-item {} "Playlists"]
[:a.navbar-item {} "Shares"] [navbar-item {} "Shares"]
[:div.navbar-item.has-dropdown.is-hoverable [:div.navbar-item.has-dropdown.is-hoverable
[:div.navbar-link "More"] [:div.navbar-link "More"]
[:div.navbar-dropdown.is-right [:div.navbar-dropdown.is-right
[:a.navbar-item {:disabled true} "Settings"] [navbar-item "Settings"]
[:a.navbar-item [:a.navbar-item
{:on-click #(dispatch [::events/logout]) :href "#"} {:on-click (fn [_]
(str "Logout (" (:name user) ")")]]]]])]) (toggle-active)
(dispatch [::events/logout]))
:href "#"}
(str "Logout (" (:name user) ")")]]]]])])))
(defn media-content (defn media-content
"Provides the complete UI to browse the media library, interact with search "Provides the complete UI to browse the media library, interact with search