Updated UI for smaller screen

src/static/app/src/App.vue

@@ -31,7 +31,10 @@ const getActiveCrossServer = computed(() => {
 			<small class="ms-auto text-muted" v-if="getActiveCrossServer !== undefined">
 				<i class="bi bi-server me-2"></i>{{getActiveCrossServer.host}}
 			</small>
-			<a role="button"><i class="bi bi-list"></i></a>
+			<a role="button" class="navbarBtn text-body"
+			   @click="store.ShowNavBar = !store.ShowNavBar"
+			   style="line-height: 0; font-size: 2rem">
+				<i class="bi bi-list"></i></a>
 		</div>
 	</nav>
 	<Suspense>
@@ -58,4 +61,12 @@ const getActiveCrossServer = computed(() => {
 	transform: translateY(-20px);
 	opacity: 0;
 }
+
+@media screen and (min-width: 768px) {
+	.navbarBtn{
+		display: none;
+	}
+}
+
+
 </style>

src/static/app/src/components/configurationList.vue

@@ -32,15 +32,14 @@ export default {
 <template>
 	
 	<div class="mt-5">
-		<div class="container">
+		<div class="container-md">
-			<div class="d-flex mb-4 ">
+			<div class="d-flex mb-4 configurationListTitle">
-				<h3 class="text-body">
+				<h3 class="text-body d-flex">
 					<i class="bi bi-body-text me-2"></i>
-					WireGuard Configurations</h3>
+					<span>WireGuard Configurations</span></h3>
 				<RouterLink to="/new_configuration" class="btn btn-dark btn-brand rounded-3 px-3 py-2 shadow ms-auto rounded-3">
 					<i class="bi bi-plus-circle-fill me-2"></i>
 					Configuration
-					
 				</RouterLink>
 			</div>
 			<Transition name="fade" mode="out-in">
@@ -60,5 +59,18 @@ export default {
 </template>
 
 <style scoped>
+@media screen and (max-width: 768px) {
+	.configurationListTitle{
+		flex-direction: column;
+		gap: 0.5rem;
 		
+		h3 span{
+			margin-left: auto !important;
+		}
+		
+		.btn{
+			width: 100%;
+		}
+	}
+}
 </style>

src/static/app/src/components/navbar.vue

@@ -14,7 +14,10 @@ export default {
 </script>
 
 <template>
-	<div class="col-md-3 col-lg-2 d-md-block p-3 navbar-container bg-body" style="height: calc(-50px + 100vh);">
+	<div class="col-md-3 col-lg-2 d-md-block p-3 navbar-container"
+	     :class="{active: this.dashboardConfigurationStore.ShowNavBar}"
+	     :data-bs-theme="dashboardConfigurationStore.Configuration.Server.dashboard_theme"
+	     style="height: calc(-50px + 100vh);">
 		<nav id="sidebarMenu" class=" bg-body-tertiary sidebar border h-100 rounded-3 shadow overflow-y-scroll" >
 			<div class="sidebar-sticky pt-3">
 				<ul class="nav flex-column px-2">
@@ -79,6 +82,28 @@ export default {
 	.navbar-container{
 		position: absolute;
 		z-index: 1000;
+		animation-duration: 0.4s;
+		animation-fill-mode: both;
+		display: none;
+		animation-timing-function: cubic-bezier(0.82, 0.58, 0.17, 0.9);
+	}
+	.navbar-container.active{
+		animation-direction: normal;
+		display: block !important;
+		animation-name: zoomInFade
+	}
+}
+
+@keyframes zoomInFade {
+	0%{
+		opacity: 0;
+		transform: translateY(60px);
+		filter: blur(3px);
+	}
+	100%{
+		opacity: 1;
+		transform: translateY(0px);
+		filter: blur(0px);
 	}
 }
 </style>

src/static/app/src/router/index.js

@@ -136,6 +136,7 @@ router.beforeEach(async (to, from, next) => {
   }else{
     document.title = "WGDashboard"
   }
+  dashboardConfigurationStore.ShowNavBar = false;
   
   if (to.meta.requiresAuth){
     if (!dashboardConfigurationStore.getActiveCrossServer()){
@@ -159,7 +160,6 @@ router.beforeEach(async (to, from, next) => {
       next()
     }
   }else {
-    
     next();
   }
 });

src/static/app/src/stores/DashboardConfigurationStore.js

@@ -16,7 +16,8 @@ export const DashboardConfigurationStore = defineStore('DashboardConfigurationSt
 			ServerList: {}
 		},
 		ActiveServerConfiguration: undefined,
-		IsElectronApp: false
+		IsElectronApp: false,
+		ShowNavBar: false
 	}),
 	actions: {
 		initCrossServerConfiguration(){

src/static/app/src/utilities/fetch.js

@@ -19,7 +19,7 @@ const getUrl = (url) => {
 	if (apiKey){
 		return `${apiKey.host}${url}`
 	}
-	return window.location.hostname === 'localhost' ? url 
+	return import.meta.env.MODE === 'development' ? url 
 		: `${window.location.protocol}//${window.location.host}${window.location.pathname}${url}`
 }
 

src/static/css/dashboard.css

@@ -121,7 +121,8 @@
 }
 
 [data-bs-theme="dark"].main, 
-#app:has(.main[data-bs-theme="dark"]){
+#app:has(.main[data-bs-theme="dark"]),
+[data-bs-theme="dark"].navbar-container{
     background-color: #1b1e21;
 }