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

sidebar and content fixed size, navbar variant tranparent

Browse Source
This commit is contained in:
ogerly 2021-12-09 09:56:21 +01:00
parent 9cfb6716b2
commit 1010997d3a
3 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/components/Menu/Navbar.vue
View File

@ -1,38 +1,37 @@
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar toggleable="lg" type="light" variant="trans">
<div class="navbar-brand">
<router-link to="/overview">
<img :src="logo" class="navbar-brand-img" alt="..." />
</router-link>
<b-navbar-nav>
<b-nav-item to="/overview">
<img :src="logo" class="navbar-brand-img" alt="..." />
</b-nav-item>
</b-navbar-nav>
</div>
<b-nav-text center>{{ balance }} GDD</b-nav-text>
<div class="d-flex d-xl-none d-lg-none d-md-flex">
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/overview">{{ $t('overview') }}</b-nav-item>
<b-nav-item to="/send">{{ $t('send') }}</b-nav-item>
<b-nav-item to="/transactions">{{ $t('transactions') }}</b-nav-item>
<b-nav-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-nav-item>
<hr />
<b-nav-item class="mb-3" @click="$emit('get-elopage-link')">
{{ $t('members_area') }}
<b-badge v-if="!$store.state.hasElopage" pill variant="danger">!</b-badge>
</b-nav-item>
<b-nav-item v-if="$store.state.isAdmin" class="mb-3" @click="$emit('admin')">
{{ $t('admin_area') }}
</b-nav-item>
<b-nav-item class="mb-3" @click="$emit('logout')">
{{ $t('logout') }}
</b-nav-item>
</b-navbar-nav>
</b-collapse>
</div>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/overview">{{ $t('overview') }}</b-nav-item>
<b-nav-item to="/send">{{ $t('send') }}</b-nav-item>
<b-nav-item to="/transactions">{{ $t('transactions') }}</b-nav-item>
<b-nav-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-nav-item>
<hr />
<b-nav-item to="#" class="mb-3" @click="$emit('get-elopage-link')">
{{ $t('members_area') }}
<b-badge v-if="!$store.state.hasElopage" pill variant="danger">!</b-badge>
</b-nav-item>
<b-nav-item v-if="$store.state.isAdmin" to="#" class="mb-3" @click="$emit('admin')">
{{ $t('admin_area') }}
</b-nav-item>
<b-nav-item class="mb-3" @click="$emit('logout')">
{{ $t('logout') }}
</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-item to="/profile" right>{{ $store.state.email }}</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>

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

@ -1,26 +1,29 @@
<template>
<div>
<div class="px-3 py-2">
<p></p>
<div class="mb-6">
<b-nav vertical class="w-200">
<b-nav-item to="/overview" class="mb-3" active>{{ $t('overview') }}</b-nav-item>
<b-nav-item to="/send" class="mb-3">{{ $t('send') }}</b-nav-item>
<b-nav-item to="/transactions" class="mb-3">{{ $t('transactions') }}</b-nav-item>
<b-nav-item to="/profile" class="mb-3" disabled>{{ $t('profile') }}</b-nav-item>
</b-nav>
<hr />
<b-nav vertical class="w-100">
<b-nav-item class="mb-3" active>Active</b-nav-item>
<b-nav-item class="mb-3">Link</b-nav-item>
<b-nav-item class="mb-3" @click="$emit('admin')">{{ $t('admin_area') }}</b-nav-item>
<b-nav-item class="mb-3" @click="$emit('logout')">{{ $t('logout') }}</b-nav-item>
</b-nav>
</div>
<div class="px-3 py-2">
<p></p>
<div class="mb-6">
<b-nav vertical class="w-200">
<b-nav-item to="/overview" class="mb-3" active>{{ $t('overview') }}</b-nav-item>
<b-nav-item to="/send" class="mb-3">{{ $t('send') }}</b-nav-item>
<b-nav-item to="/transactions" class="mb-3">{{ $t('transactions') }}</b-nav-item>
<b-nav-item to="/profile" class="mb-3">
{{ $t('site.navbar.my-profil') }}
</b-nav-item>
</b-nav>
<hr />
<b-nav vertical class="w-100">
<b-nav-item class="mb-3" @click="$emit('get-elopage-link')">
{{ $t('members_area') }}
<b-badge v-if="!$store.state.hasElopage" pill variant="danger">!</b-badge>
</b-nav-item>
<b-nav-item class="mb-3" v-if="$store.state.isAdmin" @click="$emit('admin')">
{{ $t('admin_area') }}
</b-nav-item>
<b-nav-item class="mb-3" @click="$emit('logout')">{{ $t('logout') }}</b-nav-item>
</b-nav>
</div>
</div>
</div>
</template>
<script>

4
frontend/src/views/Layout/DashboardLayout_gdd.vue
View File

@ -1,12 +1,12 @@
<template>
<div>
<navbar :balance="balance" @get-elopage-link="getElopageLink" @admin="admin" @logout="logout" />
<div style="display: inline-flex">
<div style="display: inline-flex; width: 100%">
<div class="d-none d-sm-none d-md-none d-lg-flex shadow-lg" style="width: 300px">
<sidebar @get-elopage-link="getElopageLink" @admin="admin" @logout="logout" />
</div>
<div>
<div class="ml-2 mr-2" style="width: 100%">
<div>
<fade-transition :duration="200" origin="center top" mode="out-in">
<router-view