Added a box-shadow

src/static/app/src/App.vue

@@ -19,6 +19,7 @@ const route = useRoute()
 </script>
 
 <template>
+	<div class="h-100">
 		<div style="z-index: 9999; height: 5px" class="position-absolute loadingBar top-0 start-0"></div>
 		<nav class="navbar bg-dark sticky-top" data-bs-theme="dark" v-if="!route.meta.hideTopNav">
 			<div class="container-fluid d-flex text-body align-items-center">
@@ -42,6 +43,7 @@ const route = useRoute()
 				</Transition>
 			</RouterView>
 		</Suspense>
+	</div>
 </template>
 
 <style scoped>

src/static/app/src/components/configurationComponents/peerList.vue

@@ -215,7 +215,6 @@ watch(() => route.query.id, (newValue) => {
 				<h1 class="mb-0 display-4"><samp>{{configurationInfo.Name}}</samp></h1>
 			</div>
 		</div>
-
 		<div class="ms-sm-auto d-flex gap-2 flex-column">
 			<div class="card rounded-3 bg-transparent ">
 				<div class="card-body py-2 d-flex align-items-center">
@@ -238,7 +237,6 @@ watch(() => route.query.id, (newValue) => {
 						       @change="toggleConfiguration()"
 						       v-model="configurationInfo.Status">
 					</div>
-
 				</div>
 			</div>
 			<div class="d-flex gap-2">

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

@@ -28,27 +28,7 @@ export default {
 			searchKey: ""
 		}
 	},
-	async mounted() {
-		// if (!window.localStorage.getItem('ConfigurationListSort')){
-		// 	window.localStorage.setItem('ConfigurationListSort', JSON.stringify(this.currentSort))
-		// }else{
-		// 	this.currentSort = JSON.parse(window.localStorage.getItem('ConfigurationListSort'))
-		// }
-		//
-		// if (!window.localStorage.getItem('ConfigurationListDisplay')){
-		// 	window.localStorage.setItem('ConfigurationListDisplay', this.currentDisplay)
-		// }else{
-		// 	this.currentDisplay = window.localStorage.getItem('ConfigurationListDisplay')
-		// }
 
-		
-		await this.wireguardConfigurationsStore.getConfigurations();
-		this.configurationLoaded = true;
-		
-		this.wireguardConfigurationsStore.ConfigurationListInterval = setInterval(() => {
-			this.wireguardConfigurationsStore.getConfigurations()
-		}, 10000)
-	},
 	beforeUnmount() {
 		clearInterval(this.wireguardConfigurationsStore.ConfigurationListInterval)
 	},
@@ -102,7 +82,7 @@ export default {
 				
 			</div>
 			<Transition name="fade">
-				<div class="text-body filter mb-3 d-flex gap-2 flex-column flex-md-row" v-if="this.configurationLoaded">
+				<div class="text-body filter mb-3 d-flex gap-2 flex-column flex-md-row" v-if="this.wireguardConfigurationsStore.ConfigurationLoaded">
 					<div class="d-flex align-items-center gap-3 align-items-center mb-3 mb-md-0">
 						<small class="text-muted">
 							<LocaleText t="Sort By"></LocaleText>
@@ -152,14 +132,14 @@ export default {
 				<TransitionGroup name="fade">
 					<p class="text-muted col-12"
 					   key="noConfiguration"
-					   v-if="this.configurationLoaded && this.wireguardConfigurationsStore.Configurations.length === 0">
+					   v-if="this.wireguardConfigurationsStore.ConfigurationLoaded && this.wireguardConfigurationsStore.Configurations.length === 0">
 						<LocaleText t="You don't have any WireGuard configurations yet. Please check the configuration folder or change it in Settings. By default the folder is /etc/wireguard."></LocaleText>
 					</p>
 					<ConfigurationCard
 						:display="this.wireguardConfigurationsStore.CurrentDisplay"
 						v-for="(c, index) in configurations"
 						:delay="index*0.03 + 's'"
-						v-else-if="this.configurationLoaded"
+						v-else-if="this.wireguardConfigurationsStore.ConfigurationLoaded"
 						:key="c.Name" :c="c"></ConfigurationCard>
 				</TransitionGroup>
 			</div>

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

@@ -33,8 +33,9 @@ export default {
 			return undefined
 		}
 	},
-	mounted() {
-		fetchGet("/api/getDashboardUpdate", {}, (res) => {
+	async mounted() {
+		await this.wireguardConfigurationsStore.getConfigurations();
+		await fetchGet("/api/getDashboardUpdate", {}, (res) => {
 			if (res.status){
 				if (res.data){
 					this.updateAvailable = true
@@ -46,12 +47,15 @@ export default {
 				console.log(`Failed to get update: ${res.message}`)
 			}
 		})
+		this.wireguardConfigurationsStore.ConfigurationListInterval = setInterval(() => {
+			this.wireguardConfigurationsStore.getConfigurations()
+		}, 10000)
 	}
 }
 </script>
 
 <template>
-	<div class="col-md-3 col-lg-2 d-md-block p-2 navbar-container"
+	<div class="col-md-3 col-lg-2 d-md-block p-2 navbar-container bg-transparent"
 	     :class="{active: this.dashboardConfigurationStore.ShowNavBar}"
 	     :data-bs-theme="dashboardConfigurationStore.Configuration.Server.dashboard_theme"
 	>

src/static/app/src/components/protocolBadge.vue

@@ -1,21 +1,44 @@
 <script setup>
 import LocaleText from "@/components/text/localeText.vue";
+import {onMounted, ref} from "vue";
 
 const props = defineProps({
 	protocol: String,
 	mini: false
 })
+
+const blur = ref(undefined)
+
+onMounted(() => {
+	setTimeout(() => {
+		blur.value = !props.mini
+	}, 500)
+})
 </script>
 
 <template>
-<span class="badge wireguardBg rounded-3 shadow" v-if="protocol === 'wg'">
+<div class="position-relative">
+	<span class="badge wireguardBg rounded-3 shadow z-1"
+		  :class="{blur: blur === true}"
+		  v-if="protocol === 'wg'">
 		WireGuard <LocaleText t="Configuration" v-if="!mini"></LocaleText>
 	</span>
-<span class="badge amneziawgBg rounded-3 shadow" v-else-if="protocol === 'awg'">
+	<span class="badge amneziawgBg rounded-3 shadow"
+		  :class="{blur: blur === true}"
+		  v-else-if="protocol === 'awg'">
 		AmneziaWG <LocaleText t="Configuration" v-if="!mini"></LocaleText>
 	</span>
+
+</div>
 </template>
 
 <style scoped>
-
+.wireguardBg.blur{
+	box-shadow: rgba(255, 56, 56, 1) 3rem 1rem 8rem 10px !important;
+	transition: box-shadow 1s ease-in-out;
+}
+.amneziawgBg.blur{
+	box-shadow: rgb(227, 142, 65) 3rem 1rem 8rem 10px !important;
+	transition: box-shadow 1s ease-in-out;
+}
 </style>

src/static/app/src/stores/WireguardConfigurationsStore.js

@@ -6,6 +6,7 @@ import {GetLocale} from "@/utilities/locale.js";
 export const WireguardConfigurationsStore = defineStore('WireguardConfigurationsStore', {
 	state: () => ({
 		Configurations: [],
+        ConfigurationLoaded: false,
 		searchString: "",
 		ConfigurationListInterval: undefined,
         SortOptions: {
@@ -92,8 +93,10 @@ export const WireguardConfigurationsStore = defineStore('WireguardConfigurations
 	actions: {
 		async getConfigurations(){
 			await fetchGet("/api/getWireguardConfigurations", {}, (res) => {
-				if (res.status)  this.Configurations = res.data
-				// this.Configurations = []
+				if (res.status)  {
+                    this.Configurations = res.data
+                }
+                this.ConfigurationLoaded = true
 			});
 		},
 

src/static/app/src/views/configuration.vue

@@ -5,11 +5,11 @@ export default {
 </script>
 
 <template>
-	<div class="mt-md-5 mt-3 text-body">
+	<div class="mt-md-5 mt-3 text-body position-relative">
 		<RouterView v-slot="{ Component, route }">
 			<Transition name="fade2" mode="out-in">
 				<Suspense>
-					<Component :is="Component" :key="route.path"></Component>
+					<Component :is="Component" :key="route.path" class="z-1"></Component>
 				</Suspense>
 			</Transition>
 		</RouterView>

src/static/app/src/views/index.vue

@@ -22,7 +22,7 @@ export default {
 	<div class="container-fluid flex-grow-1 main" :data-bs-theme="this.dashboardConfigurationStore.Configuration.Server.dashboard_theme">
 		<div class="row h-100">
 			<Navbar></Navbar>
-			<main class="col-md-9 col-lg-10 overflow-y-scroll mb-0 pt-2">
+			<main class="col-md-9 col-lg-10 overflow-y-scroll mb-0 pt-2 position-relative">
 				<Suspense>
 					<RouterView v-slot="{Component}">
 						<Transition name="fade2" mode="out-in" appear>