jcloude/dashboard/src/components/NavigationItems.vue

<template>
	<div>
		<slot :navigation="navigation" />
	</div>
</template>
<script>
import { h } from 'vue';
import DoorOpen from '~icons/lucide/door-open';
import PanelTopInactive from '~icons/lucide/panel-top-inactive';
import Package from '~icons/lucide/package';
import Boxes from '~icons/lucide/boxes';
import Server from '~icons/lucide/server';
import WalletCards from '~icons/lucide/wallet-cards';
import Key from '~icons/lucide/key';
import Settings from '~icons/lucide/settings';
import App from '~icons/lucide/layout-grid';
import DatabaseZap from '~icons/lucide/database-zap';
import Activity from '~icons/lucide/activity';
import Logs from '~icons/lucide/scroll-text';
import Globe from '~icons/lucide/globe';
import Shield from '~icons/lucide/shield';
import Notification from '~icons/lucide/inbox';
import Code from '~icons/lucide/code';
import Archive from '~icons/lucide/archive';
import Camera from '~icons/lucide/camera';
import FileSearch from '~icons/lucide/file-search';
import { unreadNotificationsCount } from '../data/notifications';

export default {
	name: 'NavigationItems',
	computed: {
		navigation() {
			if (!this.$team?.pg) return [];

			const routeName = this.$route?.name || '';
			const onboardingComplete = this.$team.pg.onboarding.complete;
			const isSaasUser = this.$team.pg.is_saas_user;
			const enforce2FA = Boolean(
				!this.$team.pg.is_desk_user &&
					this.$team.pg.enforce_2fa &&
					!this.$team.pg.user_info?.is_2fa_enabled,
			);

			return [
				{
					name: 'Welcome',
					icon: () => h(DoorOpen),
					route: '/welcome',
					isActive: routeName === 'Welcome',
					condition: !onboardingComplete,
				},
				{
					name: 'Notifications',
					icon: () => h(Notification),
					route: '/notifications',
					isActive: routeName === 'Press Notification List',
					condition: onboardingComplete && !isSaasUser,
					badge: () => {
						if (unreadNotificationsCount.data > 0) {
							return h(
								'span',
								{
									class: '!ml-auto px-1.5 py-0.5 text-xs text-gray-600',
								},
								unreadNotificationsCount.data > 99
									? '99+'
									: unreadNotificationsCount.data,
							);
						}
					},
					disabled: enforce2FA,
				},
				{
					name: 'Sites',
					icon: () => h(PanelTopInactive),
					route: '/sites',
					isActive:
						['Site List', 'Site Detail', 'New Site'].includes(routeName) ||
						routeName.startsWith('Site Detail'),
					disabled: enforce2FA,
				},
				{
					name: 'Benches',
					icon: () => h(Package),
					route: '/benches',
					isActive: routeName.startsWith('Bench'),
					condition: this.$team.pg?.is_desk_user,
					disabled: !onboardingComplete || enforce2FA,
				},
				{
					name: 'Bench Groups',
					icon: () => h(Boxes),
					route: onboardingComplete ? '/groups' : '/enable-bench-groups',
					isActive:
						[
							'Release Group List',
							'Release Group Detail',
							'New Release Group',
							'Release Group New Site',
							'Deploy Candidate',
						].includes(routeName) ||
						routeName.startsWith('Release Group Detail') ||
						routeName === 'Enable Bench Groups',
					disabled: enforce2FA,
				},
				{
					name: 'Servers',
					icon: () => h(Server),
					route: onboardingComplete ? '/servers' : '/enable-servers',
					isActive:
						['New Server'].includes(routeName) ||
						routeName.startsWith('Server') ||
						routeName === 'Enable Servers',
					disabled: enforce2FA,
				},
				{
					name: 'Backups',
					icon: () => h(Archive),
					route: '/backups',
					condition: onboardingComplete && !isSaasUser,
					disabled: enforce2FA,
					children: [
						{
							name: 'Site Backups',
							icon: () => h(PanelTopInactive),
							route: '/backups/sites',
							isActive: routeName === 'Site Backups',
						},
						{
							name: 'Snapshots',
							icon: () => h(Camera),
							route: '/backups/snapshots',
							isActive: routeName === 'Snapshots',
						},
					].filter((item) => item.condition ?? true),
					isActive: ['Site Backups', 'Snapshots'].includes(routeName),
					disabled: enforce2FA,
				},
				{
					name: 'Dev Tools',
					icon: () => h(Code),
					route: '/devtools',
					condition: onboardingComplete && !isSaasUser,
					disabled: enforce2FA,
					children: [
						{
							name: 'Log Browser',
							icon: () => h(Logs),
							route: '/log-browser',
							isActive: routeName === 'Log Browser',
						},
						{
							name: 'DB Analyzer',
							icon: () => h(Activity),
							route: '/database-analyzer',
							isActive: routeName === 'DB Analyzer',
						},
						{
							name: 'SQL Playground',
							icon: () => h(DatabaseZap),
							route: '/sql-playground',
							isActive: routeName === 'SQL Playground',
						},
						{
							name: 'Binlog Browser',
							icon: () => h(FileSearch),
							route: '/binlog-browser',
							isActive: routeName === 'Binlog Browser',
							condition: this.$team.pg.is_binlog_indexer_enabled ?? false,
						},
					].filter((item) => item.condition ?? true),
					isActive: [
						'SQL Playground',
						'DB Analyzer',
						'Log Browser',
						'Binlog Browser',
					].includes(routeName),
					disabled: enforce2FA,
				},
				{
					name: 'Marketplace',
					icon: () => h(App),
					route: '/apps',
					isActive: routeName.startsWith('Marketplace'),
					condition:
						this.$team.pg?.is_desk_user ||
						(!!this.$team.pg.is_developer && this.$session.hasAppsAccess),
					disabled: enforce2FA,
				},
				{
					name: 'Billing',
					icon: () => h(WalletCards),
					route: '/billing',
					isActive: routeName.startsWith('Billing'),
					condition:
						this.$team.pg?.is_desk_user || this.$session.hasBillingAccess,
					disabled: enforce2FA,
				},
				{
					name: 'Access Requests',
					icon: () => h(Key),
					route: '/access-requests',
					isActive: routeName === 'Access Requests',
					disabled: enforce2FA,
				},
				{
					name: 'Partnership',
					icon: () => h(Globe),
					route: '/partners',
					isActive: routeName === 'Partnership',
					condition: Boolean(this.$team.pg.erpnext_partner),
					disabled: enforce2FA,
				},
				{
					name: 'Settings',
					icon: () => h(Settings),
					route: '/settings',
					isActive: routeName.startsWith('Settings'),
					disabled: enforce2FA,
				},
				{
					name: 'Partner Admin',
					icon: () => h(Shield),
					route: '/partner-admin',
					isActive: routeName === 'Partner Admin',
					condition: Boolean(this.$team.pg.is_desk_user),
				},
			].filter((item) => item.condition ?? true);
		},
	},
	mounted() {
		this.$socket.emit('doctype_subscribe', 'Press Notification');
		this.$socket.on('press_notification', (data) => {
			if (data.team === this.$team.pg.name) {
				unreadNotificationsCount.setData((data) => data + 1);
			}
		});
	},
	unmounted() {
		this.$socket.off('press_notification');
	},
};
</script>