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