Page MenuHomePhorge
Differential D1423 Diff 3775 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="'/images/logo_' + mode + '.png'" :alt="app_name"> <img :src="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-if="!loggedIn">
<a class="nav-link link-explore" href="https://kolabnow.com">Explore</a> <a class="nav-link link-explore" href="https://kolabnow.com">Explore</a>
</li> </li>
<li class="nav-item" v-if="!logged_in"> <li class="nav-item" v-if="!loggedIn">
<a class="nav-link link-blog" href="https://blogs.kolabnow.com">Blog</a> <a class="nav-link link-blog" href="https://blogs.kolabnow.com">Blog</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link link-support" href="https://kolabnow.com/support">Support</a> <a class="nav-link link-support" href="https://kolabnow.com/support">Support</a>
</li> </li>
<li class="nav-item" v-if="logged_in"> <li class="nav-item" v-if="loggedIn">
<a class="nav-link link-contact" href="https://kolabnow.com/contact">Contact</a> <a class="nav-link link-contact" href="https://kolabnow.com/contact">Contact</a>
</li> </li>
<li class="nav-item" v-if="!logged_in && mode == 'footer'"> <li class="nav-item" v-if="!loggedIn && mode == 'footer'">
<a class="nav-link link-tos" href="https://kolabnow.com/tos">ToS</a> <a class="nav-link link-tos" href="https://kolabnow.com/tos">ToS</a>
</li> </li>
<li class="nav-item" v-if="logged_in"> <li class="nav-item" v-if="loggedIn">
<a class="nav-link menulogin link-webmail" href="https://kolabnow.com/apps" target="_blank">Webmail</a> <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 && route == 'login'">
<a class="nav-link menulogin link-webmail" href="https://kolabnow.com/apps" target="_blank">Webmail</a> <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 && (!route || route == 'signup')"> <li class="nav-item" v-if="!loggedIn && (!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') })
} }
} }
} }
</script> </script>