Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/Menu.vue
- This file was moved from src/resources/vue/Menu.vue.
<template> | <template> | ||||
<nav id="primary-menu" class="navbar navbar-expand-lg navbar-light fixed-top"> | <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_header.png" :alt="app_name"> | <img :src="'/images/logo_' + mode + '.png'" :alt="app_name"> | ||||
</router-link> | </router-link> | ||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> | <button v-if="mode == 'header'" class="navbar-toggler" type="button" | ||||
data-toggle="collapse" :data-target="'#' + mode + '-menu-navbar'" | |||||
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="navbar" class="collapse navbar-collapse justify-content-end"> | <div :id="mode + '-menu-navbar'" class="navbar 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="!logged_in"> | ||||
<router-link 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> | |||||
</li> | </li> | ||||
<li class="nav-item" v-if="!logged_in"> | <li class="nav-item" v-if="!logged_in"> | ||||
<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="!logged_in"> | ||||
<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="logged_in"> | ||||
<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'"> | |||||
<a class="nav-link link-tos" href="https://kolabnow.com/tos">ToS</a> | |||||
</li> | |||||
<li class="nav-item" v-if="logged_in"> | <li class="nav-item" v-if="logged_in"> | ||||
<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="logged_in"> | ||||
<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="!logged_in && 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="!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> | </div> | ||||
</div> | </div> | ||||
</nav> | </nav> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
export default { | export default { | ||||
props: { | |||||
mode: { type: String, default: 'header' } | |||||
}, | |||||
data() { | data() { | ||||
return { | return { | ||||
app_name: window.config['app.name'], | app_name: window.config['app.name'], | ||||
app_url: window.config['app.url'], | app_url: window.config['app.url'], | ||||
} | } | ||||
}, | }, | ||||
computed: { | computed: { | ||||
logged_in() { return this.$store.state.isLoggedIn }, | logged_in() { 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 | ||||
$('#navbar').on('click', function() { $(this).removeClass('show') }) | if (this.mode == 'header') { | ||||
$('#header-menu .navbar').on('click', function() { $(this).removeClass('show') }) | |||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> |