🎨

src/client/app/desktop/views/components/ui.sidebar.vue

@@ -1,5 +1,6 @@
 <template>
-<div class="header" :class="$store.state.device.navbar">
+<div class="header" :class="navbar">
+	<div class="body">
 		<div class="post">
 			<button @click="post" title="%i18n:@post%">%fa:pencil-alt%</button>
 		</div>
@@ -23,7 +24,7 @@
 			<div>
 				<a @click="drive">%fa:cloud%</a>
 			</div>
-		<div ref="notificationsButton" :class="{ active: showNotifications }" style="z-index:1;">
+			<div ref="notificationsButton" :class="{ active: showNotifications }">
 				<a @click="notifications">%fa:R bell%</a>
 			</div>
 			<div>
@@ -54,9 +55,10 @@
 				<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">
+	<transition :name="`slide-${navbar}`">
-		<div class="notifications" v-if="showNotifications" ref="notifications">
+		<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,14 +210,22 @@ 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)
+
+	> .body
+		position fixed
+		top 0
+		z-index 1
+		width $width
+		height 100%
+		background var(--desktopHeaderBg)
 
 		> .post
 			width $width
@@ -245,27 +259,6 @@ export default Vue.extend({
 					background var(--primaryDarken10) !important
 					transition background 0s ease
 
-	.nav
-		> *
-			&.active
-				box-shadow -4px 0 var(--primary) inset
-
-			> *
-				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)
-
 		> .nav.bottom
 			position absolute
 			bottom 128px
@@ -310,20 +303,66 @@ export default Vue.extend({
 	> .notifications
 		position fixed
 		top 0
-		left $width
 		width 350px
 		height 100%
 		overflow auto
 		background var(--face)
+
+		&.left
+			left $width
 			box-shadow var(--shadowRight)
 
-.slide-enter-active,
+		&.right
-.slide-leave-active {
+			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>

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