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

Updated UI for nav bar

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

View File

@ -34,7 +34,9 @@ export default {
<div class="mt-5">
<div class="container">
<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">
<i class="bi bi-plus-circle-fill me-2"></i>
Configuration

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);">
<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">
<ul class="nav flex-column px-2">
<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">
<RouterLink class="nav-link" to="/settings"
exact-active-class="active">Settings</RouterLink></li>
<RouterLink class="nav-link rounded-3" to="/settings"
exact-active-class="active">
<i class="bi bi-gear me-2"></i>
Settings</RouterLink></li>
</ul>
<hr>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Configurations</span>
<hr class="text-body">
<h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted text-center">
<i class="bi bi-body-text me-2"></i>
Configurations
</h6>
<ul class="nav flex-column">
<ul class="nav flex-column px-2">
<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"
v-for="c in this.wireguardConfigurationsStore.Configurations">
<samp>{{c.Name}}</samp>
{{c.Name}}
</RouterLink>
</li>
</ul>
<hr>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Tools</span>
<hr class="text-body">
<h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted text-center">
<i class="bi bi-tools me-2"></i>
Tools
</h6>
<ul class="nav flex-column">
<ul class="nav flex-column px-2">
<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">
<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>
</ul>
<hr>
<hr class="text-body">
<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>
</ul>

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB