mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
sidebar menu position
This commit is contained in:
ogerly
parent
8b3525adcb
commit
42c87839a2
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="component-sidebar">
|
<div id="component-sidebar">
|
||||||
<div class="pl-lg-1 gradido-border-radius shadow-default pt-2 mt-4">
|
<div id="side-menu" class="pl-lg-1 gradido-border-radius shadow-default pt-2 mt-4">
|
||||||
<p></p>
|
|
||||||
<div class="mb-6">
|
<div class="mb-6 mt-3">
|
||||||
<b-nav vertical class="w-200">
|
<b-nav vertical class="w-200">
|
||||||
<b-nav-item to="/overview" class="mb-3">
|
<b-nav-item to="/overview" class="mb-3">
|
||||||
<b-icon icon="house" aria-hidden="true"></b-icon>
|
<b-icon icon="house" aria-hidden="true"></b-icon>
|
||||||
|
|||||||
@ -1,113 +1,107 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main-page">
|
<div class="main-page">
|
||||||
<b-container class="pl-0 pl-lg-0">
|
<div v-if="skeleton">
|
||||||
<div v-if="skeleton">
|
<b-row class="text-center">
|
||||||
<b-row class="text-center">
|
<b-col>
|
||||||
<b-col>
|
<b-skeleton-img no-aspect animation="wave" height="118px"></b-skeleton-img>
|
||||||
<b-skeleton-img no-aspect animation="wave" height="118px"></b-skeleton-img>
|
</b-col>
|
||||||
</b-col>
|
<b-col cols="6">
|
||||||
<b-col cols="6">
|
<b-skeleton animation="wave" class="mt-4 pt-5"></b-skeleton>
|
||||||
<b-skeleton animation="wave" class="mt-4 pt-5"></b-skeleton>
|
</b-col>
|
||||||
</b-col>
|
<b-col>
|
||||||
<b-col>
|
<div class="b-right m-4">
|
||||||
<div class="b-right m-4">
|
<b-row>
|
||||||
<b-row>
|
<b-col><b-skeleton type="avatar"></b-skeleton></b-col>
|
||||||
<b-col><b-skeleton type="avatar"></b-skeleton></b-col>
|
|
||||||
<b-col>
|
|
||||||
<b-skeleton></b-skeleton>
|
|
||||||
<b-skeleton></b-skeleton>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<b-row class="text-center mt-5">
|
|
||||||
<b-col>
|
|
||||||
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
|
||||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
|
||||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="6">
|
|
||||||
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
|
||||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
|
||||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
|
||||||
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
|
||||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
|
||||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
|
||||||
</b-col>
|
|
||||||
<b-col>
|
|
||||||
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
|
||||||
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
|
||||||
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<!--sm menu mobil hamburger button-->
|
|
||||||
<div class="d-block d-lg-none d-md-none d-sm-block fixed-bottom h-15 width70 zindex1000">
|
|
||||||
<b-button @click="toogleMobilMenu">
|
|
||||||
<span v-if="hamburger" class="navbar-toggler-icon"></span>
|
|
||||||
<span v-else><b-icon icon="x-square" aria-hidden="true"></b-icon></span>
|
|
||||||
</b-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<b-row>
|
|
||||||
<!-- navbar -->
|
|
||||||
<b-col>
|
|
||||||
<navbar-new class="main-navbar" :balance="balance"></navbar-new>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<d-row fluid class="d-flex">
|
|
||||||
<b-col cols="2" ref="sideMenu" class="d-none d-lg-block d-md-block">
|
|
||||||
<sidebar-new
|
|
||||||
class="main-sidebar"
|
|
||||||
@admin="admin"
|
|
||||||
@logout="logout"
|
|
||||||
@modeToggle="modeToggle"
|
|
||||||
/>
|
|
||||||
</b-col>
|
|
||||||
<b-col>
|
|
||||||
<d-row>
|
|
||||||
<b-col>
|
<b-col>
|
||||||
<d-row class="d-lg-flex">
|
<b-skeleton></b-skeleton>
|
||||||
<b-col col="12" lg="9" style="background-color: blue">
|
<b-skeleton></b-skeleton>
|
||||||
content header
|
|
||||||
</b-col>
|
|
||||||
<b-col col="12" lg="3" style="background-color: red">
|
|
||||||
right
|
|
||||||
</b-col>
|
|
||||||
</d-row>
|
|
||||||
</b-col>
|
</b-col>
|
||||||
|
</b-row>
|
||||||
<b-col cols="12" lg="9">
|
</div>
|
||||||
<div class="main-content mt-3">
|
</b-col>
|
||||||
<fade-transition :duration="200" origin="center top" mode="out-in">
|
</b-row>
|
||||||
<router-view
|
<b-row class="text-center mt-5">
|
||||||
ref="router-view"
|
<b-col>
|
||||||
:balance="balance"
|
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
||||||
:gdt-balance="GdtBalance"
|
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||||
:transactions="transactions"
|
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||||
:transactionCount="transactionCount"
|
</b-col>
|
||||||
:transactionLinkCount="transactionLinkCount"
|
<b-col cols="6">
|
||||||
:pending="pending"
|
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
||||||
@update-transactions="updateTransactions"
|
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||||
@set-tunneled-email="setTunneledEmail"
|
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||||
></router-view>
|
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
||||||
</fade-transition>
|
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||||
</div>
|
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||||
</b-col>
|
</b-col>
|
||||||
</d-row>
|
<b-col>
|
||||||
</b-col>
|
<b-skeleton animation="wave" width="85%"></b-skeleton>
|
||||||
</d-row>
|
<b-skeleton animation="wave" width="55%"></b-skeleton>
|
||||||
<b-row>
|
<b-skeleton animation="wave" width="70%"></b-skeleton>
|
||||||
<!-- footer -->
|
</b-col>
|
||||||
<b-col>
|
</b-row>
|
||||||
<content-footer v-if="!$route.meta.hideFooter"></content-footer>
|
</div>
|
||||||
</b-col>
|
<div v-else>
|
||||||
</b-row>
|
<!--sm menu mobil hamburger button-->
|
||||||
<session-logout-timeout @logout="logout"></session-logout-timeout>
|
<div class="d-block d-lg-none d-md-none d-sm-block fixed-bottom h-15 width70 zindex1000">
|
||||||
|
<b-button @click="toogleMobilMenu">
|
||||||
|
<span v-if="hamburger" class="navbar-toggler-icon"></span>
|
||||||
|
<span v-else><b-icon icon="x-square" aria-hidden="true"></b-icon></span>
|
||||||
|
</b-button>
|
||||||
</div>
|
</div>
|
||||||
</b-container>
|
|
||||||
|
<b-row>
|
||||||
|
<!-- navbar -->
|
||||||
|
<b-col>
|
||||||
|
<navbar-new class="main-navbar" :balance="balance"></navbar-new>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<d-row fluid class="d-flex">
|
||||||
|
<b-col cols="2" ref="sideMenuRow" class="d-none d-lg-block d-md-block zindex1000">
|
||||||
|
<sidebar-new
|
||||||
|
class="main-sidebar"
|
||||||
|
@admin="admin"
|
||||||
|
@logout="logout"
|
||||||
|
@modeToggle="modeToggle"
|
||||||
|
/>
|
||||||
|
</b-col>
|
||||||
|
<b-col>
|
||||||
|
<d-row>
|
||||||
|
<b-col>
|
||||||
|
<d-row class="d-lg-flex">
|
||||||
|
<b-col col="12" lg="9" style="background-color: blue">content header</b-col>
|
||||||
|
<b-col col="12" lg="3" style="background-color: red">right</b-col>
|
||||||
|
</d-row>
|
||||||
|
</b-col>
|
||||||
|
|
||||||
|
<b-col cols="12" lg="9">
|
||||||
|
<div class="main-content mt-3">
|
||||||
|
<fade-transition :duration="200" origin="center top" mode="out-in">
|
||||||
|
<router-view
|
||||||
|
ref="router-view"
|
||||||
|
:balance="balance"
|
||||||
|
:gdt-balance="GdtBalance"
|
||||||
|
:transactions="transactions"
|
||||||
|
:transactionCount="transactionCount"
|
||||||
|
:transactionLinkCount="transactionLinkCount"
|
||||||
|
:pending="pending"
|
||||||
|
@update-transactions="updateTransactions"
|
||||||
|
@set-tunneled-email="setTunneledEmail"
|
||||||
|
></router-view>
|
||||||
|
</fade-transition>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</d-row>
|
||||||
|
</b-col>
|
||||||
|
</d-row>
|
||||||
|
<b-row>
|
||||||
|
<!-- footer -->
|
||||||
|
<b-col>
|
||||||
|
<content-footer v-if="!$route.meta.hideFooter"></content-footer>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<session-logout-timeout @logout="logout"></session-logout-timeout>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@ -216,7 +210,12 @@ export default {
|
|||||||
this.tunneledEmail = email
|
this.tunneledEmail = email
|
||||||
},
|
},
|
||||||
toogleMobilMenu() {
|
toogleMobilMenu() {
|
||||||
this.$refs.sideMenu.classList.toggle('d-none')
|
console.log(this.$refs.sideMenuRow.classList.contains('position-absolute'))
|
||||||
|
|
||||||
|
this.$refs.sideMenuRow.classList.toggle('d-none')
|
||||||
|
this.$refs.sideMenuRow.classList.toggle('position-absolute')
|
||||||
|
console.log(document.getElementById('component-sidebar'))
|
||||||
|
document.getElementById('side-menu').classList.toggle('bg-lightgrey')
|
||||||
this.hamburger ? (this.hamburger = false) : (this.hamburger = true)
|
this.hamburger ? (this.hamburger = false) : (this.hamburger = true)
|
||||||
},
|
},
|
||||||
dark() {
|
dark() {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user