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

- Mobile menu components refactoring

Browse Source 
- Components name renaming
This commit is contained in:
Peter Papp
2021-04-14 11:17:29 +02:00
parent 16b7575fca
commit eba8903792
40 changed files with 1044 additions and 1340 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Mobile/MenuItemList.vue
+29 -34
View File
@@ -1,29 +1,29 @@
<template>
<ul class="link-group">
<router-link :to="{name: link.routeName}" v-for="(link, i) in navigation" :key="i" v-if="link.isVisible" :class="link.icon" class="link-item" @click.native="$emit('menu', link.icon)">
<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"></hard-drive-icon>
<share-icon v-if="link.icon === 'share'" size="17"></share-icon>
<trash2-icon v-if="link.icon === 'trash'" size="17"></trash2-icon>
<power-icon v-if="link.icon === 'power'" size="17"></power-icon>
<settings-icon v-if="link.icon === 'settings'" size="17"></settings-icon>
<upload-cloud-icon v-if="link.icon === 'latest'" size="17"></upload-cloud-icon>
<user-icon v-if="link.icon === 'user'" size="17"></user-icon>
<users-icon v-if="link.icon === 'users'" size="17"></users-icon>
<lock-icon v-if="link.icon === 'lock'" size="17"></lock-icon>
<file-text-icon v-if="link.icon === 'file-text'" size="17"></file-text-icon>
<database-icon v-if="link.icon === 'database'" size="17"></database-icon>
<credit-card-icon v-if="link.icon === 'credit-card'" size="17"></credit-card-icon>
<cloud-icon v-if="link.icon === 'cloud'" size="17"></cloud-icon>
<monitor-icon v-if="link.icon === 'monitor'" size="17"></monitor-icon>
<box-icon v-if="link.icon === 'box'" size="17"></box-icon>
<globe-icon v-if="link.icon === 'language'" size="17"></globe-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"></chevron-right-icon>
<chevron-right-icon size="15" class="arrow-right"/>
</b>
</router-link>
</li>
</ul>
</template>
@@ -49,7 +49,7 @@
} from 'vue-feather-icons'
export default {
name: 'MenuBar',
name: 'MenuItemList',
components: {
BoxIcon,
MonitorIcon,
@@ -72,6 +72,15 @@
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>
@@ -85,20 +94,6 @@
padding: 17px 0;
width: 100%;
&.power {
.menu-icon {
path, line, polyline, rect, circle, ellipse {
stroke: $red;
}
}
.menu-link {
color: $red;
}
}
.menu-icon {
display: block;
margin-right: 20px;