2026-01-27 16:21:58 +00:00
|
|
|
---
|
|
|
|
|
interface Props {
|
2026-01-28 23:47:14 +00:00
|
|
|
currentPage: string;
|
2026-01-27 16:21:58 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const { currentPage } = Astro.props;
|
|
|
|
|
|
|
|
|
|
const navItems = [
|
|
|
|
|
{ href: '/admin/settings', label: 'Instance Settings', icon: '⚙️' },
|
|
|
|
|
{ href: '/admin/approvals', label: 'Approvals', icon: '✅' },
|
|
|
|
|
{ href: '/admin/invitations', label: 'Invitations', icon: '📨' },
|
|
|
|
|
{ href: '/admin/roles', label: 'Roles & Permissions', icon: '🔐' },
|
|
|
|
|
{ href: '/admin/plugins', label: 'Plugins', icon: '🧩' },
|
|
|
|
|
{ href: '/admin/voting', label: 'Voting Methods', icon: '🗳️' },
|
|
|
|
|
];
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
<aside class="admin-sidebar">
|
|
|
|
|
<div class="sidebar-header">
|
|
|
|
|
<h2>Admin Panel</h2>
|
|
|
|
|
<a href="/" class="back-to-site">← Back to Site</a>
|
|
|
|
|
</div>
|
|
|
|
|
<nav class="admin-nav">
|
|
|
|
|
{navItems.map(item => (
|
|
|
|
|
<a
|
|
|
|
|
href={item.href}
|
|
|
|
|
class:list={['nav-item', { active: currentPage === item.href }]}
|
|
|
|
|
>
|
|
|
|
|
<span class="nav-icon">{item.icon}</span>
|
|
|
|
|
<span class="nav-label">{item.label}</span>
|
|
|
|
|
</a>
|
|
|
|
|
))}
|
|
|
|
|
</nav>
|
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.admin-sidebar {
|
|
|
|
|
width: 260px;
|
|
|
|
|
background: var(--color-surface);
|
|
|
|
|
border-right: 1px solid var(--color-border);
|
|
|
|
|
min-height: calc(100vh - 60px);
|
|
|
|
|
padding: 1.5rem 0;
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 60px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar-header {
|
|
|
|
|
padding: 0 1.5rem 1.5rem;
|
|
|
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar-header h2 {
|
|
|
|
|
margin: 0 0 0.5rem;
|
|
|
|
|
font-size: 1.25rem;
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back-to-site {
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
color: var(--color-text-muted);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back-to-site:hover {
|
|
|
|
|
color: var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.admin-nav {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 0.25rem;
|
|
|
|
|
padding: 0 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.75rem;
|
|
|
|
|
padding: 0.75rem 1rem;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
transition: all 0.15s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-item:hover {
|
|
|
|
|
background: var(--color-bg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-item.active {
|
|
|
|
|
background: var(--color-primary-bg);
|
|
|
|
|
color: var(--color-primary);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-icon {
|
|
|
|
|
font-size: 1.125rem;
|
|
|
|
|
width: 24px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-label {
|
|
|
|
|
font-size: 0.9375rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
.admin-sidebar {
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-height: auto;
|
|
|
|
|
position: static;
|
|
|
|
|
border-right: none;
|
|
|
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.admin-nav {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-item {
|
|
|
|
|
padding: 0.5rem 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-label {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-icon {
|
|
|
|
|
font-size: 1.25rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
