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

toogle mobil menu show

Browse Source
This commit is contained in:
ogerly 2022-07-07 06:47:50 +02:00
parent bccc52adef
commit 8b9d3270ef
5 changed files with 68 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/assets/scss/gradido-template.scss
View File

@ -7,6 +7,14 @@ body {
cursor: pointer;
}
.bg-default {
background-color: rgba(245 245 245 / 75%) !important;
}
.shadow-default {
box-shadow: rgb(0 0 0 / 14%) 0 24px 80px;
}
.c-grey {
color: #383838 !important;
}
@ -209,6 +217,10 @@ a:hover,
width: 96%;
}
.gradido-border-radius {
border-radius: 26px;
}
.gradido-no-border-radius {
border-radius: 0;
}

29
frontend/src/components/Menu/SidebarNew.vue
View File

@ -1,6 +1,6 @@
<template>
<div id="component-sidebar">
<div class="pl-lg-3">
<div class="pl-lg-1 gradido-border-radius bg-white shadow-default pt-2 mt-4">
<p></p>
<div class="mb-6">
<b-nav vertical class="w-200">
@ -8,6 +8,15 @@
<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="#" class="mb-3">
<b-icon icon="card-heading" aria-hidden="true"></b-icon>
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.top_stories') }}</span>
</b-nav-item>
<b-nav-item to="#" class="mb-3">
<b-icon icon="bookmark" aria-hidden="true"></b-icon>
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.favourites') }}</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>
@ -17,12 +26,24 @@
<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>
<b-icon icon="person" aria-hidden="true"></b-icon>
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.profile') }}</span>
</b-nav-item>
<b-nav-item to="#" class="mb-3">
<b-icon icon="people" aria-hidden="true"></b-icon>
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.members') }}</span>
</b-nav-item>
</b-nav>
<hr />
<b-nav vertical class="w-100">
<b-nav-item to="#" class="mb-3">
<b-icon icon="toggle-off" aria-hidden="true"></b-icon>
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.lightmode') }}</span>
</b-nav-item>
<b-nav-item to="#" class="mb-3">
<b-icon icon="gear" aria-hidden="true"></b-icon>
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.settings') }}</span>
</b-nav-item>
<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>
@ -59,4 +80,8 @@ export default {
#component-sidebar .active {
font-weight: bold;
}
#component-sidebar {
min-width: 53px;
max-width: 200px;
}
</style>

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

@ -1,6 +1,6 @@
<template>
<div>
<div class="position-absolute w-100 h-100">
<div class="bg-default">
<div class="position-absolute w-100 h-100 bg-default">
<!--<navbar
class="main-navbar"
:balance="balance"
@ -14,26 +14,27 @@
<navbar-new class="main-navbar" :balance="balance"></navbar-new>
<!-- menu mobil -->
<div
class="d-block d-lg-none d-md-none d-sm-block fixed-bottom h-15 width70 zindex10 bg-default"
>
<b-button>
<span class="navbar-toggler-icon"></span>
<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-container fluid class="bg-primary pl-0 pl-lg-0 pl-md-2">
<b-container fluid class="pl-0 pl-lg-0 pl-md-2">
<b-row>
<b-col
cols="1"
lg="2"
md="1"
class="d-none d-lg-block d-md-block position-absolute h-100 bg-default"
ref="sideMenu"
class="d-none d-lg-block d-md-block position-absolute h-100 zindex10"
>
<!-- <sidebar
class="main-sidebar"
:elopageUri="elopageUri"
@admin="admin"
@logout="logout"
/>-->
/> -->
<sidebar-new
class="main-sidebar"
:elopageUri="elopageUri"
@ -121,6 +122,7 @@ export default {
pending: true,
visible: false,
tunneledEmail: null,
hamburger: true,
}
},
provide() {
@ -185,6 +187,10 @@ export default {
setTunneledEmail(email) {
this.tunneledEmail = email
},
toogleMobilMenu() {
this.$refs.sideMenu.classList.toggle('d-none')
this.hamburger ? (this.hamburger = false) : (this.hamburger = true)
},
},
computed: {
elopageUri() {
@ -220,4 +226,7 @@ export default {
.width70 {
width: 70px;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(4, 112, 6, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
</style>

5
frontend/src/locales/de.json
View File

@ -190,12 +190,17 @@
},
"navigation": {
"admin_area": "Adminbereich",
"favourites": "Favoriten",
"lightmode": "Lightmode",
"logout": "Abmelden",
"members": "Mitglieder",
"members_area": "Mitgliederbereich",
"overview": "Übersicht",
"profile": "Mein Profil",
"send": "Senden",
"settings": "Einstellung",
"support": "Support",
"top_stories": "Top Stories",
"transactions": "Transaktionen"
},
"qrCode": "QR Code",

5
frontend/src/locales/en.json
View File

@ -190,12 +190,17 @@
},
"navigation": {
"admin_area": "Admin Area",
"favourites": "Favourites",
"lightmode": "Lightmode",
"logout": "Logout",
"members": "Members",
"members_area": "Members area",
"overview": "Overview",
"profile": "My profile",
"send": "Send",
"settings": "Settings",
"support": "Support",
"top_stories": "Top Stories",
"transactions": "Transactions"
},
"qrCode": "QR Code",