mirror of
https://github.com/heyarne/airsonic-ui.git
synced 2026-05-07 02:33:39 +02:00
Add burger menu
This commit is contained in:
parent
c42b7783fe
commit
3b58648b82
1 changed files with 36 additions and 26 deletions
|
|
@ -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]}]
|
[_]
|
||||||
[:nav.navbar.is-fixed-top.is-dark {:role "navigation", :aria-label "search and navigation"}
|
(let [active? (r/atom false)
|
||||||
[:div.navbar-brand
|
toggle-active #(swap! active? not)
|
||||||
[:div.navbar-item>img {:src logo-url}]]
|
navbar-item (fn navbar-item [{:keys [href]} label]
|
||||||
;; user is `nil` when we're not logged in, we can hide the extended navbar
|
[:a.navbar-item {:href href :on-click toggle-active} label])]
|
||||||
(when user
|
(fn [{:keys [user]}]
|
||||||
[:div.navbar-menu
|
[:nav.navbar.is-fixed-top.is-dark {:role "navigation", :aria-label "search and navigation"}
|
||||||
[:div.navbar-start
|
;; user is `nil` when we're not logged in, we can hide the extended navigation
|
||||||
[:div.navbar-item [search/form]]]
|
[:div.navbar-brand
|
||||||
[:div.navbar-end
|
[:div.navbar-item>img {:src logo-url}]
|
||||||
[:div.navbar-item.has-dropdown.is-hoverable
|
[:div.navbar-burger.burger {:on-click toggle-active} (repeat 3 [:span])]]
|
||||||
[:div.navbar-link "Library"]
|
(when user
|
||||||
[:div.navbar-dropdown
|
[(if @active? :div.navbar-menu.is-active :div.navbar-menu)
|
||||||
[:a.navbar-item {:href (url-for ::routes/library {:criteria "recent"})} "Recently played"]
|
[:div.navbar-start
|
||||||
[:a.navbar-item {:href (url-for ::routes/library {:criteria "newest"})} "Newest additions"]
|
[:div.navbar-item [search/form]]]
|
||||||
[:a.navbar-item {:href (url-for ::routes/library {:criteria "starred"})} "Starred"]]]
|
[:div.navbar-end
|
||||||
[:a.navbar-item {} "Podcasts"]
|
[:div.navbar-item.has-dropdown.is-hoverable
|
||||||
[:a.navbar-item {} "Playlists"]
|
[:div.navbar-link "Library"]
|
||||||
[:a.navbar-item {} "Shares"]
|
[:div.navbar-dropdown
|
||||||
[:div.navbar-item.has-dropdown.is-hoverable
|
[navbar-item {:href (url-for ::routes/library {:criteria "recent"})} "Recently played"]
|
||||||
[:div.navbar-link "More"]
|
[navbar-item {:href (url-for ::routes/library {:criteria "newest"})} "Newest additions"]
|
||||||
[:div.navbar-dropdown.is-right
|
[navbar-item {:href (url-for ::routes/library {:criteria "starred"})} "Starred"]]]
|
||||||
[:a.navbar-item {:disabled true} "Settings"]
|
[navbar-item {} "Podcasts"]
|
||||||
[:a.navbar-item
|
[navbar-item {} "Playlists"]
|
||||||
{:on-click #(dispatch [::events/logout]) :href "#"}
|
[navbar-item {} "Shares"]
|
||||||
(str "Logout (" (:name user) ")")]]]]])])
|
[:div.navbar-item.has-dropdown.is-hoverable
|
||||||
|
[:div.navbar-link "More"]
|
||||||
|
[:div.navbar-dropdown.is-right
|
||||||
|
[navbar-item "Settings"]
|
||||||
|
[:a.navbar-item
|
||||||
|
{:on-click (fn [_]
|
||||||
|
(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
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue