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

v1.5-alpha.1

Browse Source
This commit is contained in:
carodej
2020-05-15 17:31:25 +02:00
parent cfecf542ca
commit 41656235fc
97 changed files with 4108 additions and 2118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
resources/js/components/Sidebar/MenuBar.vue Normal file
View File

@@ -0,0 +1,216 @@
<template>
<nav class="menu-bar" v-if="app">
<!--Navigation Icons-->
<div class="icon-navigation menu">
<router-link :to="{name: 'Profile'}" class="icon-navigation-item user">
<UserAvatar />
</router-link>
<router-link :to="{name: 'Files'}" :title="$t('locations.home')" class="icon-navigation-item home">
<div class="button-icon">
<hard-drive-icon size="19"></hard-drive-icon>
</div>
</router-link>
<router-link :to="{name: 'SharedFiles'}" :title="$t('locations.shared')" class="icon-navigation-item shared">
<div class="button-icon">
<share-icon size="19"></share-icon>
</div>
</router-link>
<router-link :to="{name: 'Trash'}" :title="$t('locations.trash')" class="icon-navigation-item trash">
<div class="button-icon">
<trash-2-icon size="19"></trash-2-icon>
</div>
</router-link>
<router-link :to="{name: 'Profile'}" :class="{'is-active': $isThisRoute($route, ['Password'])}" class="icon-navigation-item settings">
<div class="button-icon">
<settings-icon size="19"></settings-icon>
</div>
</router-link>
</div>
<!--User avatar & Logout-->
<ul class="icon-navigation logout">
<li @click="$store.dispatch('logOut')" class="icon-navigation-item">
<div class="button-icon">
<power-icon size="19"></power-icon>
</div>
</li>
</ul>
</nav>
</template>
<script>
import UserAvatar from '@/components/Others/UserAvatar'
import {mapGetters} from 'vuex'
import {
HardDriveIcon,
SettingsIcon,
Trash2Icon,
PowerIcon,
ShareIcon,
} from 'vue-feather-icons'
export default {
name: 'MenuBar',
components: {
HardDriveIcon,
SettingsIcon,
UserAvatar,
Trash2Icon,
PowerIcon,
ShareIcon,
},
computed: {
...mapGetters(['app']),
},
mounted() {
this.$store.dispatch('getAppData')
}
}
</script>
<style scoped lang="scss">
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.menu-bar {
background: linear-gradient(180deg, rgba(246, 245, 241, 0.8) 0%, rgba(243, 244, 246, 0.8) 100%);
user-select: none;
padding-top: 25px;
display: grid;
width: 72px;
}
.icon-navigation {
text-align: center;
&.menu {
margin-bottom: auto;
}
&.logout {
margin-top: auto;
}
.icon-navigation-item {
display: block;
margin-bottom: 10px;
&.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);
stroke: black;
}
}
.router-link-active,
.is-active {
&.home {
.button-icon {
background: rgba($theme, 0.1);
path, line, polyline, rect, circle {
stroke: $theme;
}
}
}
&.shared {
.button-icon {
background: rgba($yellow, 0.1);
path, line, polyline, rect, circle {
stroke: $yellow;
}
}
}
&.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;
}
}
}
}
}
@media only screen and (max-width: 1024px) {
.menu-bar {
width: 60px;
}
.icon-navigation {
.icon-navigation-item {
margin-bottom: 15px;
}
.button-icon {
padding: 8px;
}
}
}
@media only screen and (max-width: 690px) {
.menu-bar {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.icon-navigation {
.button-icon {
&:hover {
background: $dark_mode_background;
}
path, line, polyline, rect, circle {
stroke: $dark_mode_text_primary;
}
}
}
.menu-bar {
background: $dark_mode_foreground;
}
}
</style>