mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-29 03:10:51 +00:00
- New mobile navigation experience
This commit is contained in:
Peter Papp
@@ -2,13 +2,13 @@
|
||||
<MenuMobile name="file-filter">
|
||||
<MenuMobileGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" :is-active="$isThisLocation('base')" />
|
||||
<Option @click.native="goToLatest" :title="$t('menu.latest')" icon="upload-cloud" :is-active="$isThisLocation('latest')" />
|
||||
<Option @click.native="goToTrash" :title="$t('menu.trash')" icon="trash" :is-active="$isThisLocation(['trash', 'trash-root'])" />
|
||||
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" :is-active="$isThisLocation('base')" is-hover-disabled="true" />
|
||||
<Option @click.native="goToLatest" :title="$t('menu.latest')" icon="upload-cloud" :is-active="$isThisLocation('latest')" is-hover-disabled="true" />
|
||||
<Option @click.native="goToTrash" :title="$t('menu.trash')" icon="trash" :is-active="$isThisLocation(['trash', 'trash-root'])" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="goToShared" :title="$t('sidebar.my_shared')" icon="share" :is-active="$isThisLocation('shared')" />
|
||||
<Option @click.native="goToParticipantUploads" :title="$t('sidebar.participant_uploads')" icon="users" :is-active="$isThisLocation('participant_uploads')" />
|
||||
<Option @click.native="goToShared" :title="$t('sidebar.my_shared')" icon="share" :is-active="$isThisLocation('shared')" is-hover-disabled="true" />
|
||||
<Option @click.native="goToParticipantUploads" :title="$t('sidebar.participant_uploads')" icon="users" :is-active="$isThisLocation('participant_uploads')" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
@@ -20,7 +20,6 @@ import OptionGroup from '@/components/FilesView/OptionGroup'
|
||||
import MenuMobile from '@/components/Mobile/MenuMobile'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FileMenuMobile',
|
||||
@@ -58,7 +57,7 @@ export default {
|
||||
goToParticipantUploads() {
|
||||
this.$store.dispatch('getParticipantUploads')
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<li class="menu-option group">
|
||||
<div class="icon group-hover-text-theme">
|
||||
<li class="menu-option group" :class="{'hover-disabled': isHoverDisabled}">
|
||||
<div class="icon-left group-hover-text-theme">
|
||||
<calendar-icon v-if="icon === 'calendar'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<grid-icon v-if="icon === 'grid'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<list-icon v-if="icon === 'list'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
@@ -24,16 +24,35 @@
|
||||
<user-icon v-if="icon === 'user'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<settings-icon v-if="icon === 'settings'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<power-icon v-if="icon === 'power'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<lock-icon v-if="icon === 'lock'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<cloud-icon v-if="icon === 'cloud'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<credit-card-icon v-if="icon === 'credit-card'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<file-text-icon v-if="icon === 'file-text'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<database-icon v-if="icon === 'database'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<globe-icon v-if="icon === 'globe'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<monitor-icon v-if="icon === 'monitor'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<box-icon v-if="icon === 'box'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
</div>
|
||||
<div class="text-label group-hover-text-theme" :class="{'text-theme': isActive}">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div v-if="isArrowRight" class="icon-right group-hover-text-theme">
|
||||
<chevron-right-icon size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
|
||||
import {
|
||||
ChevronRightIcon,
|
||||
BoxIcon,
|
||||
MonitorIcon,
|
||||
GlobeIcon,
|
||||
FileTextIcon,
|
||||
CreditCardIcon,
|
||||
CloudIcon,
|
||||
LockIcon,
|
||||
PowerIcon,
|
||||
SettingsIcon,
|
||||
UsersIcon,
|
||||
@@ -55,16 +74,28 @@ import {
|
||||
GridIcon,
|
||||
ListIcon,
|
||||
CalendarIcon,
|
||||
DatabaseIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'Option',
|
||||
props:[
|
||||
'isHoverDisabled',
|
||||
'isArrowRight',
|
||||
'isActive',
|
||||
'title',
|
||||
'icon'
|
||||
],
|
||||
components: {
|
||||
BoxIcon,
|
||||
MonitorIcon,
|
||||
GlobeIcon,
|
||||
DatabaseIcon,
|
||||
ChevronRightIcon,
|
||||
FileTextIcon,
|
||||
CreditCardIcon,
|
||||
CloudIcon,
|
||||
LockIcon,
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
UploadCloudIcon,
|
||||
@@ -106,7 +137,21 @@ import {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
.icon-right {
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
@include transform(translateY(3px));
|
||||
}
|
||||
|
||||
polyline {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-left {
|
||||
margin-right: 20px;
|
||||
line-height: 0;
|
||||
|
||||
@@ -124,10 +169,11 @@ import {
|
||||
@include font-size(16);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover:not(.hover-disabled) {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.menu-option {
|
||||
|
||||
@@ -1,140 +0,0 @@
|
||||
<template>
|
||||
<ul class="link-group">
|
||||
<li @click="goToItem(link)" v-for="(link, i) in navigation" :key="i" v-if="link.isVisible" :class="link.icon" class="link-item">
|
||||
<div class="menu-icon">
|
||||
<hard-drive-icon v-if="link.icon === 'hard-drive'" size="17" />
|
||||
<share-icon v-if="link.icon === 'share'" size="17" />
|
||||
<trash2-icon v-if="link.icon === 'trash'" size="17" />
|
||||
<power-icon v-if="link.icon === 'power'" size="17" />
|
||||
<settings-icon v-if="link.icon === 'settings'" size="17" />
|
||||
<upload-cloud-icon v-if="link.icon === 'latest'" size="17" />
|
||||
<user-icon v-if="link.icon === 'user'" size="17" />
|
||||
<users-icon v-if="link.icon === 'users'" size="17" />
|
||||
<lock-icon v-if="link.icon === 'lock'" size="17" />
|
||||
<file-text-icon v-if="link.icon === 'file-text'" size="17" />
|
||||
<database-icon v-if="link.icon === 'database'" size="17" />
|
||||
<credit-card-icon v-if="link.icon === 'credit-card'" size="17" />
|
||||
<cloud-icon v-if="link.icon === 'cloud'" size="17" />
|
||||
<monitor-icon v-if="link.icon === 'monitor'" size="17" />
|
||||
<box-icon v-if="link.icon === 'box'" size="17" />
|
||||
<globe-icon v-if="link.icon === 'language'" size="17" />
|
||||
</div>
|
||||
<b class="menu-link">
|
||||
<span>{{ link.title }}</span>
|
||||
<chevron-right-icon size="15" class="arrow-right"/>
|
||||
</b>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ChevronRightIcon,
|
||||
UploadCloudIcon,
|
||||
CreditCardIcon,
|
||||
HardDriveIcon,
|
||||
FileTextIcon,
|
||||
SettingsIcon,
|
||||
DatabaseIcon,
|
||||
MonitorIcon,
|
||||
Trash2Icon,
|
||||
CloudIcon,
|
||||
PowerIcon,
|
||||
GlobeIcon,
|
||||
ShareIcon,
|
||||
UsersIcon,
|
||||
UserIcon,
|
||||
LockIcon,
|
||||
BoxIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'MenuItemList',
|
||||
components: {
|
||||
BoxIcon,
|
||||
MonitorIcon,
|
||||
ChevronRightIcon,
|
||||
UploadCloudIcon,
|
||||
CreditCardIcon,
|
||||
HardDriveIcon,
|
||||
DatabaseIcon,
|
||||
FileTextIcon,
|
||||
SettingsIcon,
|
||||
Trash2Icon,
|
||||
CloudIcon,
|
||||
PowerIcon,
|
||||
GlobeIcon,
|
||||
UsersIcon,
|
||||
ShareIcon,
|
||||
LockIcon,
|
||||
UserIcon,
|
||||
},
|
||||
props: [
|
||||
'navigation'
|
||||
],
|
||||
methods: {
|
||||
goToItem(link) {
|
||||
this.$emit('menu', link.icon)
|
||||
|
||||
// Go to next route
|
||||
if (link.routeName !== this.$route.name)
|
||||
this.$router.push({name: link.routeName})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
|
||||
.link-item {
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
padding: 17px 0;
|
||||
width: 100%;
|
||||
|
||||
.menu-icon {
|
||||
display: block;
|
||||
margin-right: 20px;
|
||||
|
||||
svg {
|
||||
margin-top: -1px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
path, line, polyline, rect, circle, ellipse {
|
||||
stroke: $text;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $text;
|
||||
|
||||
span {
|
||||
@include font-size(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.link-item {
|
||||
|
||||
.menu-icon {
|
||||
|
||||
path, line, polyline, rect, circle, ellipse {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -61,12 +61,12 @@
|
||||
// Transition
|
||||
.context-menu-enter-active,
|
||||
.fade-enter-active {
|
||||
transition: all 200ms;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.context-menu-leave-active,
|
||||
.fade-leave-active {
|
||||
transition: all 200ms;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
|
||||
@@ -1,13 +1,51 @@
|
||||
<template>
|
||||
<MenuMobile name="user-navigation">
|
||||
<UserHeadline class="user-info" />
|
||||
|
||||
<!--User avatar-->
|
||||
<UserHeadline v-if="!clickedSubmenu" class="user-info" />
|
||||
|
||||
<!--Go back button-->
|
||||
<div v-if="clickedSubmenu" @click.stop="showSubmenu(undefined)" class="go-back">
|
||||
<chevron-left-icon size="19" class="text-theme" />
|
||||
<span class="title text-theme">{{ backTitle }}</span>
|
||||
</div>
|
||||
|
||||
<!--Menu links-->
|
||||
<MenuMobileGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" />
|
||||
<Option @click.native="showUserProfileMenu" :title="$t('menu.settings')" icon="user" />
|
||||
<Option @click.native="goToAdmin" :title="$t('menu.admin')" icon="settings" v-if="isAdmin" />
|
||||
<Option @click.native="logOut" :title="$t('menu.logout')" icon="power" />
|
||||
|
||||
<!--Main navigation-->
|
||||
<OptionGroup v-if="!clickedSubmenu">
|
||||
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" is-hover-disabled="true"/>
|
||||
<Option @click.native.stop="showSubmenu('settings')" :title="$t('menu.settings')" icon="user" :is-arrow-right="true" is-hover-disabled="true"/>
|
||||
<Option v-if="isAdmin" @click.native.stop="showSubmenu('admin')" :title="$t('menu.admin')" icon="settings" :is-arrow-right="true" is-hover-disabled="true"/>
|
||||
</OptionGroup>
|
||||
<OptionGroup v-if="!clickedSubmenu">
|
||||
<Option @click.native="logOut" :title="$t('menu.logout')" icon="power" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
|
||||
<!--Submenu: User settings-->
|
||||
<OptionGroup v-if="clickedSubmenu === 'settings'">
|
||||
<Option @click.native="goToRoute('Profile')" :title="$t('menu.profile')" icon="user" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Storage')" :title="$t('menu.storage')" icon="hard-drive" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Password')" :title="$t('menu.password')" icon="lock" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
<OptionGroup v-if="clickedSubmenu === 'settings' && config.isSaaS">
|
||||
<Option v-if="" @click.native="goToRoute('Subscription')" :title="$t('menu.subscription')" icon="cloud" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('PaymentMethods')" :title="$t('menu.payment_cards')" icon="credit-card" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Invoice')" :title="$t('menu.invoices')" icon="file-text" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
|
||||
<!--Submenu: Admin settings-->
|
||||
<OptionGroup v-if="clickedSubmenu === 'admin'">
|
||||
<Option @click.native="goToRoute('Dashboard')" :title="$t('admin_menu.dashboard')" icon="box" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Users')" :title="$t('admin_menu.users')" icon="users" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('AppOthers')" :title="$t('admin_menu.settings')" icon="settings" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Pages')" :title="$t('admin_menu.pages')" icon="monitor" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Language')" :title="$t('languages')" icon="globe" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
<OptionGroup v-if="clickedSubmenu === 'admin' && config.isSaaS">
|
||||
<Option v-if="" @click.native="goToRoute('Plans')" :title="$t('admin_menu.plans')" icon="database" is-hover-disabled="true" />
|
||||
<Option @click.native="goToRoute('Invoices')" :title="$t('admin_menu.invoices')" icon="file-text" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
@@ -19,11 +57,13 @@
|
||||
import UserHeadline from '@/components/Sidebar/UserHeadline'
|
||||
import MenuMobile from '@/components/Mobile/MenuMobile'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {ChevronLeftIcon} from 'vue-feather-icons'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MobileNavigation',
|
||||
components: {
|
||||
ChevronLeftIcon,
|
||||
MenuMobileGroup,
|
||||
UserHeadline,
|
||||
OptionGroup,
|
||||
@@ -33,21 +73,39 @@
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'homeDirectory',
|
||||
'config',
|
||||
'user',
|
||||
]),
|
||||
isAdmin() {
|
||||
return this.user && this.user.data.attributes.role === 'admin'
|
||||
},
|
||||
backTitle() {
|
||||
let location = {
|
||||
'settings': this.$t('menu.settings'),
|
||||
'admin': this.$t('menu.admin')
|
||||
}
|
||||
|
||||
return 'Go back from ' + location[this.clickedSubmenu]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
clickedSubmenu: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToRoute(route) {
|
||||
this.$router.push({name: route})
|
||||
this.clickedSubmenu = undefined
|
||||
},
|
||||
showSubmenu(name) {
|
||||
this.clickedSubmenu = name
|
||||
},
|
||||
goToFiles() {
|
||||
if (this.$route.name !== 'Files')
|
||||
this.$router.push({name: 'Files'})
|
||||
|
||||
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
|
||||
},
|
||||
showUserProfileMenu() {
|
||||
|
||||
},
|
||||
goToAdmin() {
|
||||
|
||||
},
|
||||
logOut() {
|
||||
this.$store.dispatch('logOut')
|
||||
@@ -57,8 +115,27 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/vuefilemanager/_variables";
|
||||
@import "@assets/vuefilemanager/_mixins";
|
||||
|
||||
.user-info {
|
||||
padding: 20px 20px 10px;
|
||||
}
|
||||
|
||||
.go-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30px 20px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.title {
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
polyline {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Vendored
-22
@@ -1,11 +1,7 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import i18n from '@/i18n/index'
|
||||
import store from './store/index'
|
||||
|
||||
import AdminMobileMenu from './views/Mobile/AdminMobileMenu'
|
||||
import UserProfileMobileMenu from './views/Mobile/UserProfileMobileMenu'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
const routesAdmin = [
|
||||
@@ -296,24 +292,6 @@ const routesAdmin = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'AdminMobileMenu',
|
||||
path: '/admin-menu',
|
||||
component: AdminMobileMenu,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
title: 'routes_title.settings_mobile'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'UserProfileMobileMenu',
|
||||
path: '/user-menu',
|
||||
component: UserProfileMobileMenu,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
title: 'routes_title.profile_settings'
|
||||
},
|
||||
},
|
||||
]
|
||||
const routesShared = [
|
||||
{
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user