Set up different sidebar sections and improve styling of bottom bar

src/cljs/airsonic_ui/routes.cljs

@@ -28,7 +28,8 @@
 
 (defmethod route-data ::main
   [route-id params query]
-  [:api-request "getAlbumList2" :albumList2 {:type "recent"}])
+  [:api-request "getAlbumList2" :albumList2 {:type "recent"
+                                             :size 18}])
 
 (defmethod route-data ::artist-view
   [route-id params query]

src/cljs/airsonic_ui/views.cljs

@@ -30,11 +30,21 @@
 
 (defn sidebar [user]
   [:aside.menu.section
-   [:p.menu-label user]
+   [:p.menu-label "Music"]
+   [:ul.menu-list
+    [:li [:a "By artist"]]
+    [:li [:a "Top rated"]]
+    [:li [:a "Most played"]]]
+   [:p.menu-label "Playlists"]
+   [:p.menu-label "Shares"]
+   [:p.menu-label "Podcasts"]
+   [:p.menu-label "User area"]
    [:ul.menu-list
     [:li [:a "Settings"]]
     ;; FIXME: Create proper logout event
-    [:li [:a {:on-click #(dispatch [::events/initialize-db]) :href "#"} "Logout"]]]])
+    [:li [:a
+          {:on-click #(dispatch [::events/initialize-db]) :href "#"}
+          (str "Logout (" (:name user) ")")]]]])
 
 ;; putting everything together
 
@@ -42,9 +52,9 @@
   (let [user @(subscribe [::subs/user])
         content @(subscribe [::subs/current-content])]
     [:div
-     [:div.columns
+     [:main.columns
       [:div.column.is-2.sidebar
-       [sidebar]]
+       [sidebar user]]
       [:div.column
        [:section.section
         [breadcrumbs content]

src/cljs/airsonic_ui/views/album.cljs

@@ -17,7 +17,7 @@
 (defn listing [albums]
   ;; always show 5 in a row
   [:div
-   (for [albums (partition-all 5 albums)]
+   (for [albums (partition-all 6 albums)]
      [:div.columns
       (for [[idx album] (map-indexed vector albums)]
-        [:div.column {:key idx} [preview album]])])])
+        [:div.column.is-2 {:key idx} [preview album]])])])

src/cljs/airsonic_ui/views/bottom_bar.cljs

@@ -32,7 +32,7 @@
      [:div.navbar-menu.is-active
       (if currently-playing
         ;; show song info
-        [:section.level
+        [:section.level.audio-interaction
          [:div.level-left>article.media
           [:div.media-left [cover (:item currently-playing) 48]]
           [:div.media-content [current-song-info currently-playing]]]

src/sass/app.sass

@@ -1,5 +1,9 @@
 @import "../../node_modules/bulma/bulma"
 
+// area holding content & side navi
+#app main
+  margin-bottom: 0
+
 // navi on the left side
 .sidebar
   background: $dark
@@ -14,6 +18,16 @@
   .navbar-menu
     align-items: center
 
+  .audio-interaction
+    flex-grow: 1
+
+    .level-left
+      flex-grow: 1
+      flex-shrink: 0
+    .level-right
+      flex-grow: 0
+      flex-shrink: 1
+
 .progress.is-tiny
   height: 0.25rem