mirror of
https://github.com/knadh/listmonk.git
synced 2025-10-06 05:16:48 +08:00
7b9ba2efbc
* improved mobile navbar/sidebar Sidebar is hidden and all menu items moved to hamburger menu on mobile devices * improvements to menu rendering -removed redundant code -fixed an issue with emitting data to App.vue * Update Navigation.vue fixed linting errors * Add minor refactors to the mobile menu PR. - Fix indentation and line lengths. - Simplify prop definitions in the Navigation component. - Remove redundant computed methods and use prop variables directly in the Navigation compontent. - Simplify menu rendering logic by: removing isSidebar, showLogout and using simpler v-if / else in the parent instead of the Navigation component. * Update App.vue removed orphaned isSideBar Boolean Co-authored-by: Kailash Nadh <kailash@nadh.in>
117 lines
4.5 KiB
Vue
117 lines
4.5 KiB
Vue
<template>
|
|
<b-menu-list>
|
|
<b-menu-item :to="{name: 'dashboard'}" tag="router-link" :active="activeItem.dashboard"
|
|
icon="view-dashboard-variant-outline" :label="$t('menu.dashboard')">
|
|
</b-menu-item><!-- dashboard -->
|
|
|
|
<b-menu-item :expanded="activeGroup.lists" :active="activeGroup.lists" data-cy="lists"
|
|
v-on:update:active="(state) => toggleGroup('lists', state)" icon="format-list-bulleted-square"
|
|
:label="$t('globals.terms.lists')">
|
|
<b-menu-item :to="{name: 'lists'}" tag="router-link" :active="activeItem.lists"
|
|
data-cy="all-lists" icon="format-list-bulleted-square" :label="$t('menu.allLists')">
|
|
</b-menu-item>
|
|
|
|
<b-menu-item :to="{name: 'forms'}" tag="router-link" :active="activeItem.forms"
|
|
class="forms" icon="newspaper-variant-outline" :label="$t('menu.forms')">
|
|
</b-menu-item>
|
|
</b-menu-item><!-- lists -->
|
|
|
|
<b-menu-item :expanded="activeGroup.subscribers" :active="activeGroup.subscribers"
|
|
data-cy="subscribers" v-on:update:active="(state) => toggleGroup('subscribers', state)"
|
|
icon="account-multiple" :label="$t('globals.terms.subscribers')">
|
|
|
|
<b-menu-item :to="{name: 'subscribers'}" tag="router-link"
|
|
:active="activeItem.subscribers" data-cy="all-subscribers" icon="account-multiple"
|
|
:label="$t('menu.allSubscribers')">
|
|
</b-menu-item>
|
|
|
|
<b-menu-item :to="{name: 'import'}" tag="router-link" :active="activeItem.import"
|
|
data-cy="import" icon="file-upload-outline" :label="$t('menu.import')">
|
|
</b-menu-item>
|
|
|
|
<b-menu-item :to="{name: 'bounces'}" tag="router-link" :active="activeItem.bounces"
|
|
data-cy="bounces" icon="email-bounce" :label="$t('globals.terms.bounces')">
|
|
</b-menu-item>
|
|
</b-menu-item><!-- subscribers -->
|
|
|
|
<b-menu-item :expanded="activeGroup.campaigns" :active="activeGroup.campaigns"
|
|
data-cy="campaigns" v-on:update:active="(state) => toggleGroup('campaigns', state)"
|
|
icon="rocket-launch-outline" :label="$t('globals.terms.campaigns')">
|
|
|
|
<b-menu-item :to="{name: 'campaigns'}" tag="router-link" :active="activeItem.campaigns"
|
|
data-cy="all-campaigns" icon="rocket-launch-outline" :label="$t('menu.allCampaigns')">
|
|
</b-menu-item>
|
|
|
|
<b-menu-item :to="{name: 'campaign', params: {id: 'new'}}" tag="router-link"
|
|
:active="activeItem.campaign" data-cy="new-campaign" icon="plus"
|
|
:label="$t('menu.newCampaign')">
|
|
</b-menu-item>
|
|
|
|
<b-menu-item :to="{name: 'media'}" tag="router-link" :active="activeItem.media"
|
|
data-cy="media" icon="image-outline" :label="$t('menu.media')">
|
|
</b-menu-item>
|
|
|
|
<b-menu-item :to="{name: 'templates'}" tag="router-link" :active="activeItem.templates"
|
|
data-cy="templates" icon="file-image-outline" :label="$t('globals.terms.templates')">
|
|
</b-menu-item>
|
|
|
|
<b-menu-item :to="{name: 'campaignAnalytics'}" tag="router-link"
|
|
:active="activeItem.campaignAnalytics" data-cy="analytics" icon="chart-bar"
|
|
:label="$t('globals.terms.analytics')">
|
|
</b-menu-item>
|
|
</b-menu-item><!-- campaigns -->
|
|
|
|
<b-menu-item :expanded="activeGroup.settings" :active="activeGroup.settings"
|
|
data-cy="settings" v-on:update:active="(state) => toggleGroup('settings', state)"
|
|
icon="cog-outline" :label="$t('menu.settings')">
|
|
|
|
<b-menu-item :to="{name: 'settings'}" tag="router-link" :active="activeItem.settings"
|
|
data-cy="all-settings" icon="cog-outline" :label="$t('menu.settings')">
|
|
</b-menu-item>
|
|
|
|
<b-menu-item :to="{name: 'logs'}" tag="router-link" :active="activeItem.logs"
|
|
data-cy="logs" icon="newspaper-variant-outline" :label="$t('menu.logs')">
|
|
</b-menu-item>
|
|
</b-menu-item><!-- settings -->
|
|
|
|
<b-menu-item v-if="isMobile" icon="logout-variant" :label="$t('users.logout')"
|
|
@click.prevent="doLogout">
|
|
</b-menu-item>
|
|
</b-menu-list>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import { uris } from '../constants';
|
|
|
|
export default {
|
|
name: 'navigation',
|
|
|
|
props: {
|
|
activeItem: Object,
|
|
activeGroup: Object,
|
|
isMobile: Boolean,
|
|
},
|
|
|
|
methods: {
|
|
toggleGroup(group, state) {
|
|
this.$emit('toggleGroup', group, state);
|
|
},
|
|
|
|
doLogout() {
|
|
const http = new XMLHttpRequest();
|
|
|
|
const u = uris.root.substr(-1) === '/' ? uris.root : `${uris.root}/`;
|
|
http.open('get', `${u}api/logout`, false, 'logout_non_user', 'logout_non_user');
|
|
http.onload = () => {
|
|
document.location.href = uris.root;
|
|
};
|
|
http.onerror = () => {
|
|
document.location.href = uris.root;
|
|
};
|
|
http.send();
|
|
},
|
|
},
|
|
};
|
|
|
|
</script>
|