kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-06 16:00:28 +01:00
Code

Updated UI for nav bar

Browse Source
This commit is contained in:
Donald Zou 2024-08-09 17:58:41 -04:00
parent 9644e6195c
commit b4e8e57a22
4 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/static/app/src/components/configurationList.vue
View File

@ -34,7 +34,9 @@ export default {
<div class="mt-5"> <div class="mt-5">
<div class="container"> <div class="container">
<div class="d-flex mb-4 "> <div class="d-flex mb-4 ">
<h3 class="text-body">WireGuard Configurations</h3> <h3 class="text-body">
<i class="bi bi-body-text me-2"></i>
WireGuard Configurations</h3>
<RouterLink to="/new_configuration" class="btn btn-dark btn-brand rounded-3 px-3 py-2 shadow ms-auto rounded-3"> <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> <i class="bi bi-plus-circle-fill me-2"></i>
Configuration Configuration

41
src/static/app/src/components/navbar.vue
View File

@ -17,39 +17,46 @@ export default {
<div class="col-md-3 col-lg-2 d-md-block p-3" style="height: calc(-50px + 100vh);"> <div class="col-md-3 col-lg-2 d-md-block p-3" style="height: calc(-50px + 100vh);">
<nav id="sidebarMenu" class=" bg-body-tertiary sidebar border h-100 rounded-3 shadow overflow-y-scroll" > <nav id="sidebarMenu" class=" bg-body-tertiary sidebar border h-100 rounded-3 shadow overflow-y-scroll" >
<div class="sidebar-sticky pt-3"> <div class="sidebar-sticky pt-3">
<ul class="nav flex-column"> <ul class="nav flex-column px-2">
<li class="nav-item"> <li class="nav-item">
<RouterLink class="nav-link" to="/" exact-active-class="active">Home</RouterLink></li> <RouterLink class="nav-link rounded-3"
to="/" exact-active-class="active">
<i class="bi bi-house me-2"></i>
Home</RouterLink></li>
<li class="nav-item"> <li class="nav-item">
<RouterLink class="nav-link" to="/settings" <RouterLink class="nav-link rounded-3" to="/settings"
exact-active-class="active">Settings</RouterLink></li> exact-active-class="active">
<i class="bi bi-gear me-2"></i>
Settings</RouterLink></li>
</ul> </ul>
<hr> <hr class="text-body">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"> <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted text-center">
<span>Configurations</span> <i class="bi bi-body-text me-2"></i>
Configurations
</h6> </h6>
<ul class="nav flex-column"> <ul class="nav flex-column px-2">
<li class="nav-item"> <li class="nav-item">
<RouterLink :to="'/configuration/'+c.Name + '/peers'" class="nav-link nav-conf-link" <RouterLink :to="'/configuration/'+c.Name + '/peers'" class="nav-link nav-conf-link rounded-3"
active-class="active" active-class="active"
v-for="c in this.wireguardConfigurationsStore.Configurations"> v-for="c in this.wireguardConfigurationsStore.Configurations">
<samp>{{c.Name}}</samp> {{c.Name}}
</RouterLink> </RouterLink>
</li> </li>
</ul> </ul>
<hr> <hr class="text-body">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"> <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted text-center">
<span>Tools</span> <i class="bi bi-tools me-2"></i>
Tools
</h6> </h6>
<ul class="nav flex-column"> <ul class="nav flex-column px-2">
<li class="nav-item"> <li class="nav-item">
<RouterLink to="/ping" class="nav-link" active-class="active">Ping</RouterLink></li> <RouterLink to="/ping" class="nav-link rounded-3" active-class="active">Ping</RouterLink></li>
<li class="nav-item"> <li class="nav-item">
<RouterLink to="/traceroute" class="nav-link" active-class="active">Traceroute</RouterLink> <RouterLink to="/traceroute" class="nav-link rounded-3" active-class="active">Traceroute</RouterLink>
</li> </li>
</ul> </ul>
<hr> <hr class="text-body">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"><a class="nav-link text-danger" @click="this.dashboardConfigurationStore.signOut()" role="button" style="font-weight: bold">Sign Out</a></li> <li class="nav-item"><a class="nav-link text-danger" @click="this.dashboardConfigurationStore.signOut()" role="button" style="font-weight: bold">Sign Out</a></li>
</ul> </ul>

4
src/static/css/dashboard.css
View File

@ -146,8 +146,7 @@
} }
.nav-link:hover { .nav-link:hover {
padding-left: 30px; background-color: #e8e8e8;
background-color: #dfdfdf;
} }
.sidebar .nav-link .feather { .sidebar .nav-link .feather {
@ -157,6 +156,7 @@
.sidebar .nav-link.active, .bottomNavContainer .nav-link.active { .sidebar .nav-link.active, .bottomNavContainer .nav-link.active {
color: #007bff; color: #007bff;
} }
.sidebar .nav-link:hover .feather, .sidebar .nav-link:hover .feather,

BIN
src/static/img/wireguard_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB