Page MenuHomePhorge
Differential D1423 Diff 4858 src/resources/vue/Widgets/Menu.vue

Changeset View

Standalone View

View Options

src/resources/vue/Widgets/Menu.vue

<template> <template>
<nav :id="mode + '-menu'" class="navbar navbar-expand-lg navbar-light"> <nav :id="mode + '-menu'" class="navbar navbar-expand-lg navbar-light">
<div class="container"> <div class="container">
<router-link class="navbar-brand" :to="{ name: 'dashboard' }"> <router-link class="navbar-brand" :to="{ name: 'dashboard' }">
<img :src="app_url + '/images/logo_' + mode + '.png'" :alt="app_name"> <img :src="appUrl + themeDir + '/images/logo_' + mode + '.png'" :alt="appName">
</router-link> </router-link>
<button v-if="mode == 'header'" class="navbar-toggler" type="button" <button v-if="mode == 'header'" class="navbar-toggler" type="button"
data-toggle="collapse" :data-target="'#' + mode + '-menu-navbar'" data-toggle="collapse" :data-target="'#' + mode + '-menu-navbar'"
aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"
> >
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div :id="mode + '-menu-navbar'" :class="'navbar' + (mode == 'header' ? ' collapse navbar-collapse' : '')"> <div :id="mode + '-menu-navbar'" :class="'navbar' + (mode == 'header' ? ' collapse navbar-collapse' : '')">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item" v-if="!logged_in"> <li class="nav-item" v-if="!loggedIn">
<router-link v-if="!$root.isAdmin" class="nav-link link-signup" active-class="active" :to="{name: 'signup'}">Signup</router-link> <router-link v-if="!$root.isAdmin" class="nav-link link-signup" active-class="active" :to="{name: 'signup'}">Signup</router-link>
<a v-else class="nav-link link-signup" :href="app_url + '/signup'">Signup</a> <a v-else class="nav-link link-signup" :href="appUrl + '/signup'">Signup</a>
</li> </li>
<li class="nav-item" v-if="!logged_in"> <li class="nav-item" v-for="item in menu()" :key="item.index">
<a class="nav-link link-explore" href="https://kolabnow.com">Explore</a> <a v-if="item.href" :class="'nav-link link-' + item.index" :href="item.href">{{ item.title }}</a>
</li> <router-link v-if="item.to"
<li class="nav-item" v-if="!logged_in"> :class="'nav-link link-' + item.index"
<a class="nav-link link-blog" href="https://blogs.kolabnow.com">Blog</a> active-class="active"
</li> :to="item.to"
<li class="nav-item"> :exact="item.exact"
<a class="nav-link link-support" href="https://kolabnow.com/support">Support</a> >
</li> {{ item.title }}
<li class="nav-item" v-if="logged_in"> </router-link>
<a class="nav-link link-contact" href="https://kolabnow.com/contact">Contact</a>
</li>
<li class="nav-item" v-if="!logged_in && mode == 'footer'">
<a class="nav-link link-tos" href="https://kolabnow.com/tos">ToS</a>
</li>
<li class="nav-item" v-if="logged_in">
<a class="nav-link menulogin link-webmail" href="https://kolabnow.com/apps" target="_blank">Webmail</a>
</li> </li>
<li class="nav-item" v-if="logged_in"> <li class="nav-item" v-if="loggedIn">
<router-link class="nav-link menulogin link-logout" active-class="active" :to="{name: 'logout'}">Logout</router-link> <router-link class="nav-link menulogin link-logout" active-class="active" :to="{name: 'logout'}">Logout</router-link>
</li> </li>
<li class="nav-item" v-if="!logged_in && route == 'login'"> <li class="nav-item" v-if="!loggedIn">
<a class="nav-link menulogin link-webmail" href="https://kolabnow.com/apps" target="_blank">Webmail</a>
</li>
<li class="nav-item" v-if="!logged_in && (!route || route == 'signup')">
<router-link class="nav-link menulogin link-login" active-class="active" :to="{name: 'login'}">Login</router-link> <router-link class="nav-link menulogin link-login" active-class="active" :to="{name: 'login'}">Login</router-link>
</li> </li>
</ul> </ul>
<div v-if="mode == 'footer'" class="footer"> <div v-if="mode == 'footer'" class="footer">
<div id="footer-copyright">@ Apheleia IT AG, 2020</div> <div id="footer-copyright">@ Apheleia IT AG, 2020</div>
<div v-if="footer" id="footer-company">{{ footer }}</div> <div v-if="footer" id="footer-company">{{ footer }}</div>
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
mode: { type: String, default: 'header' }, mode: { type: String, default: 'header' },
footer: { type: String, default: '' } footer: { type: String, default: '' }
}, },
data() { data() {
return { return {
app_name: window.config['app.name'], appName: window.config['app.name'],
app_url: window.config['app.url'], appUrl: window.config['app.url'],
themeDir: '/themes/' + window.config['app.theme']
} }
}, },
computed: { computed: {
logged_in() { return this.$store.state.isLoggedIn }, loggedIn() { return this.$store.state.isLoggedIn },
route() { return this.$route.name } route() { return this.$route.name }
}, },
mounted() { mounted() {
// On mobile close the menu when the menu item is clicked // On mobile close the menu when the menu item is clicked
if (this.mode == 'header') { if (this.mode == 'header') {
$('#header-menu .navbar').on('click', function() { $(this).removeClass('show') }) $('#header-menu .navbar').on('click', function() { $(this).removeClass('show') })
} }
},
methods: {
menu() {
let menu = []
const loggedIn = this.loggedIn
window.config.menu.forEach(item => {
if (!item.location || !item.title) {
console.error("Invalid menu entry", item)
return
}
// TODO: Different menu for different loggedIn state
// TODO: Different menu for admin UI
if (!item.footer || this.mode == 'footer') {
if (item.location.match(/^https?:/)) {
item.href = item.location
} else {
item.to = { path: item.location }
}
item.exact = item.location == '/'
item.index = item.page || item.title.toLowerCase().replace(/\s+/g, '')
menu.push(item)
}
})
return menu
}
} }
} }
</script> </script>