Make left side bar move in/out

webapp/src/App.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-#app(:class="{'has-background-room': backgroundRoom, 'override-sidebar-collapse': overrideSidebarCollapse}", :style="[themeVariables, browserhackStyle, mediaConstraintsStyle]", :key="`${userLocale}-${userTimezone}`")
+#app(ref="app", :class="{'has-background-room': backgroundRoom, 'override-sidebar-collapse': overrideSidebarCollapse}", :style="[themeVariables, browserhackStyle, mediaConstraintsStyle]", :key="`${userLocale}-${userTimezone}`")
 	.fatal-connection-error(v-if="fatalConnectionError")
 		template(v-if="fatalConnectionError.code === 'world.unknown_world'")
 			.mdi.mdi-help-circle
@@ -18,11 +18,12 @@
 			h1 {{ $t('App:fatal-connection-error:else:headline') }}
 		p.code error code: {{ fatalConnectionError.code }}
 	template(v-else-if="world")
-		app-bar(v-if="$mq.below['l']", @toggleSidebar="toggleSidebar")
-		transition(name="backdrop")
-			.sidebar-backdrop(v-if="$mq.below['l'] && showSidebar && !overrideSidebarCollapse", @pointerup="showSidebar = false")
-		rooms-sidebar(:show="$mq.above['l'] || showSidebar || overrideSidebarCollapse", @close="showSidebar = false")
-		router-view(:key="!$route.path.startsWith('/admin') ? $route.fullPath : null", :role="roomHasMedia ? '' : 'main'")
+		app-bar(ref="appBar", v-if="$mq.below['l']")
+		//- transition(name="backdrop")
+		//- 	.sidebar-backdrop(v-if="$mq.below['l'] && showSidebar && !overrideSidebarCollapse", @pointerup="showSidebar = false")
+		bunt-icon-button#btn-close-sidebar(ref="closeSidebarButton", @click="toggleSidebar") menu
+		rooms-sidebar(ref="roomsSidebar", @toggleSidebar="toggleSidebar")
+		router-view(ref="routerView", class="router-view" :key="!$route.path.startsWith('/admin') ? $route.fullPath : null", :role="roomHasMedia ? '' : 'main'")
 		//- defining keys like this keeps the playing dom element alive for uninterupted transitions
 		media-source(v-if="roomHasMedia && user.profile.greeted", ref="primaryMediaSource", :room="room", :key="room.id", role="main")
 		media-source(v-if="call", ref="channelCallSource", :call="call", :background="call.channel !== $route.params.channelId", :key="call.id", @close="$store.dispatch('chat/leaveCall')")
@@ -105,9 +106,11 @@
 				'--has-stagetools': hasStageTools ? '1' : '0'
 			}
 			if (this.mediaSourcePlaceholderRect) {
+				const routerViewLeft = window.getComputedStyle(this.$refs.routerView.$el).marginLeft;
 				Object.assign(style, {
 					'--mediasource-placeholder-height': this.mediaSourcePlaceholderRect.height + 'px',
-					'--mediasource-placeholder-width': this.mediaSourcePlaceholderRect.width + 'px'
+					'--mediasource-placeholder-width': this.mediaSourcePlaceholderRect.width  + 'px',
+					'--offset-sidebar': (280 - parseFloat(routerViewLeft)) + 'px' 
 				})
 			}
 			return style
@@ -125,7 +128,9 @@
 		room: 'roomChange',
 		call: 'callChange',
 		$route () {
-			this.showSidebar = false
+			if(this.$mq.below.l) {
+				this.toggleSidebar()
+			}
 		},
 		stageStreamCollapsed: {
 			handler  () {
@@ -146,12 +151,30 @@
 	methods: {
 		onResize () {
 			this.windowHeight = window.innerHeight
+			this.$refs.roomsSidebar.$el.style.width = ''
+			// this.$refs.closeSidebarButton.$el.style.left = ''
+			this.$refs.routerView.$el.style.marginLeft = ''
+			this.$refs.appBar.$el.style.marginLeft = ''
 		},
 		onFocus () {
 			this.$store.dispatch('notifications/clearDesktopNotifications')
 		},
 		toggleSidebar () {
-			this.showSidebar = !this.showSidebar
+			if(this.$refs.roomsSidebar && this.$refs.roomsSidebar.$el) {
+				this.$refs.roomsSidebar.$el.style.width = !!this.$refs.roomsSidebar.$el.offsetWidth ? '0px' : '280px';
+			}
+			// if(this.$refs.closeSidebarButton && this.$refs.closeSidebarButton.$el) {
+			// 	const buttonLeft = this.$refs.closeSidebarButton.$el.offsetLeft;
+			// 	this.$refs.closeSidebarButton.$el.style.left = !!buttonLeft ? '0px' : '280px';
+			// }
+			if(this.$refs.routerView && this.$refs.routerView.$el) {
+				const routerViewLeft = window.getComputedStyle(this.$refs.routerView.$el).marginLeft;
+                this.$refs.routerView.$el.style.marginLeft = routerViewLeft !== '0px' ? '0px' : '280px';
+			}
+			if(this.$refs.appBar && this.$refs.appBar.$el) {
+				const appBarLeft = window.getComputedStyle(this.$refs.appBar.$el).marginLeft;
+                this.$refs.appBar.$el.style.marginLeft = appBarLeft !== '0px' ? '0px' : '280px';
+			}
 		},
 		clearTokenAndReload () {
 			localStorage.removeItem('token')
@@ -215,18 +238,14 @@
 </script>
 <style lang="stylus">
 #app
-	display: grid
-	grid-template-columns: var(--sidebar-width) auto
-	grid-template-rows: auto
-	grid-template-areas: "rooms-sidebar main"
+	.router-view
+		margin-left: 280px
+		transition: 0.5s
+	.c-app-bar
+		margin-left: 280px
+		transition: 0.5s
 	--sidebar-width: 280px
 	--pretalx-clr-primary: var(--clr-primary)
-	.c-app-bar
-		grid-area: app-bar
-	.c-rooms-sidebar
-		grid-area: rooms-sidebar
-	.c-room-header
-		grid-area: main
 	> .bunt-progress-circular
 		position: fixed
 		top: 50%
@@ -291,15 +310,42 @@
 		width: 0
 		height: 0
 
+	.c-rooms-sidebar
+		height: 100%
+		width: 280px
+		position: fixed
+		z-index: 98
+		top: 0
+		left: 0
+		overflow-x: hidden
+		transition: 0.5s
+	#btn-close-sidebar
+		position: absolute
+		top: 10px
+		z-index: 99
 	+below('l')
-		&.override-sidebar-collapse
-			grid-template-rows: 48px 1fr
-			grid-template-areas: "app-bar app-bar" "rooms-sidebar main"
+		.router-view
+			margin-left: 0px
+			transition: 0.5s
+		.c-app-bar
+			margin-left: 0px
+			transition: 0.5s
+		.c-rooms-sidebar
+			height: 100%
+			width: 0px
+			position: fixed
+			z-index: 98
+			top: 0
+			left: 0
+			overflow-x: hidden
+			transition: 0.5s
+		#btn-close-sidebar
+			position: absolute
+			top: 10px
+			left: 0px
+			z-index: 99
+			transition: 0.5s
 		&:not(.override-sidebar-collapse)
-			grid-template-columns: auto
-			grid-template-rows: 48px 1fr
-			grid-template-areas: "app-bar" "main"
-
 			.sidebar-backdrop
 				position: fixed
 				top: 0

webapp/src/components/AppBar.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .c-app-bar
-	bunt-icon-button(v-if="showActions", @click="$emit('toggleSidebar')", @touchend.native="$emit('toggleSidebar')") menu
+	//- bunt-icon-button(v-if="showActions", @click="$emit('toggleSidebar')", @touchend.native="$emit('toggleSidebar')") menu
 	router-link.logo(to="/", :class="{anonymous: isAnonymous}")
 		img(:src="theme.logo.url", :alt="world.title")
 	.user(v-if="showUser")
@@ -51,7 +51,7 @@ export default {
 	.bunt-icon-button
 		icon-button-style(color: var(--clr-sidebar-text-primary), style: clear)
 	.logo
-		margin-left: 8px
+		margin: auto
 		font-size: 24px
 		height: 40px
 		&.anonymous

webapp/src/components/MediaSource.vue

@@ -236,16 +236,16 @@ export default {
 	&.size-tiny, &.background
 		bottom: calc(var(--vh100) - 48px - 3px)
 		right: 4px + 36px + 4px
-		+below('l')
-			bottom: calc(var(--vh100) - 48px - 48px - 3px)
+		// +below('l')
+		// 	bottom: calc(var(--vh100) - 48px - 48px - 3px)
 	&:not(.size-tiny):not(.background)
 		bottom: calc(var(--vh100) - 56px - var(--mediasource-placeholder-height))
-		right: calc(100vw - var(--sidebar-width) - var(--mediasource-placeholder-width))
+		right: calc(100vw - var(--sidebar-width) + var(--offset-sidebar) - var(--mediasource-placeholder-width))
 		width: var(--mediasource-placeholder-width)
 		height: var(--mediasource-placeholder-height)
 		+below('l')
 			bottom: calc(var(--vh100) - 48px - 56px - var(--mediasource-placeholder-height))
-			right: calc(100vw - var(--mediasource-placeholder-width))
+		// 	right: calc(100vw - var(--mediasource-placeholder-width))
 iframe.iframe-media-source
 	transition: all .3s ease
 	border: none

webapp/src/components/MediaSourcePlaceholder.vue

@@ -23,8 +23,12 @@ export default {
 		onResize ([{contentRect}]) {
 			this.$store.commit('reportMediaSourcePlaceholderRect', contentRect)
 		}
+
 	}
 }
 </script>
 <style lang="stylus">
+.c-media-source-placeholder
+	width: 100%
+	height: 100%
 </style>

webapp/src/components/RoomsSidebar.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
 transition(name="sidebar")
-	.c-rooms-sidebar(v-show="show && !snapBack", :style="style", role="navigation", @pointerdown="onPointerdown", @pointermove="onPointermove", @pointerup="onPointerup", @pointercancel="onPointercancel")
-		router-link.logo(to="/", v-if="$mq.above['m']", :class="{'fit-to-width': theme.logo.fitToWidth}")
+	.c-rooms-sidebar(:style="style", role="navigation", @pointerdown="onPointerdown", @pointermove="onPointermove", @pointerup="onPointerup", @pointercancel="onPointercancel")
+		router-link.logo(to="/", :class="{'fit-to-width': theme.logo.fitToWidth}")
 			img(:src="theme.logo.url", :alt="world.title")
-		bunt-icon-button#btn-close-sidebar(v-else, @click="$emit('close')") menu
+		//- bunt-icon-button#btn-close-sidebar(v-else, @click="$emit('close')") menu
 		scrollbars(y)
 			.global-links(role="group", aria-label="pages")
 				router-link.room(v-if="roomsByType.page.includes(rooms[0])", :to="{name: 'home'}", v-html="$emojify(rooms[0].name)")
@@ -243,9 +243,6 @@ export default {
 			margin: 0
 			img
 				height: auto
-	#btn-close-sidebar
-		margin: 8px
-		icon-button-style(color: var(--clr-sidebar-text-primary), style: clear)
 	> .c-scrollbars
 		flex: auto
 		.scroll-content
@@ -507,19 +504,19 @@ export default {
 		.mdi
 			font-size: 24px
 			line-height: 1
-#app:not(.override-sidebar-collapse) .c-rooms-sidebar
-	+below('l')
-		position: fixed
-		left: 0
-		top: 0
-		z-index: 901
-		width: var(--sidebar-width)
-		height: var(--vh100)
-		touch-action: pan-y
-		> .c-scrollbars .scroll-content
-			touch-action: pan-y
-		&.sidebar-enter-active, &.sidebar-leave-active
-			transition: transform .2s
-		&.sidebar-enter, &.sidebar-leave-to
-			transform: translateX(calc(-1 * var(--sidebar-width)))
+// #app:not(.override-sidebar-collapse) .c-rooms-sidebar
+// 	+below('l')
+// 		position: fixed
+// 		left: 0
+// 		top: 0
+// 		z-index: 901
+// 		width: var(--sidebar-width)
+// 		height: var(--vh100)
+// 		touch-action: pan-y
+// 		> .c-scrollbars .scroll-content
+// 			touch-action: pan-y
+// 		&.sidebar-enter-active, &.sidebar-leave-active
+// 			transition: transform .2s
+// 		&.sidebar-enter, &.sidebar-leave-to
+// 			transform: translateX(calc(-1 * var(--sidebar-width)))
 </style>

webapp/src/components/Scrollbars.vue

@@ -210,6 +210,9 @@ $thumb-width-hovered = 12px
 	box-sizing: border-box
 	min-height: 0
 	flex: auto
+	height: 89vh
+	+below('l')
+		height: 82vh
 	.scroll-content
 		display: flex
 		flex-direction: column
@@ -263,4 +266,16 @@ $thumb-width-hovered = 12px
 			.scrollbar-thumb
 				width: $thumb-width-hovered
 				opacity: .8
+.c-chat
+	.main-chat
+		+below('l')
+			.timeline
+				flex: unset
+			.c-scrollbars
+				height: 80vh
+		+below('xs')
+			.timeline
+				flex: unset
+			.c-scrollbars
+				height: 42vh
 </style>

webapp/src/views/rooms/RoomHeader.vue

@@ -81,6 +81,7 @@ export default {
 	background-color: $clr-white
 	min-height: 0
 	min-width: 0
+	height: 100%
 	> .ui-page-header
 		justify-content: space-between
 		.room-info

webapp/src/views/rooms/item.vue

@@ -114,6 +114,7 @@ export default {
 	flex: auto
 	display: flex
 	min-height: 0
+	height: 100%
 	.stage
 		display: flex
 		flex-direction: column

webapp/src/views/schedule/index.vue

@@ -108,6 +108,7 @@ export default {
 	.c-grid-schedule .grid > .room
 		top: 0
 	.scroll-parent
+		height: 100vh
 		.bunt-scrollbar-rail-wrapper-x, .bunt-scrollbar-rail-wrapper-y
 			z-index: 30
 </style>