diff --git a/src/client/app.vue b/src/client/app.vue index 53347dfb8b..5a38082262 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) {