nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 11:00:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

- New mobile navigation experience

Browse Source
This commit is contained in:
Peter Papp
2021-04-15 09:28:06 +02:00
parent a7ba0719a5
commit 110f7b60d6
11 changed files with 239 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/views/Mobile/AdminMobileMenu.vue
-125
View File
@@ -1,125 +0,0 @@
<template>
<div id="single-page">
<div id="page-content">
<!--Header-->
<MobileHeader :title="$t($router.currentRoute.meta.title)"/>
<!--Content-->
<div class="content-page">
<nav class="mobile-navigation">
<!--Admin menu-->
<b class="mobile-menu-label">{{ $t('global.admin') }}</b>
<MenuItemList :navigation="AdminNavigation" />
<!--SaaS menu-->
<b v-if="config.isSaaS" class="mobile-menu-label">{{ $t('global.saas') }}</b>
<MenuItemList v-if="config.isSaaS" :navigation="SassNavigation" />
</nav>
</div>
</div>
</div>
</template>
<script>
import MenuItemList from '@/components/Mobile/MenuItemList'
import MobileHeader from '@/components/Mobile/MobileHeader'
import { mapGetters } from 'vuex'
export default {
name: 'AdminMobileMenu',
components: {
MenuItemList,
MobileHeader,
},
computed: {
...mapGetters(['config']),
},
data() {
return {
AdminNavigation: [
{
icon: 'box',
title: this.$t('admin_menu.dashboard'),
routeName: 'Dashboard',
isVisible: true,
},
{
icon: 'users',
title: this.$t('admin_menu.users'),
routeName: 'Users',
isVisible: true,
},
{
icon: 'settings',
title: this.$t('admin_menu.settings'),
routeName: 'AppOthers',
isVisible: true,
},
{
icon: 'monitor',
title: this.$t('admin_menu.pages'),
routeName: 'Pages',
isVisible: true,
},
{
icon: 'language',
title: this.$t('languages'),
routeName: 'Language',
isVisible: true,
}
],
SassNavigation: [
{
icon: 'database',
title: this.$t('admin_menu.plans'),
routeName: 'Plans',
isVisible: true,
},
{
icon: 'file-text',
title: this.$t('admin_menu.invoices'),
routeName: 'Invoices',
isVisible: true,
},
]
}
},
}
</script>
<style scoped lang="scss">
@import '@assets/vuefilemanager/_variables';
@import '@assets/vuefilemanager/_mixins';
.mobile-navigation {
width: 100%;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
.mobile-menu-label {
margin-top: 30px;
margin-bottom: 5px;
@include font-size(11);
color: $text-muted;
display: block;
&:first-child {
margin-top: 0;
}
}
}
@media (prefers-color-scheme: dark) {
.mobile-navigation {
.mobile-menu-label {
color: $dark_mode_text_secondary;
}
}
}
</style>
resources/js/views/Mobile/UserProfileMobileMenu.vue
-114
View File
@@ -1,114 +0,0 @@
<template>
<div id="single-page">
<div id="page-content">
<!--Header-->
<MobileHeader :title="$t($router.currentRoute.meta.title)"/>
<!--Content-->
<div class="content-page">
<nav class="mobile-navigation">
<!--Admin menu-->
<b class="mobile-menu-label">{{ $t('global.menu') }}</b>
<MenuItemList :navigation="ProfileNavigation" />
<!--SaaS menu-->
<b class="mobile-menu-label">{{ $t('global.subscription') }}</b>
<MenuItemList :navigation="SubscriptionNavigation" />
</nav>
</div>
</div>
</div>
</template>
<script>
import MenuItemList from '@/components/Mobile/MenuItemList'
import MobileHeader from '@/components/Mobile/MobileHeader'
export default {
name: 'UserProfileMobileMenu',
components: {
MenuItemList,
MobileHeader,
},
data() {
return {
ProfileNavigation: [
{
icon: 'user',
title: this.$t('menu.profile'),
routeName: 'Profile',
isVisible: true,
},
{
icon: 'hard-drive',
title: this.$t('menu.storage'),
routeName: 'Storage',
isVisible: true,
},
{
icon: 'lock',
title: this.$t('menu.password'),
routeName: 'Password',
isVisible: true,
},
],
SubscriptionNavigation: [
{
icon: 'cloud',
title: this.$t('menu.subscription'),
routeName: 'Subscription',
isVisible: true,
},
{
icon: 'credit-card',
title: this.$t('menu.payment_cards'),
routeName: 'PaymentMethods',
isVisible: true,
},
{
icon: 'file-text',
title: this.$t('menu.invoices'),
routeName: 'Invoice',
isVisible: true,
},
]
}
},
}
</script>
<style scoped lang="scss">
@import '@assets/vuefilemanager/_variables';
@import '@assets/vuefilemanager/_mixins';
.mobile-navigation {
width: 100%;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
.mobile-menu-label {
margin-top: 30px;
margin-bottom: 5px;
@include font-size(11);
color: $text-muted;
display: block;
&:first-child {
margin-top: 0;
}
}
}
@media (prefers-color-scheme: dark) {
.mobile-navigation {
.mobile-menu-label {
color: $dark_mode_text_secondary;
}
}
}
</style>