:art:

2 files changed, 168 insertions, 126 deletions

diff --git a/src/client/app/desktop/views/components/ui.sidebar.vue b/src/client/app/desktop/views/components/ui.sidebar.vue
index a411080734..716d3b0e59 100644
--- a/src/client/app/desktop/views/components/ui.sidebar.vue
+++ b/src/client/app/desktop/views/components/ui.sidebar.vue
@@ -1,62 +1,64 @@
 <template>
-<div class="header" :class="$store.state.device.navbar">
-	<div class="post">
-		<button @click="post" title="%i18n:@post%">%fa:pencil-alt%</button>
-	</div>
-
-	<div class="nav" v-if="$store.getters.isSignedIn">
-		<div class="home" :class="{ active: $route.name == 'index' }" @click="goToTop">
-			<router-link to="/">%fa:home%</router-link>
-		</div>
-		<div class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop">
-			<router-link to="/deck">%fa:columns%</router-link>
+<div class="header" :class="navbar">
+	<div class="body">
+		<div class="post">
+			<button @click="post" title="%i18n:@post%">%fa:pencil-alt%</button>
 		</div>
-		<div class="messaging">
-			<a @click="messaging">%fa:comments%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template></a>
-		</div>
-		<div class="game">
-			<a @click="game">%fa:gamepad%<template v-if="hasGameInvitations">%fa:circle%</template></a>
-		</div>
-	</div>
 
-	<div class="nav bottom" v-if="$store.getters.isSignedIn">
-		<div>
-			<a @click="drive">%fa:cloud%</a>
-		</div>
-		<div ref="notificationsButton" :class="{ active: showNotifications }" style="z-index:1;">
-			<a @click="notifications">%fa:R bell%</a>
-		</div>
-		<div>
-			<a @click="settings">%fa:cog%</a>
+		<div class="nav" v-if="$store.getters.isSignedIn">
+			<div class="home" :class="{ active: $route.name == 'index' }" @click="goToTop">
+				<router-link to="/">%fa:home%</router-link>
+			</div>
+			<div class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop">
+				<router-link to="/deck">%fa:columns%</router-link>
+			</div>
+			<div class="messaging">
+				<a @click="messaging">%fa:comments%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template></a>
+			</div>
+			<div class="game">
+				<a @click="game">%fa:gamepad%<template v-if="hasGameInvitations">%fa:circle%</template></a>
+			</div>
 		</div>
-	</div>
-
-	<div class="account">
-		<router-link :to="`/@${ $store.state.i.username }`">
-			<mk-avatar class="avatar" :user="$store.state.i"/>
-		</router-link>
 
-		<div class="nav menu">
-			<div class="signout">
-				<a @click="signout">%fa:power-off%</a>
+		<div class="nav bottom" v-if="$store.getters.isSignedIn">
+			<div>
+				<a @click="drive">%fa:cloud%</a>
+			</div>
+			<div ref="notificationsButton" :class="{ active: showNotifications }">
+				<a @click="notifications">%fa:R bell%</a>
 			</div>
 			<div>
-				<router-link to="/i/favorites">%fa:star%</router-link>
+				<a @click="settings">%fa:cog%</a>
 			</div>
-			<div v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
-				<a @click="followRequests">%fa:envelope R%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
+		</div>
+
+		<div class="account">
+			<router-link :to="`/@${ $store.state.i.username }`">
+				<mk-avatar class="avatar" :user="$store.state.i"/>
+			</router-link>
+
+			<div class="nav menu">
+				<div class="signout">
+					<a @click="signout">%fa:power-off%</a>
+				</div>
+				<div>
+					<router-link to="/i/favorites">%fa:star%</router-link>
+				</div>
+				<div v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
+					<a @click="followRequests">%fa:envelope R%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
+				</div>
 			</div>
 		</div>
-	</div>
 
-	<div class="nav dark">
-		<div>
-			<a @click="dark"><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template></a>
+		<div class="nav dark">
+			<div>
+				<a @click="dark"><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template></a>
+			</div>
 		</div>
 	</div>
 
-	<transition name="slide">
-		<div class="notifications" v-if="showNotifications" ref="notifications">
+	<transition :name="`slide-${navbar}`">
+		<div class="notifications" v-if="showNotifications" ref="notifications" :class="navbar">
 			<mk-notifications/>
 		</div>
 	</transition>
@@ -85,7 +87,11 @@ export default Vue.extend({
 	computed: {
 		hasUnreadMessagingMessage(): boolean {
 			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
-		}
+		},
+
+		navbar(): string {
+			return this.$store.state.device.navbar;
+		},
 	},
 
 	mounted() {
@@ -204,126 +210,159 @@ export default Vue.extend({
 	z-index 1000
 	width $width
 	height 100%
-	background var(--desktopHeaderBg)
-	box-shadow var(--shadowRight)
 
 	&.left
 		left 0
+		box-shadow var(--shadowRight)
 
 	&.right
 		right 0
+		box-shadow var(--shadowLeft)
 
-	> .post
+	> .body
+		position fixed
+		top 0
+		z-index 1
 		width $width
-		height $width
-		padding 12px
-
-		> button
-			display inline-block
-			margin 0
-			padding 0
-			height 100%
-			width 100%
-			font-size 1.2em
-			font-weight normal
-			text-decoration none
-			color var(--primaryForeground)
-			background var(--primary) !important
-			outline none
-			border none
-			border-radius 100%
-			transition background 0.1s ease
-			cursor pointer
-
-			*
-				pointer-events none
-
-			&:hover
-				background var(--primaryLighten10) !important
+		height 100%
+		background var(--desktopHeaderBg)
 
-			&:active
-				background var(--primaryDarken10) !important
-				transition background 0s ease
+		> .post
+			width $width
+			height $width
+			padding 12px
 
-	.nav
-		> *
-			&.active
-				box-shadow -4px 0 var(--primary) inset
+			> button
+				display inline-block
+				margin 0
+				padding 0
+				height 100%
+				width 100%
+				font-size 1.2em
+				font-weight normal
+				text-decoration none
+				color var(--primaryForeground)
+				background var(--primary) !important
+				outline none
+				border none
+				border-radius 100%
+				transition background 0.1s ease
+				cursor pointer
 
-			> *
-				display block
-				width $width
-				line-height 52px
-				text-align center
-				font-size 18px
-				color var(--desktopHeaderFg)
+				*
+					pointer-events none
 
 				&:hover
-					background rgba(0, 0, 0, 0.05)
-					color var(--desktopHeaderHoverFg)
-					text-decoration none
+					background var(--primaryLighten10) !important
 
 				&:active
-					background rgba(0, 0, 0, 0.1)
-
-	> .nav.bottom
-		position absolute
-		bottom 128px
-		left 0
+					background var(--primaryDarken10) !important
+					transition background 0s ease
 
-	> .account
-		position absolute
-		bottom 64px
-		left 0
-		width $width
-		height $width
-		padding 14px
+		> .nav.bottom
+			position absolute
+			bottom 128px
+			left 0
 
-		> .menu
-			display none
+		> .account
 			position absolute
 			bottom 64px
 			left 0
-			background var(--desktopHeaderBg)
+			width $width
+			height $width
+			padding 14px
 
-		&:hover
 			> .menu
-				display block
+				display none
+				position absolute
+				bottom 64px
+				left 0
+				background var(--desktopHeaderBg)
 
-		> *:not(.menu)
-			display block
-			width 100%
-			height 100%
+			&:hover
+				> .menu
+					display block
 
-			> .avatar
-				pointer-events none
+			> *:not(.menu)
+				display block
 				width 100%
 				height 100%
 
-	> .dark
-		position absolute
-		bottom 0
-		left 0
-		width $width
-		height $width
+				> .avatar
+					pointer-events none
+					width 100%
+					height 100%
+
+		> .dark
+			position absolute
+			bottom 0
+			left 0
+			width $width
+			height $width
 
 	> .notifications
 		position fixed
 		top 0
-		left $width
 		width 350px
 		height 100%
 		overflow auto
 		background var(--face)
-		box-shadow var(--shadowRight)
 
-.slide-enter-active,
-.slide-leave-active {
+		&.left
+			left $width
+			box-shadow var(--shadowRight)
+
+		&.right
+			right $width
+			box-shadow var(--shadowLeft)
+
+	.nav
+		> *
+			> *
+				display block
+				width $width
+				line-height 52px
+				text-align center
+				font-size 18px
+				color var(--desktopHeaderFg)
+
+				&:hover
+					background rgba(0, 0, 0, 0.05)
+					color var(--desktopHeaderHoverFg)
+					text-decoration none
+
+				&:active
+					background rgba(0, 0, 0, 0.1)
+
+	&.left
+		.nav
+			> *
+				&.active
+					box-shadow -4px 0 var(--primary) inset
+
+	&.right
+		.nav
+			> *
+				&.active
+					box-shadow 4px 0 var(--primary) inset
+
+.slide-left-enter-active,
+.slide-left-leave-active {
 	transition: all 0.2s ease;
 }
 
-.slide-enter, .slide-leave-to {
+.slide-left-enter, .slide-left-leave-to {
 	transform: translateX(-16px);
 	opacity: 0;
 }
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+	transition: all 0.2s ease;
+}
+
+.slide-right-enter, .slide-right-leave-to {
+	transform: translateX(16px);
+	opacity: 0;
+}
 </style>
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index d5faf4557c..2cbceb8e78 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -125,13 +125,16 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 			//#region shadow
 			const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
 			const shadowRight = '4px 0 4px rgba(0, 0, 0, 0.1)';
+			const shadowLeft = '-4px 0 4px rgba(0, 0, 0, 0.1)';
 			if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadow', shadow);
 			if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadowRight', shadowRight);
+			if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadowLeft', shadowLeft);
 			os.store.watch(s => {
 				return s.settings.useShadow;
 			}, v => {
 				document.documentElement.style.setProperty('--shadow', v ? shadow : 'none');
 				document.documentElement.style.setProperty('--shadowRight', v ? shadowRight : 'none');
+				document.documentElement.style.setProperty('--shadowLeft', v ? shadowLeft : 'none');
 			});
 			//#endregion