mirror of
https://github.com/IT4Change/gradido.git
synced 2026-02-06 09:56:05 +00:00
add mobile sidebar
This commit is contained in:
ogerly
parent
d02b9ab52d
commit
522f41df09
@ -3,11 +3,14 @@
|
||||
<b-navbar toggleable="lg" class="pr-4">
|
||||
<b-navbar-brand>
|
||||
<b-img
|
||||
class="imgLogo ml--3 mt-lg--2 mt-3 p-2 mb-3 zindex1000"
|
||||
class="imgLogo ml--3 mt-lg--2 mt-3 p-2 mb-3 zindex1000 d-none d-lg-block"
|
||||
:src="logo"
|
||||
width="200"
|
||||
alt="..."
|
||||
/>
|
||||
<b-button v-b-toggle.sidebar-1 class="d-block d-lg-none">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</b-button>
|
||||
</b-navbar-brand>
|
||||
<b-img class="sheet-img position-absolute zindex1000" :src="sheet"></b-img>
|
||||
|
||||
|
||||
@ -6,39 +6,39 @@
|
||||
<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>
|
||||
<span class="ml-2">{{ $t('navigation.overview') }}</span>
|
||||
</b-nav-item>
|
||||
<!-- <b-nav-item to="/storys" class="mb-3">
|
||||
<b-icon icon="card-heading" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.topStories') }}</span>
|
||||
<span class="ml-2">{{ $t('navigation.topStories') }}</span>
|
||||
</b-nav-item> -->
|
||||
<!-- <b-nav-item to="/addresses" class="mb-3">
|
||||
<b-icon icon="bookmark" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.adresses') }}</span>
|
||||
<span class="ml-2">{{ $t('navigation.adresses') }}</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>
|
||||
<span class="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>
|
||||
<span class="ml-2">{{ $t('navigation.transactions') }}</span>
|
||||
</b-nav-item>
|
||||
<!-- <b-nav-item to="/profile" class="mb-3 HIDE_FOR_WORK_IN_PROCESS">
|
||||
<b-icon icon="person" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.profile') }}</span>
|
||||
<span class="ml-2">{{ $t('navigation.profile') }}</span>
|
||||
</b-nav-item> -->
|
||||
<b-nav-item to="/community" 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>
|
||||
<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-icon icon="info" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.info') }}</span>
|
||||
<span class="ml-2">{{ $t('navigation.info') }}</span>
|
||||
</b-nav-item>
|
||||
<!-- <b-nav-item
|
||||
@click="
|
||||
@ -48,7 +48,7 @@
|
||||
class="mb-3 HIDE_FOR_WORK_IN_PROCESS"
|
||||
>
|
||||
<b-icon :icon="lightmode ? 'toggle-on' : 'toggle-off'" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.lightmode') }}</span>
|
||||
<span class="ml-2">{{ $t('navigation.lightmode') }}</span>
|
||||
<label for="checkbox" class="switch-label">
|
||||
<span v-if="lightmode">{{ $t('navigation.moon') }}</span>
|
||||
<span v-else>{{ $t('navigation.sun') }}</span>
|
||||
@ -56,15 +56,15 @@
|
||||
</b-nav-item> -->
|
||||
<b-nav-item to="/settings" 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>
|
||||
<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-icon icon="shield-check" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.admin_area') }}</span>
|
||||
<span class="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>
|
||||
<span class="ml-2">{{ $t('navigation.logout') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item
|
||||
class="mt-4 mb-3 d-block d-md-none d-lg-none"
|
||||
|
||||
19
frontend/src/components/MobileSidebar/MobileSidebar.vue
Normal file
19
frontend/src/components/MobileSidebar/MobileSidebar.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-sidebar id="sidebar-1" no-header bg-variant="white" :backdrop="true">
|
||||
<div class="px-3 py-2">
|
||||
<sidebar />
|
||||
</div>
|
||||
</b-sidebar>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Sidebar from '@/components/Menu/Sidebar.vue'
|
||||
|
||||
export default {
|
||||
name: 'MobileSidebar',
|
||||
components: {
|
||||
Sidebar,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -4,20 +4,14 @@
|
||||
<skeleton-overview />
|
||||
</div>
|
||||
<div v-else>
|
||||
<!--menu mobil hamburger button-->
|
||||
<div class="d-block d-lg-none d-md-none d-sm-block fixed-bottom h-15 width70 zindex1000">
|
||||
{{ hamburger }}
|
||||
<b-button v-if="hamburger" @click="toogleMobilMenu">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</b-button>
|
||||
</div>
|
||||
<!-- navbar -->
|
||||
<b-row>
|
||||
<b-col>
|
||||
<navbar class="main-navbar" :balance="balance"></navbar>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<div ref="sideMenuRow" class="d-none d-lg-none d-md-none zindex1000">
|
||||
<mobile-sidebar />
|
||||
<!-- <div ref="sideMenuRow" class="d-none d-lg-none d-md-none zindex1000">
|
||||
<sidebar
|
||||
class="main-sidebar"
|
||||
@admin="admin"
|
||||
@ -25,10 +19,10 @@
|
||||
@modeToggle="modeToggle"
|
||||
@toogleMobilMenu="toogleMobilMenu"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
<b-row fluid class="d-flex">
|
||||
<!-- Sidebar left -->
|
||||
<b-col cols="2" class="d-none d-lg-block d-md-block">
|
||||
<b-col cols="2" class="d-none d-lg-block">
|
||||
<sidebar
|
||||
class="main-sidebar"
|
||||
@admin="admin"
|
||||
@ -101,6 +95,7 @@ import RightSide from '@/layouts/templates/RightSide.vue'
|
||||
import SkeletonOverview from '@/components/skeleton/Overview.vue'
|
||||
import Navbar from '@/components/Menu/Navbar.vue'
|
||||
import Sidebar from '@/components/Menu/Sidebar.vue'
|
||||
import MobileSidebar from '@/components/MobileSidebar/MobileSidebar.vue'
|
||||
import SessionLogoutTimeout from '@/components/SessionLogoutTimeout.vue'
|
||||
import { transactionsQuery } from '@/graphql/queries'
|
||||
import { logout } from '@/graphql/mutations'
|
||||
@ -116,6 +111,7 @@ export default {
|
||||
RightSide,
|
||||
Navbar,
|
||||
Sidebar,
|
||||
MobileSidebar,
|
||||
SessionLogoutTimeout,
|
||||
ContentFooter,
|
||||
FadeTransition,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user