From ca067627c41dc52618a0d4f9de30593ad320a8d2 Mon Sep 17 00:00:00 2001
From: inportb <inportb@gmail.com>
Date: Tue, 16 May 2023 23:19:36 -0400
Subject: [PATCH] Fullwidth toggle

---
 htdocs/App.vue | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/htdocs/App.vue b/htdocs/App.vue
index b94fe8e..fee83ed 100644
--- a/htdocs/App.vue
+++ b/htdocs/App.vue
@@ -3,13 +3,36 @@
 	<div class="container-fluid" style="padding-top: 5rem;">
 		<Navbar v-model:server="server" :user="user" />
 		<Throbber :client="client" />
-		<div class="container">
+		<div :class="fullwidth ? 'container-fluid' : 'container'">
 			<Login :secret="secret" v-model:client="client" v-model:server="server" v-model:user="user" />
 			<router-view v-if="user" :client="client"></router-view>
 		</div>
+		<button class="control-fullwidth btn btn-light" @click="fullwidth = !fullwidth"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi" viewBox="0 0 16 16"><path v-if="fullwidth" d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z" /><path v-else d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z" /></svg></button>
 	</div>
 </template>
 
+<style>
+	.bi {
+		display: inline-block;
+		vertical-align: -.125em;
+		fill: currentcolor;
+	}
+</style>
+
+<style scoped>
+	button.control-fullwidth {
+		display: none;
+	}
+	@media (min-width: 576px) {
+		button.control-fullwidth {
+			display: inline-block;
+			position: fixed;
+			bottom: 0.5rem;
+			right: 0.5rem;
+		}
+	}
+</style>
+
 <script>
 	import Submenu from './Submenu.vue';
 	import Navbar from './Navbar.vue';
@@ -43,6 +66,7 @@
 				heartbeat: null,
 				banner: '',
 				authenticated: false,
+				fullwidth: false,
 				menu: {
 					name: 'Main',
 					items: [