Make left side bar move in/out #150

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(:class="{'has-background-room': backgroundRoom, 'override-sidebar-collapse': overrideSidebarCollapse, 'override-sidebar-close': overrideSidebarClose}", :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,10 +18,10 @@
 			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")
+		app-bar(v-if="$mq.below['l'] || showSidebar == false", @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")
+		rooms-sidebar(:show="showSidebar || overrideSidebarCollapse", @close="showSidebar = false")
 		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")
@@ -58,7 +58,7 @@
 		return {
 			themeVariables,
 			backgroundRoom: null,
-			showSidebar: false,
+			showSidebar: true,
 			windowHeight: null
 		}
 	},
@@ -92,6 +92,9 @@
 				this.$route.name === 'home' &&
 				!this.roomHasMedia
 		},
+		overrideSidebarClose () {
+			return this.$mq.above.l && !this.showSidebar
+		},
 		// safari cleverly includes the address bar cleverly in 100vh
 		mediaConstraintsStyle () {
 			const hasStageTools = this.room?.modules.some(module => stageToolModules.includes(module.type))
@@ -125,7 +128,7 @@
 		room: 'roomChange',
 		call: 'callChange',
 		$route () {
-			this.showSidebar = false
+			this.showSidebar = this.showSidebar
 		},
 		stageStreamCollapsed: {
 			handler  () {
@@ -209,6 +212,10 @@
 			if (!this.backgroundRoom && !this.rooms.includes(this.backgroundRoom)) {
 				this.backgroundRoom = null
 			}
+		},
+		handleCloseSidebar () {
+			console.log(this.showSidebar + ' -> ' + !this.showSidebar)
+			this.showSidebar = !this.showSidebar
 		}
 	}
 }
@@ -317,4 +324,39 @@
 					font-size: 128px
 				h1
 					font-size: 24px
+	+above('l')
+		&.override-sidebar-close
+			grid-template-columns: auto
+			grid-template-rows: 48px 1fr
+			grid-template-areas: "app-bar" "main"
+			.sidebar-backdrop
+				position: fixed
+				top: 0
+				left: 0
+				height: var(--vh100)
+				width: 100vw
+				z-index: 900
+				background-color: $clr-secondary-text-light
+				&.backdrop-enter-active, &.backdrop-leave-active
+					transition: opacity .2s
+				&.backdrop-enter, &.backdrop-leave-to
+					opacity: 0
+			.fatal-connection-error
+				.mdi
+					font-size: 128px
+				h1
+					font-size: 24px
+			#media-source-iframes
+				iframe
+					top: 104px
+					left: 0px
+			.c-media-source
+				.is-offline
+					top: 104px
+					left: 0px
+		&:not(.override-sidebar-close)
+			grid-template-columns: var(--sidebar-width) auto
+			grid-template-areas: "app-bar app-bar" "rooms-sidebar main"
+
+
 </style>

webapp/src/components/RoomsSidebar.vue

@@ -1,6 +1,7 @@
 <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")
+		bunt-icon-button#btn-close-sidebar(@click="$emit('close')") menu
 		router-link.logo(to="/", v-if="$mq.above['m']", :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
@@ -514,4 +515,21 @@ export default {
 			transition: transform .2s
 		&.sidebar-enter, &.sidebar-leave-to
 			transform: translateX(calc(-1 * var(--sidebar-width)))
-</style>
+			line-height: 1
+
+#app:not(.override-sidebar-close) .c-rooms-sidebar
+	+above('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/views/admin/announcements/index.vue

@@ -131,4 +131,9 @@ export default {
 					&.archived::before
 						content: 'archived'
 						background-color: $clr-grey-600
+
+#app:not(.override-sidebar-close)  .c-admin-announcements
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/admin/announcements/item.vue

@@ -195,4 +195,9 @@ export default {
 		themed-button-primary()
 		align-self: flex-start
 		padding: 0 32px
+
+#app:not(.override-sidebar-close)  .c-announcement
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/admin/config/index.vue

@@ -58,4 +58,9 @@ export default {
 			font-weight: 500
 			margin: 1px 16px 0 0
 			ellipsis()
+
+#app:not(.override-sidebar-close)  .c-admin-config
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/admin/index.vue

@@ -22,4 +22,9 @@ export default {
 <style lang="stylus">
 .c-admin
 	padding: 0 16px
+
+#app:not(.override-sidebar-close)  .c-admin
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/admin/kiosks/index.vue

@@ -77,4 +77,9 @@ export default {
 		.name, .room
 			flex: 1
 			ellipsis()
+
+#app:not(.override-sidebar-close)  .c-admin-kiosk
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/admin/kiosks/item.vue

@@ -198,4 +198,9 @@ export default {
 			align-self: center
 		.delete-kiosk
 			button-style(color: $clr-danger)
+
+#app:not(.override-sidebar-close)  .c-admin-kiosk
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/admin/kiosks/new.vue

@@ -74,4 +74,9 @@ export default {
 		flex: auto
 		display: flex
 		flex-direction: column
+
+#app:not(.override-sidebar-close)  .c-admin-kiosk-new
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/admin/rooms/EditForm.vue

@@ -137,4 +137,8 @@ export default {
 		flex: auto
 		display: flex
 		flex-direction: column
+#app:not(.override-sidebar-close)  .c-room-edit-form
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/admin/rooms/index.vue

@@ -85,4 +85,10 @@ export default {
 		.name
 			flex: auto
 			ellipsis()
+
+
+#app:not(.override-sidebar-close)  .c-admin-rooms
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/admin/rooms/new.vue

@@ -109,4 +109,9 @@ export default {
 			.description
 				color: $clr-secondary-text-light
 				font-size: 13px
+
+#app:not(.override-sidebar-close)  .c-admin-rooms-new
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/admin/user.vue

@@ -166,4 +166,8 @@ export default {
 		#btn-upload
 			themed-button-primary()
 
+#app:not(.override-sidebar-close)  .c-admin-users
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/admin/users.vue

@@ -161,4 +161,9 @@ export default {
 		.user:hover, .user.error, .user.updating
 			.actions .placeholder
 				display: none
+
+#app:not(.override-sidebar-close)  .c-admin-users
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/contact-requests.vue

@@ -111,4 +111,9 @@ export default {
 		.contact-request:hover
 			.actions .placeholder
 				display: none
+
+#app:not(.override-sidebar-close)  .c-contact-requests
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/exhibitor-manager/exhibitor.vue

@@ -564,4 +564,9 @@ export default {
 						resize: vertical
 						min-height: 64px
 						padding: 0 8px
+
+#app:not(.override-sidebar-close)  .c-manage-exhibitor
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/exhibitor-manager/index.vue

@@ -75,4 +75,9 @@ export default {
 		.exhibitor:hover
 			.actions .placeholder
 				display none
+
+#app:not(.override-sidebar-close)  .c-exhibitors
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/preferences/index.vue

@@ -170,4 +170,9 @@ export default {
 	+below('s')
 		.inputs
 			width: auto
+
+#app:not(.override-sidebar-close)  .v-preferences
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/rooms/EditRoomSchedule.vue

@@ -147,4 +147,9 @@ export default {
 			bottom: 16px
 			right: 16px
 			themed-button-primary()
+
+#app:not(.override-sidebar-close)  .c-edit-room-schedule
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/rooms/RoomHeader.vue

@@ -129,4 +129,8 @@ export default {
 						border-radius: 4px 0 0 4px
 					&:last-child
 						border-radius: 0 4px 4px 0
+
+#app:not(.override-sidebar-close)  .c-room-header
+	+above('l')
+		grid-area: 1 / 1 / span 2 / span 2;
 </style>

webapp/src/views/rooms/item.vue

@@ -195,4 +195,10 @@ export default {
 				flex: auto
 				width: 100vw
 				min-height: 0
+
+#app:not(.override-sidebar-close)  .c-room
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
+
 </style>

webapp/src/views/rooms/manage.vue

@@ -273,4 +273,9 @@ export default {
 		flex-direction: column
 		.modules
 			justify-content: flex-end
+
+#app:not(.override-sidebar-close)  .c-room-manager
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/schedule/index.vue

@@ -107,4 +107,9 @@ export default {
 			text-align: center
 	.c-grid-schedule .grid > .room
 		top: 0
+
+#app:not(.override-sidebar-close)  .c-schedule
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/schedule/speakers/index.vue

@@ -102,4 +102,9 @@ export default {
 			font-weight: 500
 			font-size: 16px
 			margin: 0
+
+#app:not(.override-sidebar-close)  .c-schedule-speakers
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/schedule/speakers/item.vue

@@ -101,4 +101,9 @@ export default {
 			align-items: center
 		.content
 			margin: 0 16px
+
+#app:not(.override-sidebar-close)  .c-schedule-speaker
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>

webapp/src/views/schedule/talks/item.vue

@@ -152,4 +152,9 @@ export default {
 		.talk
 			max-width: 100%
 			margin: 16px
+
+#app:not(.override-sidebar-close)  .c-schedule-talk
+	+above('l')
+		grid-area: app-bar;
+		margin-left: var(--sidebar-width);
 </style>