From 01e06de812dabe92167936d9ac13b49b9df034cd Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Sat, 28 Apr 2018 14:58:25 +0200
Subject: [PATCH] More structured menus in sidebar

---
 changes/changelog.d/sidebar.enhancement |  1 +
 front/src/components/Sidebar.vue        | 54 +++++++++++++++++--------
 2 files changed, 38 insertions(+), 17 deletions(-)
 create mode 100644 changes/changelog.d/sidebar.enhancement

diff --git a/changes/changelog.d/sidebar.enhancement b/changes/changelog.d/sidebar.enhancement
new file mode 100644
index 000000000..280aaed51
--- /dev/null
+++ b/changes/changelog.d/sidebar.enhancement
@@ -0,0 +1 @@
+More structured menus in sidebar
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index fb4074d80..94815372e 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -31,23 +31,38 @@
   <div class="tabs">
     <div class="ui bottom attached active tab" data-tab="library">
       <div class="ui inverted vertical fluid menu">
-        <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'profile', params: {username: $store.state.auth.username}}"><i class="user icon"></i>{{ $t('Logged in as {%name%}', { name: $store.state.auth.username }) }}</router-link>
-        <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'logout'}"><i class="sign out icon"></i> {{ $t('Logout') }}</router-link>
-        <router-link class="item" v-else :to="{name: 'login'}"><i class="sign in icon"></i> {{ $t('Login') }}</router-link>
-        <router-link class="item" :to="{path: '/library'}"><i class="sound icon"> </i>{{ $t('Browse library') }}</router-link>
-        <router-link class="item" v-if="$store.state.auth.authenticated" :to="{path: '/favorites'}"><i class="heart icon"></i> {{ $t('Favorites') }}</router-link>
-        <a
-          @click="$store.commit('playlists/chooseTrack', null)"
-          v-if="$store.state.auth.authenticated"
-          class="item">
-          <i class="list icon"></i> {{ $t('Playlists') }}
-        </a>
-        <router-link
-          v-if="$store.state.auth.authenticated"
-          class="item" :to="{path: '/activity'}"><i class="bell icon"></i> {{ $t('Activity') }}</router-link>
-        <router-link
-          class="item" v-if="$store.state.auth.availablePermissions['federation.manage']"
-          :to="{path: '/manage/federation/libraries'}"><i class="sitemap icon"></i> {{ $t('Federation') }}</router-link>
+        <div class="item">
+          <div class="header">{{ $t('My account') }}</div>
+          <div class="menu">
+            <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'profile', params: {username: $store.state.auth.username}}"><i class="user icon"></i>{{ $t('Logged in as {%name%}', { name: $store.state.auth.username }) }}</router-link>
+            <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'logout'}"><i class="sign out icon"></i> {{ $t('Logout') }}</router-link>
+            <router-link class="item" v-else :to="{name: 'login'}"><i class="sign in icon"></i> {{ $t('Login') }}</router-link>
+          </div>
+        </div>
+        <div class="item">
+          <div class="header">{{ $t('Music') }}</div>
+          <div class="menu">
+            <router-link class="item" :to="{path: '/library'}"><i class="sound icon"> </i>{{ $t('Browse library') }}</router-link>
+            <router-link class="item" v-if="$store.state.auth.authenticated" :to="{path: '/favorites'}"><i class="heart icon"></i> {{ $t('Favorites') }}</router-link>
+            <a
+              @click="$store.commit('playlists/chooseTrack', null)"
+              v-if="$store.state.auth.authenticated"
+              class="item">
+              <i class="list icon"></i> {{ $t('Playlists') }}
+            </a>
+            <router-link
+              v-if="$store.state.auth.authenticated"
+              class="item" :to="{path: '/activity'}"><i class="bell icon"></i> {{ $t('Activity') }}</router-link>
+          </div>
+        </div>
+        <div class="item" v-if="$store.state.auth.availablePermissions['federation.manage']">
+          <div class="header">{{ $t('Administration') }}</div>
+          <div class="menu">
+            <router-link
+              class="item"
+              :to="{path: '/manage/federation/libraries'}"><i class="sitemap icon"></i> {{ $t('Federation') }}</router-link>
+          </div>
+        </div>
       </div>
     </div>
     <div v-if="queue.previousQueue " class="ui black icon message">
@@ -231,6 +246,11 @@ $sidebar-color: #3D3E3F;
     }
   }
 }
+.vertical.menu {
+  .item .item {
+    font-size: 1em;
+  }
+}
 .tabs {
   flex: 1;
   display: flex;