Go to top

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

@@ -9,6 +9,9 @@
 				<div class="left">
 					<x-nav/>
 				</div>
+				<div class="center">
+					<div class="icon" @click="goToTop"></div>
+				</div>
 				<div class="right">
 					<x-search/>
 					<x-account v-if="$store.getters.isSignedIn"/>
@@ -42,6 +45,14 @@ export default Vue.extend({
 		XPost,
 		XClock,
 	},
+	methods: {
+		goToTop() {
+			window.scrollTo({
+				top: 0,
+				behavior: 'smooth'
+			});
+		}
+	},
 	mounted() {
 		this.$store.commit('setUiHeaderHeight', 48);
 
@@ -142,26 +153,25 @@ root(isDark)
 				max-width 1300px
 				margin 0 auto
 
-				&:before
-					content ""
-					position absolute
-					top 0
-					left 0
-					display block
-					width 100%
-					height 48px
-					background-image isDark ? url('/assets/desktop/header-icon.dark.svg') : url('/assets/desktop/header-icon.light.svg')
-					background-size 24px
-					background-position center
-					background-repeat no-repeat
-					opacity 0.3
+				> .center
+					margin auto
+					> .icon
+						position absolute
+						top 0
+						left 0
+						display block
+						width 48px
+						height 48px
+						background-image isDark ? url('/assets/desktop/header-icon.dark.svg') : url('/assets/desktop/header-icon.light.svg')
+						background-size 24px
+						background-position center
+						background-repeat no-repeat
+						opacity 0.3
 
 				> .left
-					margin 0 auto 0 0
 					height 48px
 
 				> .right
-					margin 0 0 0 auto
 					height 48px
 
 					> *