feat: add new sidebar with mdi icons and active reactivity
This commit is contained in:
Zephyrrus
parent
1a8b6602e0
commit
1526637881
|
|
@ -72,6 +72,10 @@ export default {
|
|||
],
|
||||
css: [],
|
||||
modules: ['@nuxtjs/axios', 'cookie-universal-nuxt'],
|
||||
router: {
|
||||
linkActiveClass: 'is-active',
|
||||
linkExactActiveClass: 'is-active',
|
||||
},
|
||||
axios: {
|
||||
baseURL: `${process.env.DOMAIN}${process.env.ROUTE_PREFIX}`,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -55,6 +55,17 @@ $loading-background: rgba(0, 0, 0, 0.8);
|
|||
$loading-background: rgba(40, 40, 40, 0.66);
|
||||
|
||||
// dialogs
|
||||
$modal-card-title-color: $textColor;
|
||||
$modal-card-body-background-color: $background;
|
||||
$modal-card-head-background-color: $backgroundAccent;
|
||||
$modal-card-head-border-bottom: 1px solid rgba(255, 255, 255, 0.1098);
|
||||
$modal-card-foot-border-top: 1px solid rgba(255, 255, 255, 0.1098);
|
||||
|
||||
// sidebar
|
||||
$sidebar-background: $base-1;
|
||||
$sidebar-box-shadow: none;
|
||||
|
||||
//
|
||||
$menu-item-color: $textColor;
|
||||
$menu-item-hover-color: $textColorHighlight;
|
||||
$menu-item-active-background-color: $backgroundAccent;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ $size-normal: 1rem;
|
|||
@import '../../../node_modules/bulma/bulma.sass';
|
||||
@import '../../../node_modules/buefy/src/scss/buefy.scss';
|
||||
|
||||
@import '@mdi/font/css/materialdesignicons.css';
|
||||
|
||||
html {
|
||||
// font-size: 100%;
|
||||
font-size: 14px;
|
||||
|
|
@ -336,3 +338,9 @@ table.table {
|
|||
.pagination a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// fix control icons
|
||||
.control.has-icons-left .icon, .control.has-icons-right .icon {
|
||||
height: 3rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<b-navbar :class="{ isWhite }"
|
||||
<b-navbar
|
||||
:class="{ isWhite }"
|
||||
transparent>
|
||||
<template slot="end">
|
||||
<b-navbar-item tag="div">
|
||||
|
|
@ -71,24 +72,25 @@ export default {
|
|||
props: {
|
||||
isWhite: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return { hamburger: false };
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
|
||||
...mapState(['config'])
|
||||
...mapState(['config']),
|
||||
},
|
||||
methods: {
|
||||
async logOut() {
|
||||
await this.$store.dispatch('auth/logout');
|
||||
this.$router.replace('/login');
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~/assets/styles/_colors.scss';
|
||||
nav.navbar {
|
||||
|
|
|
|||
|
|
@ -1,63 +1,80 @@
|
|||
<template>
|
||||
<div class="dashboard-menu">
|
||||
<router-link to="/dashboard">
|
||||
<i class="icon-com-pictures" />Files
|
||||
</router-link>
|
||||
<router-link to="/dashboard/albums">
|
||||
<i class="icon-interface-window" />Albums
|
||||
</router-link>
|
||||
<router-link to="/dashboard/tags">
|
||||
<i class="icon-ecommerce-tag-c" />Tags
|
||||
</router-link>
|
||||
<router-link to="/dashboard/account">
|
||||
<i class="icon-user-alt" />Account
|
||||
</router-link>
|
||||
<template v-if="user && user.isAdmin">
|
||||
<router-link to="/dashboard/admin/users">
|
||||
<i class="icon-setting-gear-a" />Users
|
||||
</router-link>
|
||||
<!--
|
||||
TODO: Dont wanna deal with this now
|
||||
<router-link to="/dashboard/admin/settings">
|
||||
<i class="icon-setting-gear-a" />Settings
|
||||
</router-link>
|
||||
-->
|
||||
</template>
|
||||
</div>
|
||||
<b-menu class="dashboard-menu">
|
||||
<b-menu-list label="Menu">
|
||||
<b-menu-item
|
||||
class="item"
|
||||
icon="information-outline"
|
||||
label="Dashboard"
|
||||
tag="nuxt-link"
|
||||
to="/dashboard"
|
||||
exact />
|
||||
<b-menu-item
|
||||
class="item"
|
||||
icon="image-multiple-outline"
|
||||
label="Albums"
|
||||
tag="nuxt-link"
|
||||
to="/dashboard/albums"
|
||||
exact />
|
||||
<b-menu-item
|
||||
class="item"
|
||||
icon="tag-outline"
|
||||
label="Tags"
|
||||
tag="nuxt-link"
|
||||
to="/dashboard/tags"
|
||||
exact />
|
||||
<b-menu-item icon="settings" expanded>
|
||||
<template slot="label" slot-scope="props">
|
||||
Administration
|
||||
<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'" />
|
||||
</template>
|
||||
<b-menu-item icon="account" label="Users" tag="nuxt-link" to="/dashboard/admin/users" exact />
|
||||
<b-menu-item icon="cog-outline" label="Settings" disabled />
|
||||
</b-menu-item>
|
||||
<b-menu-item
|
||||
class="item"
|
||||
icon="account-cog-outline"
|
||||
label="My account"
|
||||
tag="nuxt-link"
|
||||
to="/dashboard/account"
|
||||
exact />
|
||||
</b-menu-list>
|
||||
<b-menu-list label="Actions">
|
||||
<b-menu-item icon="exit-to-app" label="Logout" tag="nuxt-link" to="/logout" exact />
|
||||
</b-menu-list>
|
||||
</b-menu>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
computed: mapState({
|
||||
user: state => state.auth.user
|
||||
})
|
||||
user: (state) => state.auth.user,
|
||||
}),
|
||||
methods: {
|
||||
isRouteActive(id) {
|
||||
if (this.$route.path.includes(id)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '~/assets/styles/_colors.scss';
|
||||
.dashboard-menu {
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
::v-deep a:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
color: $textColor;
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
height: 35px;
|
||||
&:hover{
|
||||
color: white;
|
||||
}
|
||||
::v-deep .icon {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
font-size: 1.5em;
|
||||
top: -4px;
|
||||
left: 5px;
|
||||
}
|
||||
::v-deep .icon.is-pulled-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
hr { margin-top: 0.6em; }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<script>
|
||||
export default {
|
||||
async created() {
|
||||
await this.$store.dispatch('auth/logout');
|
||||
this.$router.replace('/login');
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -9,6 +9,7 @@ export const state = getDefaultState;
|
|||
export const getters = {
|
||||
isLoggedIn: (state) => state.loggedIn,
|
||||
getApiKey: (state) => state.user?.apiKey,
|
||||
getToken: (state) => state.token,
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
|
|
|
|||
Loading…
Reference in New Issue