From 8eec8ea35f817682f7ae8121244f4757b6b82881 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 8 Feb 2020 12:13:15 +0900
Subject: [PATCH] Fix #5844

---
 src/client/app.vue | 34 ++++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/client/app.vue b/src/client/app.vue
index 79873f131..ace3ba868 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -29,18 +29,13 @@
 			<button class="item _button account" @click="openAccountMenu" v-if="$store.getters.isSignedIn">
 				<mk-avatar :user="$store.state.i" class="avatar"/><mk-acct class="text" :user="$store.state.i"/>
 			</button>
+			<div class="divider"></div>
 			<router-link class="item" active-class="active" to="/" exact v-if="$store.getters.isSignedIn">
 				<fa :icon="faHome" fixed-width/><span class="text">{{ $t('timeline') }}</span>
 			</router-link>
 			<router-link class="item" active-class="active" to="/" exact v-else>
 				<fa :icon="faHome" fixed-width/><span class="text">{{ $t('home') }}</span>
 			</router-link>
-			<router-link class="item" active-class="active" to="/featured">
-				<fa :icon="faFireAlt" fixed-width/><span class="text">{{ $t('featured') }}</span>
-			</router-link>
-			<router-link class="item" active-class="active" to="/explore">
-				<fa :icon="faHashtag" fixed-width/><span class="text">{{ $t('explore') }}</span>
-			</router-link>
 			<button class="item _button" @click="notificationsOpen = !notificationsOpen" ref="notificationButton" v-if="$store.getters.isSignedIn">
 				<fa :icon="faBell" fixed-width/><span class="text">{{ $t('notifications') }}</span>
 				<i v-if="$store.state.i.hasUnreadNotification"><fa :icon="faCircle"/></i>
@@ -56,16 +51,24 @@
 			<router-link class="item" active-class="active" to="/my/drive" v-if="$store.getters.isSignedIn">
 				<fa :icon="faCloud" fixed-width/><span class="text">{{ $t('drive') }}</span>
 			</router-link>
+			<div class="divider"></div>
+			<router-link class="item" active-class="active" to="/featured">
+				<fa :icon="faFireAlt" fixed-width/><span class="text">{{ $t('featured') }}</span>
+			</router-link>
+			<router-link class="item" active-class="active" to="/explore">
+				<fa :icon="faHashtag" fixed-width/><span class="text">{{ $t('explore') }}</span>
+			</router-link>
 			<router-link class="item" active-class="active" to="/announcements">
 				<fa :icon="faBroadcastTower" fixed-width/><span class="text">{{ $t('announcements') }}</span>
 				<i v-if="$store.getters.isSignedIn && $store.state.i.hasUnreadAnnouncement"><fa :icon="faCircle"/></i>
 			</router-link>
-			<button class="item _button" :class="{ active: $route.path === '/instance' || $route.path.startsWith('/instance/') }" v-if="$store.getters.isSignedIn && ($store.state.i.isAdmin || $store.state.i.isModerator)" @click="oepnInstanceMenu">
-				<fa :icon="faServer" fixed-width/><span class="text">{{ $t('instance') }}</span>
-			</button>
 			<button class="item _button" @click="search()">
 				<fa :icon="faSearch" fixed-width/><span class="text">{{ $t('search') }}</span>
 			</button>
+			<div class="divider"></div>
+			<button class="item _button" :class="{ active: $route.path === '/instance' || $route.path.startsWith('/instance/') }" v-if="$store.getters.isSignedIn && ($store.state.i.isAdmin || $store.state.i.isModerator)" @click="oepnInstanceMenu">
+				<fa :icon="faServer" fixed-width/><span class="text">{{ $t('instance') }}</span>
+			</button>
 			<button class="item _button" @click="more">
 				<fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $t('more') }}</span>
 				<i v-if="$store.getters.isSignedIn && ($store.state.i.hasUnreadMentions || $store.state.i.hasUnreadSpecifiedNotes)"><fa :icon="faCircle"/></i>
@@ -785,13 +788,24 @@ export default Vue.extend({
 			z-index: 1001;
 			width: $nav-width;
 			height: 100vh;
-			padding-top: 16px;
+			padding: 16px 0;
 			box-sizing: border-box;
+			overflow: auto;
 			background: var(--navBg);
 			border-right: solid 1px var(--divider);
 
+			> .divider {
+				margin: 16px 0;
+				border-top: solid 1px var(--divider);
+			}
+
 			@media (max-width: $nav-icon-only-threshold) {
 				width: $nav-icon-only-width;
+				padding: 8px 0;
+
+				> .divider {
+					margin: 8px 0;
+				}
 			}
 
 			> .item {