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

first step, new sidebar menu

Browse Source
This commit is contained in:
ogerly 2022-07-05 09:01:07 +02:00
parent dc92199f4c
commit 004c76d82e
2 changed files with 93 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/components/Menu/SidebarNew.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div id="component-sidebar">
<div class="pl-lg-3">
<p></p>
<div class="mb-6">
<b-nav vertical class="w-200">
<b-nav-item to="/overview" class="mb-3">
<b-icon icon="house" aria-hidden="true"></b-icon>
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.overview') }}</span>
</b-nav-item>
<b-nav-item to="/send" class="mb-3">
<b-icon icon="arrow-left-right" aria-hidden="true"></b-icon>
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.send') }}</span>
</b-nav-item>
<b-nav-item to="/transactions" class="mb-3">
<b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.transactions') }}</span>
</b-nav-item>
<b-nav-item to="/profile" class="mb-3">
<b-icon icon="gear" aria-hidden="true"></b-icon>
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.profile') }}</span>
</b-nav-item>
</b-nav>
<hr />
<b-nav vertical class="w-100">
<b-nav-item class="mb-3" :href="elopageUri" target="_blank">
<b-icon icon="link45deg" aria-hidden="true"></b-icon>
<span class="d-none d-lg-inline ml-2 mr-2">{{ $t('navigation.members_area') }}</span>
<b-badge v-if="!$store.state.hasElopage" pill variant="danger">
{{ $t('math.exclaim') }}
</b-badge>
</b-nav-item>
<b-nav-item class="mb-3" v-if="$store.state.isAdmin" @click="$emit('admin')">
<b-icon icon="shield-check" aria-hidden="true"></b-icon>
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.admin_area') }}</span>
</b-nav-item>
<b-nav-item class="mb-3" @click="$emit('logout')">
<b-icon icon="power" aria-hidden="true"></b-icon>
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.logout') }}</span>
</b-nav-item>
</b-nav>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'sidebar',
props: {
elopageUri: {
type: String,
required: false,
},
},
}
</script>
<style>
.component-navbar .active,
#component-sidebar .active {
font-weight: bold;
}
</style>

44
frontend/src/layouts/DashboardLayout.vue
View File

@ -12,11 +12,8 @@
@logout="logout"
/>-->
<navbar-new class="main-navbar" :balance="balance"></navbar-new>
<b-container
class="d-none d-lg-none d-md-block d-sm-none position-absolute h-100 width70 zindex10 bg-default"
>
<!-- menu mobil -->
</b-container>
<!-- menu mobil -->
<div
class="d-block d-lg-none d-md-none d-sm-block fixed-bottom h-15 width70 zindex10 bg-default"
>
@ -24,23 +21,42 @@
<span class="navbar-toggler-icon"></span>
</b-button>
</div>
<b-container fluid class="bg-primary pl-0 pl-lg-0 pl-md-6">
<b-container fluid class="bg-primary pl-0 pl-lg-0 pl-md-2">
<b-row>
<b-col lg="2" class="d-none d-lg-block position-absolute h-100 bg-default">
<sidebar
<b-col
lg="2"
md="1"
class="d-none d-lg-block d-md-block position-absolute h-100 bg-default"
>
<!-- <sidebar
class="main-sidebar"
:elopageUri="elopageUri"
@admin="admin"
@logout="logout"
/>-->
<sidebar-new
class="main-sidebar"
:elopageUri="elopageUri"
@admin="admin"
@logout="logout"
/>
</b-col>
<b-col cols="12" lg="7" offset="0" offset-lg="2" order-1 class="bg-warning navbar">
<b-col
cols="12"
lg="7"
md="11"
offset="0"
offset-lg="2"
offset-md="1"
order-1
class="bg-warning navbar"
>
<!-- content header -->
</b-col>
<b-col cols="12" lg="3" offset="0" offset-lg="0" class="bg-info navbar" order-2>
<b-col cols="12" lg="3" md="11" offset="0" offset-lg="0" offset-md="1" class="bg-info navbar" order-2>
<!--rechtebox -->
</b-col>
<b-col cols="12" lg="7" offset="0" offset-lg="2" order-1>
<b-col cols="12" lg="7" md="11" offset="0" offset-lg="2" offset-md="1" order-1>
<div class="main-content">
<fade-transition :duration="200" origin="center top" mode="out-in">
<router-view
@ -67,7 +83,8 @@
<script>
// import Navbar from '@/components/Menu/Navbar.vue'
import NavbarNew from '@/components/Menu/NavbarNew.vue'
import Sidebar from '@/components/Menu/Sidebar.vue'
// import Sidebar from '@/components/Menu/Sidebar.vue'
import SidebarNew from '@/components/Menu/SidebarNew.vue'
import SessionLogoutTimeout from '@/components/SessionLogoutTimeout.vue'
import { logout, transactionsQuery } from '@/graphql/queries'
import ContentFooter from '@/components/ContentFooter.vue'
@ -79,7 +96,8 @@ export default {
components: {
// Navbar,
NavbarNew,
Sidebar,
// Sidebar,
SidebarNew,
SessionLogoutTimeout,
ContentFooter,
FadeTransition,