Added log out button to nav bar

Implements Logout button in navbar #1209

Signed-off-by: Computroniks <mnickson@sidingsmedia.com>
This commit is contained in:
Computroniks 2022-01-27 19:45:31 +00:00
parent ca89f84b9a
commit 97a5b400db
No known key found for this signature in database
GPG key ID: AB524D88499439A1

View file

@ -28,11 +28,14 @@
<font-awesome-icon icon="tachometer-alt" /> {{ $t("Dashboard") }} <font-awesome-icon icon="tachometer-alt" /> {{ $t("Dashboard") }}
</router-link> </router-link>
</li> </li>
<li v-if="$root.loggedIn" class="nav-item"> <li v-if="$root.loggedIn" class="nav-item me-2">
<router-link to="/settings" class="nav-link" :class="{ active: $route.path.includes('settings') }"> <router-link to="/settings" class="nav-link" :class="{ active: $route.path.includes('settings') }">
<font-awesome-icon icon="cog" /> {{ $t("Settings") }} <font-awesome-icon icon="cog" /> {{ $t("Settings") }}
</router-link> </router-link>
</li> </li>
<li v-if="$root.loggedIn && $root.storage().token !== 'autoLogin'" class="nav-item">
<button id="logout-btn" class="btn btn-danger me-2" @click="$root.logout">{{ $t("Logout") }}</button>
</li>
</ul> </ul>
</header> </header>
@ -71,6 +74,10 @@
<div><font-awesome-icon icon="cog" /></div> <div><font-awesome-icon icon="cog" /></div>
{{ $t("Settings") }} {{ $t("Settings") }}
</router-link> </router-link>
<button v-if="$root.loggedIn && $root.storage().token !== 'autoLogin'" id="logout-btn" class="nav-link" @click="$root.logout">
<div><font-awesome-icon icon="sign-out-alt" /></div>
{{ $t("Logout") }}
</button>
</nav> </nav>
</div> </div>
</template> </template>
@ -146,9 +153,9 @@ export default {
white-space: nowrap; white-space: nowrap;
padding: 0 10px; padding: 0 10px;
a { a, button {
text-align: center; text-align: center;
width: 25%; width: 20%;
display: inline-block; display: inline-block;
height: 100%; height: 100%;
padding: 8px 10px 0; padding: 8px 10px 0;
@ -156,6 +163,7 @@ export default {
color: #c1c1c1; color: #c1c1c1;
overflow: hidden; overflow: hidden;
text-decoration: none; text-decoration: none;
vertical-align: top;
&.router-link-exact-active { &.router-link-exact-active {
color: $primary; color: $primary;
@ -166,6 +174,12 @@ export default {
font-size: 20px; font-size: 20px;
} }
} }
button {
border: none;
background: none;
color: #dc3545;
}
} }
main { main {