diff --git a/changes/changelog.d/sidebar.enhancement b/changes/changelog.d/sidebar.enhancement new file mode 100644 index 0000000000000000000000000000000000000000..280aaed51a72fd3fda1de6d5eaa709707721853e --- /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 fb4074d80703ff8c13685eb7ff1298551e3ff250..94815372eff2fa630f333dbd52b9a24cfa2052fd 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;