mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
- SidebarNavigation refactored
- credit usage fe implementation
This commit is contained in:
Čarodej
@@ -1,81 +1,132 @@
|
||||
<template>
|
||||
<nav class="menu-bar dark:bg-dark-foreground bg-light-background flex-none xl:w-20 w-16 lg:grid hidden">
|
||||
<div class="icon-navigation menu" v-if="user">
|
||||
<nav class="pt-7 select-none dark:bg-dark-foreground bg-light-background flex-none xl:w-20 w-16 lg:grid hidden">
|
||||
|
||||
<router-link :to="{name: 'Profile'}" class="icon-navigation-item user">
|
||||
<UserAvatar />
|
||||
</router-link>
|
||||
<!--Navigation-->
|
||||
<div v-if="user" class="mb-auto text-center">
|
||||
|
||||
<router-link :to="{name: 'Files'}" :class="{'is-active': isSection('Platform')}" :title="$t('locations.home')" class="icon-navigation-item home">
|
||||
<div class="button-icon text-theme">
|
||||
<hard-drive-icon size="19" class="text-theme" />
|
||||
<MemberAvatar
|
||||
class="mb-1 mx-auto inline-block"
|
||||
:size="44"
|
||||
:is-border="false"
|
||||
:member="user"
|
||||
/>
|
||||
|
||||
<!--Usage-->
|
||||
<div class="text-center leading-3 mb-7">
|
||||
<b class="text-xs font-bold leading-3 block text-theme">
|
||||
$22,93
|
||||
</b>
|
||||
<span class="text-xs text-gray-500">
|
||||
{{ $t('usage') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--Navigation-->
|
||||
<router-link
|
||||
v-for="item in navigation"
|
||||
:to="{name: item.route}"
|
||||
:title="item.title"
|
||||
:class="[{'router-link-active': isSection(item.section)}, item.icon]"
|
||||
class="block mb-1.5"
|
||||
>
|
||||
<div class="button-icon p-3 cursor-pointer inline-block dark:hover:bg-4x-dark-foreground hover:bg-light-300 text-theme rounded-xl">
|
||||
<hard-drive-icon v-if="item.icon === 'home'" size="20" />
|
||||
<settings-icon v-if="item.icon === 'settings'" size="20" />
|
||||
<user-icon v-if="item.icon === 'user'" size="20" />
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Profile'}" :class="{'is-active': isSection('User')}" :title="$t('locations.profile')" class="icon-navigation-item settings">
|
||||
<div class="button-icon">
|
||||
<user-icon size="19" />
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Dashboard'}" :class="{'is-active': isSection('Admin')}" v-if="user.data.attributes.role === 'admin'" :title="$t('locations.settings')" class="icon-navigation-item users">
|
||||
<div class="button-icon">
|
||||
<settings-icon size="19" />
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<a @click="toggleDarkMode" :title="$t('dark_mode_toggle')" class="icon-navigation-item dark-switcher">
|
||||
<div class="button-icon">
|
||||
<sun-icon v-if="isDarkMode" size="19" />
|
||||
<moon-icon v-if="! isDarkMode" size="19" />
|
||||
<!--Toggle Dark/Light mode-->
|
||||
<div @click="toggleDarkMode" :title="$t('dark_mode_toggle')" class="block mt-6">
|
||||
<div class="button-icon p-3 cursor-pointer inline-block dark:hover:bg-4x-dark-foreground hover:bg-light-300 rounded-xl">
|
||||
<sun-icon v-if="isDarkMode" size="20" />
|
||||
<moon-icon v-if="! isDarkMode" size="20" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Logout-->
|
||||
<div class="icon-navigation logout">
|
||||
<div @click="$store.dispatch('logOut')" :title="$t('locations.logout')" class="icon-navigation-item">
|
||||
<div class="button-icon">
|
||||
<power-icon size="19" />
|
||||
</div>
|
||||
</div>
|
||||
<!--Logout-->
|
||||
<div class="mt-auto text-center">
|
||||
<div @click="$store.dispatch('logOut')" :title="$t('locations.logout')" class="button-icon p-3 cursor-pointer inline-block dark:hover:bg-4x-dark-foreground hover:bg-light-300 rounded-xl">
|
||||
<power-icon size="20" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserAvatar from '/resources/js/components/Others/UserAvatar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {
|
||||
MoonIcon,
|
||||
SunIcon,
|
||||
HardDriveIcon,
|
||||
SettingsIcon,
|
||||
Trash2Icon,
|
||||
UserIcon,
|
||||
PowerIcon,
|
||||
ShareIcon,
|
||||
} from 'vue-feather-icons'
|
||||
import MemberAvatar from "../FilesView/MemberAvatar";
|
||||
import {mapGetters} from 'vuex'
|
||||
import {
|
||||
MoonIcon,
|
||||
SunIcon,
|
||||
HardDriveIcon,
|
||||
SettingsIcon,
|
||||
Trash2Icon,
|
||||
UserIcon,
|
||||
PowerIcon,
|
||||
ShareIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'SidebarNavigation',
|
||||
components: {
|
||||
HardDriveIcon,
|
||||
SettingsIcon,
|
||||
UserAvatar,
|
||||
Trash2Icon,
|
||||
PowerIcon,
|
||||
ShareIcon,
|
||||
UserIcon,
|
||||
export default {
|
||||
name: 'SidebarNavigation',
|
||||
components: {
|
||||
HardDriveIcon,
|
||||
SettingsIcon,
|
||||
MemberAvatar,
|
||||
Trash2Icon,
|
||||
PowerIcon,
|
||||
ShareIcon,
|
||||
UserIcon,
|
||||
MoonIcon,
|
||||
SunIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isDarkMode',
|
||||
'user',
|
||||
])
|
||||
},
|
||||
]),
|
||||
navigation() {
|
||||
|
||||
if (this.user.data.attributes.role === 'admin') {
|
||||
return [
|
||||
{
|
||||
route: 'Files',
|
||||
section: 'Platform',
|
||||
title: this.$t('locations.home'),
|
||||
icon: 'home',
|
||||
},
|
||||
{
|
||||
route: 'Profile',
|
||||
section: 'User',
|
||||
title: this.$t('locations.profile'),
|
||||
icon: 'user',
|
||||
},
|
||||
{
|
||||
route: 'Dashboard',
|
||||
section: 'Admin',
|
||||
title: this.$t('locations.settings'),
|
||||
icon: 'settings',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
route: 'Files',
|
||||
section: 'Platform',
|
||||
title: this.$t('locations.home'),
|
||||
icon: 'home',
|
||||
},
|
||||
{
|
||||
route: 'Profile',
|
||||
section: 'User',
|
||||
title: this.$t('locations.profile'),
|
||||
icon: 'settings',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleDarkMode() {
|
||||
this.$store.dispatch('toggleDarkMode', !this.isDarkMode)
|
||||
@@ -84,136 +135,45 @@
|
||||
return this.$route.matched[0].name === section
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('getAppData')
|
||||
}
|
||||
}
|
||||
mounted() {
|
||||
this.$store.dispatch('getAppData')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/resources/sass/vuefilemanager/_variables';
|
||||
@import '/resources/sass/vuefilemanager/_mixins';
|
||||
|
||||
.dark-switcher {
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid darken($light_mode_border, 7%);
|
||||
margin: 20px 15px 0;
|
||||
}
|
||||
.router-link-active {
|
||||
|
||||
.menu-bar {
|
||||
user-select: none;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.icon-navigation {
|
||||
text-align: center;
|
||||
|
||||
&.menu {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
&.logout {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.icon-navigation-item {
|
||||
display: block;
|
||||
|
||||
&.user {
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
@include transition(150ms);
|
||||
|
||||
&:hover {
|
||||
background: darken($light_background, 5%);
|
||||
}
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
}
|
||||
|
||||
.router-link-active,
|
||||
.is-active {
|
||||
|
||||
&.home {
|
||||
.button-icon {
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.trash {
|
||||
.button-icon {
|
||||
background: rgba($red, 0.1);
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.settings {
|
||||
.button-icon {
|
||||
background: rgba($purple, 0.1);
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.users {
|
||||
.button-icon {
|
||||
background: rgba($pink, 0.1);
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
.icon-navigation {
|
||||
|
||||
.icon-navigation-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
.dark-switcher {
|
||||
border-color:lighten($dark_mode_foreground, 2%);
|
||||
&.home .button-icon {
|
||||
path, line, polyline, rect, circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-navigation {
|
||||
&.trash .button-icon {
|
||||
background: rgba($red, 0.1);
|
||||
|
||||
.button-icon {
|
||||
&:hover {
|
||||
background: #22262b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $red;
|
||||
}
|
||||
}
|
||||
|
||||
&.settings .button-icon {
|
||||
background: rgba($purple, 0.1);
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $purple;
|
||||
}
|
||||
}
|
||||
|
||||
&.user .button-icon {
|
||||
background: rgba($pink, 0.1);
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div class="user-headline">
|
||||
<UserAvatar size="large"/>
|
||||
<MemberAvatar
|
||||
class="inline-block"
|
||||
:size="52"
|
||||
:is-border="false"
|
||||
:member="user"
|
||||
/>
|
||||
<div class="user-meta">
|
||||
<b class="name">{{ user.data.relationships.settings.data.attributes.name }}</b>
|
||||
<span class="email text-theme">{{ user.data.attributes.email }}</span>
|
||||
@@ -9,13 +14,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserAvatar from '/resources/js/components/Others/UserAvatar'
|
||||
import MemberAvatar from "../FilesView/MemberAvatar";
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'UserHeadline',
|
||||
components: {
|
||||
UserAvatar,
|
||||
MemberAvatar
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
Reference in New Issue
Block a user