IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

css nav active style

Browse Source
This commit is contained in:
ogerly 2022-11-27 10:57:47 +01:00
parent 522f41df09
commit 5a7df6bfb8
1 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/Menu/Sidebar.vue
View File

@ -4,7 +4,7 @@
<!-- @mouseout="$emit('toogleMobilMenu')" -->
<div class="mb-6 mt-3">
<b-nav vertical class="w-200">
<b-nav-item to="/overview" class="mb-3">
<b-nav-item to="/overview" class="mb-3" active-class="activeRoute">
<b-icon icon="house" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('navigation.overview') }}</span>
</b-nav-item>
@ -17,11 +17,11 @@
<span class="ml-2">{{ $t('navigation.adresses') }}</span>
</b-nav-item> -->
<b-nav-item to="/send" class="mb-3">
<b-nav-item to="/send" class="mb-3" active-class="activeRoute">
<b-icon icon="arrow-left-right" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('navigation.send') }}</span>
</b-nav-item>
<b-nav-item to="/transactions" class="mb-3">
<b-nav-item to="/transactions" class="mb-3" active-class="activeRoute">
<b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('navigation.transactions') }}</span>
</b-nav-item>
@ -29,14 +29,14 @@
<b-icon icon="person" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('navigation.profile') }}</span>
</b-nav-item> -->
<b-nav-item to="/community" class="mb-3">
<b-nav-item to="/community" class="mb-3" active-class="activeRoute">
<b-icon icon="people" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('navigation.members') }}</span>
</b-nav-item>
</b-nav>
<hr />
<b-nav vertical class="w-100">
<b-nav-item to="/information" class="mb-3">
<b-nav-item to="/information" class="mb-3" active-class="activeRoute">
<b-icon icon="info" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('navigation.info') }}</span>
</b-nav-item>
@ -54,15 +54,20 @@
<span v-else>{{ $t('navigation.sun') }}</span>
</label>
</b-nav-item> -->
<b-nav-item to="/settings" class="mb-3">
<b-nav-item to="/settings" class="mb-3" active-class="activeRoute">
<b-icon icon="gear" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('navigation.settings') }}</span>
</b-nav-item>
<b-nav-item class="mb-3" v-if="$store.state.isAdmin" @click="$emit('admin')">
<b-nav-item
class="mb-3"
v-if="$store.state.isAdmin"
@click="$emit('admin')"
active-class="activeRoute"
>
<b-icon icon="shield-check" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('navigation.admin_area') }}</span>
</b-nav-item>
<b-nav-item class="mb-3" @click="$emit('logout')">
<b-nav-item class="mb-3" @click="$emit('logout')" active-class="activeRoute">
<b-icon icon="power" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('navigation.logout') }}</span>
</b-nav-item>
@ -88,10 +93,17 @@ export default {
}
</script>
<style>
.component-navbar .active,
#component-sidebar .active {
.activeRoute {
font-weight: bold;
color: rgb(219, 129, 19);
border-left: 1rem solid;
}
/* .component-navbar .active, */
/* #component-sidebar .active {
font-weight: bold;
color: red;
} */
#component-sidebar {
min-width: 53px;
max-width: 200px;