nixpanelandClaude Sonnet 5
6d502604d7
Analytics, White Label, remote site switcher are paid) - New License class is the single gate every paid feature checks — today it's a placeholder (any non-empty license_key counts as active) since there's no license server yet, but every gated feature already funnels through it so swapping in real remote validation later won't touch anything else. - Role Editor, Activity Log, and Database Explorer stay registered/ capability-checked as before, but render an UpgradeNotice screen instead of the real feature when unlicensed (and skip loading the real JS bundle/REST data). Menu Creator, Admin Notices, Comments, and Plugins stay free. - Analytics' tracking hooks and REST endpoint, and White Label's favicon/rename/text-replace hooks, simply don't register without a license. Settings fields for both stay visible/editable either way. - Remote site switcher gated alongside its existing capability check. - Sidebar shows a small lock badge on locked Aurora nav items; the Dashboard's Analytics tab shows the same upgrade prompt when locked. - Fixed an unrelated bug surfaced while testing Role Editor: RolesData's REST callback called get_editable_roles() without loading wp-admin/includes/user.php first, which REST requests don't get for free (only real wp-admin page loads do) — 500'd every time. Co-Authored-By: Claude Sonnet 5 <[email protected]>
447 lines
12 KiB
Vue
447 lines
12 KiB
Vue
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
import UserMenu from './UserMenu.vue';
|
||
|
||
const props = defineProps({
|
||
menu: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
currentUrl: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
logo: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
darkLogo: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
collapsed: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
auroraNav: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
serverData: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
// Custom logo from Settings > General. Every theme preset is a dark-toned
|
||
// palette now (no separate light mode), so the dark-variant logo is always
|
||
// preferred when set; falls back to the standard logo, or the "Aurora"
|
||
// wordmark if neither is set.
|
||
const activeLogo = computed(() => props.darkLogo || props.logo);
|
||
|
||
// Normalize any admin URL down to the part after /wp-admin/ so we can
|
||
// compare the current page against menu targets regardless of host/scheme.
|
||
const normalize = (url) => {
|
||
if (!url) return '';
|
||
const idx = url.indexOf('/wp-admin/');
|
||
const path = idx === -1 ? url : url.slice(idx + '/wp-admin/'.length);
|
||
// The bare admin root ("/wp-admin/" with nothing after it) IS the
|
||
// dashboard, same as an explicit index.php — normalize them to one form
|
||
// so the Dashboard section correctly reads as active/expanded there.
|
||
return path === '' || path.startsWith('?') ? 'index.php' + path : path;
|
||
};
|
||
|
||
const current = computed(() => normalize(props.currentUrl));
|
||
|
||
const isItemActive = (item) => {
|
||
if (!item.url) return false;
|
||
return normalize(item.url) === current.value;
|
||
};
|
||
|
||
const isSectionActive = (item) => {
|
||
if (isItemActive(item)) return true;
|
||
return (item.submenu || []).some((sub) => normalize(sub.url) === current.value);
|
||
};
|
||
|
||
// Accordion: only one section's submenu open at a time, so expanding one
|
||
// closes the rest instead of the list growing indefinitely. Starts on
|
||
// whichever section is active (each nav is a full page load in this
|
||
// multi-page admin, so there's no need to react to URL changes afterward).
|
||
const openId = ref(props.menu.find((item) => isSectionActive(item))?.id ?? null);
|
||
|
||
const isExpanded = (item) => openId.value === item.id;
|
||
|
||
const toggle = (item) => {
|
||
openId.value = openId.value === item.id ? null : item.id;
|
||
};
|
||
|
||
// Aurora's own branded nav section (Settings, Menu Creator, Admin Notices,
|
||
// Role Editor, Activity Log, Database Explorer) — separate from the
|
||
// WP-native menu list above it. Expanded by default; per-browser preference
|
||
// kept in localStorage, same pattern as the main collapsed-menu state.
|
||
const auroraExpanded = ref(localStorage.getItem('aurora-nav-expanded') !== '0');
|
||
const toggleAuroraNav = () => {
|
||
auroraExpanded.value = !auroraExpanded.value;
|
||
localStorage.setItem('aurora-nav-expanded', auroraExpanded.value ? '1' : '0');
|
||
};
|
||
const isAuroraActive = (item) => normalize(item.url) === current.value;
|
||
</script>
|
||
|
||
<template>
|
||
<nav class="sidebar" :class="{ 'sidebar--collapsed': collapsed }">
|
||
<div class="sidebar__scroll">
|
||
<div class="sidebar__brand">
|
||
<img v-if="activeLogo" :src="activeLogo" alt="" class="sidebar__brand-img" />
|
||
<template v-else>{{ collapsed ? 'A' : 'Aurora' }}</template>
|
||
</div>
|
||
|
||
<ul class="sidebar__list">
|
||
<template v-for="(item, index) in menu" :key="item.id || index">
|
||
<li v-if="item.separator" class="sidebar__separator" />
|
||
|
||
<li v-else class="sidebar__item">
|
||
<div
|
||
class="sidebar__row"
|
||
:class="{ 'sidebar__row--active': isSectionActive(item) }"
|
||
>
|
||
<a :href="item.url" class="sidebar__link" :title="collapsed ? item.title : null">
|
||
<span class="sidebar__icon">
|
||
<span
|
||
v-if="item.icon && item.icon.type === 'dashicon'"
|
||
class="dashicons"
|
||
:class="item.icon.value"
|
||
/>
|
||
<img
|
||
v-else-if="item.icon && item.icon.type === 'image'"
|
||
:src="item.icon.value"
|
||
alt=""
|
||
class="sidebar__icon-img"
|
||
/>
|
||
<span v-else class="sidebar__icon-dot" />
|
||
</span>
|
||
<span class="sidebar__title">{{ item.title }}</span>
|
||
<span v-if="item.count" class="sidebar__count">{{ item.count }}</span>
|
||
</a>
|
||
<button
|
||
v-if="item.submenu && item.submenu.length"
|
||
type="button"
|
||
class="sidebar__chevron"
|
||
:class="{ 'sidebar__chevron--open': isExpanded(item) }"
|
||
:aria-label="`Toggle ${item.title} submenu`"
|
||
@click="toggle(item)"
|
||
>
|
||
›
|
||
</button>
|
||
</div>
|
||
|
||
<ul
|
||
v-if="item.submenu && item.submenu.length && isExpanded(item)"
|
||
class="sidebar__sublist"
|
||
>
|
||
<li
|
||
v-for="(sub, subIndex) in item.submenu"
|
||
:key="sub.id || subIndex"
|
||
class="sidebar__subitem"
|
||
>
|
||
<a
|
||
:href="sub.url"
|
||
class="sidebar__sublink"
|
||
:class="{ 'sidebar__sublink--active': normalize(sub.url) === current }"
|
||
>
|
||
{{ sub.title }}
|
||
<span v-if="sub.count" class="sidebar__count">{{ sub.count }}</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</template>
|
||
</ul>
|
||
|
||
<div v-if="auroraNav.length" class="sidebar__separator" />
|
||
|
||
<div v-if="auroraNav.length" class="sidebar__aurora">
|
||
<div class="sidebar__row sidebar__aurora-brand" @click="toggleAuroraNav">
|
||
<a href="#" class="sidebar__link" @click.prevent :title="collapsed ? 'Aurora' : null">
|
||
<span class="sidebar__icon">
|
||
<span class="dashicons dashicons-superhero-alt" />
|
||
</span>
|
||
<span class="sidebar__title">Aurora</span>
|
||
</a>
|
||
<button
|
||
type="button"
|
||
class="sidebar__chevron"
|
||
:class="{ 'sidebar__chevron--open': auroraExpanded }"
|
||
aria-label="Toggle Aurora menu"
|
||
>
|
||
›
|
||
</button>
|
||
</div>
|
||
|
||
<ul v-if="auroraExpanded" class="sidebar__sublist">
|
||
<li v-for="item in auroraNav" :key="item.id" class="sidebar__subitem">
|
||
<a
|
||
:href="item.url"
|
||
class="sidebar__sublink"
|
||
:class="{ 'sidebar__sublink--active': isAuroraActive(item) }"
|
||
>
|
||
{{ item.title }}
|
||
<span v-if="item.locked" class="sidebar__pro-badge" title="Pro feature">
|
||
<span class="dashicons dashicons-lock" />
|
||
</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<UserMenu
|
||
:server-data="serverData"
|
||
:collapsed="collapsed"
|
||
/>
|
||
</nav>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.sidebar {
|
||
position: fixed;
|
||
top: var(--aurora-sidebar-gap);
|
||
left: var(--aurora-sidebar-gap);
|
||
bottom: var(--aurora-sidebar-gap);
|
||
width: var(--aurora-sidebar-w);
|
||
height: auto;
|
||
/* Same surface treatment as the dashboard cards (AuroraCard.vue) —
|
||
solid card background + rounded corners, floating over the page
|
||
gradient with a gap on every side now that it's inset instead of
|
||
flush against the viewport edges. */
|
||
background: var(--aurora-card-bg);
|
||
border: 1px solid var(--aurora-card-border);
|
||
border-radius: 20px;
|
||
transition: width 0.2s ease;
|
||
z-index: 99999;
|
||
box-sizing: border-box;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Scrollable nav content — separate from the pinned UserMenu footer below
|
||
it, so the account card stays visible regardless of scroll position. */
|
||
.sidebar__scroll {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
padding: 12px 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.sidebar__brand {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
color: var(--aurora-text);
|
||
padding: 8px 20px 16px;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.sidebar__brand-img {
|
||
display: block;
|
||
max-height: 30px;
|
||
max-width: 190px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.sidebar__list,
|
||
.sidebar__sublist {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.sidebar__separator {
|
||
height: 1px;
|
||
background: var(--aurora-border);
|
||
margin: 8px 16px;
|
||
}
|
||
|
||
.sidebar__row {
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 8px;
|
||
margin: 0 8px;
|
||
}
|
||
|
||
.sidebar__row--active {
|
||
background: var(--aurora-accent-soft);
|
||
}
|
||
|
||
.sidebar__link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex: 1;
|
||
padding: 2px 10px;
|
||
text-decoration: none;
|
||
color: var(--aurora-text);
|
||
font-size: 0.875rem;
|
||
min-width: 0;
|
||
}
|
||
|
||
.sidebar__row--active .sidebar__link {
|
||
color: var(--aurora-accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.sidebar__icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
flex-shrink: 0;
|
||
border-radius: 8px;
|
||
background: var(--aurora-bg-subtle);
|
||
color: var(--aurora-text-muted);
|
||
transition: background 0.12s ease, color 0.12s ease;
|
||
}
|
||
|
||
.sidebar__row--active .sidebar__icon {
|
||
background: var(--aurora-accent-soft);
|
||
color: var(--aurora-accent);
|
||
}
|
||
|
||
.sidebar__icon .dashicons {
|
||
font-size: 16px;
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.sidebar__icon-img {
|
||
width: 16px;
|
||
height: 16px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.sidebar__icon-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--aurora-text-muted);
|
||
}
|
||
|
||
.sidebar__title {
|
||
flex: 1;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.sidebar__count {
|
||
background: var(--aurora-accent);
|
||
color: var(--aurora-accent-text);
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
border-radius: 999px;
|
||
padding: 1px 7px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sidebar__chevron {
|
||
background: none;
|
||
border: none;
|
||
color: var(--aurora-text-muted);
|
||
font-size: 1.1rem;
|
||
cursor: pointer;
|
||
padding: 4px 12px;
|
||
transition: transform 0.15s ease;
|
||
}
|
||
|
||
.sidebar__chevron--open {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.sidebar__sublist {
|
||
padding: 2px 0 6px;
|
||
}
|
||
|
||
.sidebar__sublink {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
padding: 2px 10px 2px 42px;
|
||
text-decoration: none;
|
||
color: var(--aurora-text-muted);
|
||
font-size: 0.8125rem;
|
||
border-radius: 6px;
|
||
margin: 0 8px;
|
||
}
|
||
|
||
.sidebar__sublink:hover {
|
||
background: var(--aurora-bg-subtle);
|
||
color: var(--aurora-text);
|
||
}
|
||
|
||
.sidebar__sublink--active {
|
||
color: var(--aurora-accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.sidebar__pro-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
color: var(--aurora-text-muted);
|
||
flex-shrink: 0;
|
||
}
|
||
.sidebar__pro-badge .dashicons {
|
||
font-size: 13px;
|
||
width: 13px;
|
||
height: 13px;
|
||
}
|
||
|
||
/* --- Aurora branded nav (right under the native menu's own divider) ---- */
|
||
.sidebar__aurora {
|
||
padding-bottom: 4px;
|
||
}
|
||
.sidebar__aurora-brand {
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
}
|
||
.sidebar__aurora-brand .sidebar__title {
|
||
color: var(--aurora-text-muted);
|
||
font-size: 0.8125rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.sidebar__aurora-brand .sidebar__icon {
|
||
background: var(--aurora-accent-soft);
|
||
color: var(--aurora-accent);
|
||
}
|
||
|
||
/* --- Collapsed (icon-only) rail --------------------------------------- */
|
||
.sidebar--collapsed {
|
||
overflow-x: hidden;
|
||
}
|
||
.sidebar--collapsed .sidebar__brand {
|
||
padding: 8px 0 16px;
|
||
text-align: center;
|
||
font-size: 1.1rem;
|
||
}
|
||
.sidebar--collapsed .sidebar__brand-img {
|
||
margin: 0 auto;
|
||
max-width: 40px;
|
||
}
|
||
.sidebar--collapsed .sidebar__title,
|
||
.sidebar--collapsed .sidebar__count,
|
||
.sidebar--collapsed .sidebar__chevron,
|
||
.sidebar--collapsed .sidebar__sublist {
|
||
display: none;
|
||
}
|
||
.sidebar--collapsed .sidebar__row {
|
||
margin: 1px 10px;
|
||
}
|
||
.sidebar--collapsed .sidebar__link {
|
||
justify-content: center;
|
||
padding: 10px 0;
|
||
gap: 0;
|
||
}
|
||
</style>
|