From 65430334ce90455fd3783abb9f7c55f88358b4cf Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 22 Mar 2020 14:57:21 +0900
Subject: [PATCH] Fix #6085

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

diff --git a/src/client/app.vue b/src/client/app.vue
index 53347dfb8..5a3808226 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -43,7 +43,6 @@
 				<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>
 				<button class="item _button index active" @click="top()" v-if="$route.name === 'index'">
 					<fa :icon="faHome" fixed-width/><span class="text">{{ $store.getters.isSignedIn ? $t('timeline') : $t('home') }}</span>
 				</button>
@@ -822,8 +821,6 @@ export default Vue.extend({
 			z-index: 1001;
 			width: $nav-width;
 			height: 100vh;
-			padding: 16px 0;
-			padding-bottom: calc(3.7rem + 24px);
 			box-sizing: border-box;
 			overflow: auto;
 			background: var(--navBg);
@@ -836,13 +833,21 @@ export default Vue.extend({
 
 			@media (max-width: $nav-icon-only-threshold) and (min-width: $nav-hide-threshold + 1px) {
 				width: $nav-icon-only-width;
-				padding: 8px 0;
-				padding-bottom: calc(3.7rem + 24px);
 
 				> .divider {
 					margin: 8px auto;
 					width: calc(100% - 32px);
 				}
+
+				> .item {
+					&:first-child {
+						margin-bottom: 8px;
+					}
+
+					&:last-child {
+						margin-top: 8px;
+					}
+				}
 			}
 
 			> .item {
@@ -892,15 +897,25 @@ export default Vue.extend({
 					color: var(--navActive);
 				}
 
-				&:last-child {
-					position: fixed;
-					bottom: 0;
-					width: inherit;
+				&:first-child {
+					position: sticky;
+					z-index: 1;
+					top: 0;
 					padding-top: 8px;
 					padding-bottom: 8px;
+					margin-bottom: 16px;
+					background: var(--navBg);
+					border-bottom: solid 1px var(--divider);
+				}
+
+				&:last-child {
+					position: sticky;
+					bottom: 0;
+					padding-top: 8px;
+					padding-bottom: 8px;
+					margin-top: 16px;
 					background: var(--navBg);
 					border-top: solid 1px var(--divider);
-					border-right: solid 1px var(--divider);
 				}
 
 				@media (max-width: $nav-icon-only-threshold) and (min-width: $nav-hide-threshold + 1px) {