Add dark sidebar

src/cljs/airsonic_ui/subs.cljs

@@ -9,6 +9,11 @@
  (fn [db]
    (select-keys (:credentials db) [:u :p])))
 
+(re-frame/reg-sub
+ ::user
+ (fn [{:keys [credentials]}]
+   {:name (:u credentials)}))
+
 (re-frame/reg-sub
  ::server
  (fn [db]

src/cljs/airsonic_ui/views.cljs

@@ -28,21 +28,29 @@
    [:h2.title "Recently played"]
    [album/listing (:album content)]])
 
+(defn sidebar [user]
+  [:aside.menu.section
+   [:p.menu-label (str "User: " (:name user))]
+   [:ul.menu-list
+    [:li [:a "Settings"]]
+    [:li [:a {:on-click #(dispatch [::events/initialize-db]) :href "#"} "Logout"]]]])
+
 ;; putting everything together
 
 (defn app [route params query]
-  (let [login @(subscribe [::subs/login])
+  (let [user @(subscribe [::subs/user])
         content @(subscribe [::subs/current-content])]
     [:div
-     [:section.section>div.container
+     [:div.columns
-      [:div.level
+      [:div.column.is-2.sidebar
-       [:div.level-left [:span (str "Currently logged in as " (:u login))]]
+       [sidebar]]
-       [:div.level-right [:a {:on-click #(dispatch [::events/initialize-db]) :href "#"} "Logout"]]]
+      [:div.column
+       [:section.section
         [breadcrumbs content]
         (case route
           ::routes/main [most-recent content]
           ::routes/artist-view [artist-detail content]
-        ::routes/album-view [album-detail content])]
+          ::routes/album-view [album-detail content])]]]
      [bottom-bar]]))
 
 (defn main-panel []

src/cljs/airsonic_ui/views/bottom_bar.cljs

@@ -21,11 +21,11 @@
             [:p.control>button.button.is-light {:on-click #(dispatch [event])} label])
           buttons))])
 
-(def logo-url "https://airsonic.github.io/airsonic-ui/assets/images/logo/airsonic-dark-350x100.png")
+  (def logo-url "https://airsonic.github.io/airsonic-ui/assets/images/logo/airsonic-light-350x100.png")
 
 (defn bottom-bar []
   (let [currently-playing @(subscribe [::subs/currently-playing])]
-    [:nav.navbar.is-fixed-bottom
+    [:nav.navbar.is-fixed-bottom.playback-area
      [:div.navbar-brand
       [:div.navbar-item
        [:img {:src logo-url}]]]
@@ -38,4 +38,4 @@
           [:div.media-content [current-song-info currently-playing]]]
          [:div.level-right [playback-controls]]]
         ;; not playing anything
-        [:span "Currently no song selected"])]]))
+        [:p.idle-notification "Currently no song selected"])]]))

src/sass/app.sass

@@ -1,5 +1,19 @@
 @import "../../node_modules/bulma/bulma"
 
+// navi on the left side
+.sidebar
+  background: $dark
+  a
+    color: $light
+
+// bottom bar
+.playback-area
+  background: $dark
+  color: $light
+
+  .navbar-menu
+    align-items: center
+
 .progress.is-tiny
   height: 0.25rem