mirror of
https://github.com/complexcaresolutions/cms.c2sgmbh.git
synced 2026-03-17 17:24:12 +00:00
feat(admin): add Community nav links to admin sidebar
- Add CommunityNavLinks component with styled navigation - Register afterNavLinks in payload.config.ts - Link to Community Inbox and Analytics views - Add Analytics quick-link in Inbox component - Support dark mode styling Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
22592bf759
commit
33a30b43d8
5 changed files with 151 additions and 12 deletions
|
|
@ -25,6 +25,7 @@ import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93
|
|||
import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
|
||||
import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
|
||||
import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
|
||||
import { CommunityNavLinks as CommunityNavLinks_4431db66fbe96916dda5fdbfa979ee1e } from '@/components/admin/CommunityNavLinks'
|
||||
import { TenantSelector as TenantSelector_d6d5f193a167989e2ee7d14202901e62 } from '@payloadcms/plugin-multi-tenant/rsc'
|
||||
import { TenantSelectionProvider as TenantSelectionProvider_d6d5f193a167989e2ee7d14202901e62 } from '@payloadcms/plugin-multi-tenant/rsc'
|
||||
import { CollectionCards as CollectionCards_ab83ff7e88da8d3530831f296ec4756a } from '@payloadcms/ui/rsc'
|
||||
|
|
@ -57,6 +58,7 @@ export const importMap = {
|
|||
"@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
|
||||
"@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
|
||||
"@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
|
||||
"@/components/admin/CommunityNavLinks#CommunityNavLinks": CommunityNavLinks_4431db66fbe96916dda5fdbfa979ee1e,
|
||||
"@payloadcms/plugin-multi-tenant/rsc#TenantSelector": TenantSelector_d6d5f193a167989e2ee7d14202901e62,
|
||||
"@payloadcms/plugin-multi-tenant/rsc#TenantSelectionProvider": TenantSelectionProvider_d6d5f193a167989e2ee7d14202901e62,
|
||||
"@payloadcms/ui/rsc#CollectionCards": CollectionCards_ab83ff7e88da8d3530831f296ec4756a
|
||||
|
|
|
|||
|
|
@ -508,6 +508,9 @@ export const CommunityInbox: React.FC = () => {
|
|||
<>
|
||||
<h1>📬 Inbox</h1>
|
||||
<div className="mobile-header-actions">
|
||||
<a href="/admin/views/community/analytics" className="btn-icon">
|
||||
📈
|
||||
</a>
|
||||
<button className="btn-icon" onClick={() => setMobileView('filters')}>
|
||||
🎛️ {activeFiltersCount > 0 && <span className="filter-badge">{activeFiltersCount}</span>}
|
||||
</button>
|
||||
|
|
@ -972,6 +975,9 @@ export const CommunityInbox: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="inbox-actions">
|
||||
<a href="/admin/views/community/analytics" className="btn">
|
||||
📈 Analytics
|
||||
</a>
|
||||
<button className="btn" onClick={() => setShowExportModal(true)}>
|
||||
📊 Export
|
||||
</button>
|
||||
|
|
|
|||
88
src/components/admin/CommunityNavLinks.scss
Normal file
88
src/components/admin/CommunityNavLinks.scss
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
.community-nav-links {
|
||||
padding: 0 var(--base);
|
||||
margin-top: var(--base);
|
||||
border-top: 1px solid var(--theme-elevation-100);
|
||||
padding-top: var(--base);
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--theme-elevation-500);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
color: var(--theme-elevation-800);
|
||||
font-size: 13px;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-elevation-50);
|
||||
color: var(--theme-elevation-900);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: var(--theme-elevation-100);
|
||||
color: var(--theme-text);
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-elevation-150);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__link-icon {
|
||||
font-size: 16px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__link-label {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode adjustments
|
||||
[data-theme='dark'] {
|
||||
.community-nav-links {
|
||||
&__link {
|
||||
&:hover {
|
||||
background-color: var(--theme-elevation-100);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: var(--theme-elevation-150);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-elevation-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
src/components/admin/CommunityNavLinks.tsx
Normal file
50
src/components/admin/CommunityNavLinks.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
|
||||
import './CommunityNavLinks.scss'
|
||||
|
||||
export const CommunityNavLinks: React.FC = () => {
|
||||
const pathname = usePathname()
|
||||
|
||||
const links = [
|
||||
{
|
||||
href: '/admin/views/community/inbox',
|
||||
label: 'Community Inbox',
|
||||
icon: '📥',
|
||||
},
|
||||
{
|
||||
href: '/admin/views/community/analytics',
|
||||
label: 'Community Analytics',
|
||||
icon: '📊',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="community-nav-links">
|
||||
<div className="community-nav-links__header">
|
||||
<span className="community-nav-links__icon">💬</span>
|
||||
<span className="community-nav-links__title">Community</span>
|
||||
</div>
|
||||
<nav className="community-nav-links__list">
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href
|
||||
return (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className={`community-nav-links__link ${isActive ? 'community-nav-links__link--active' : ''}`}
|
||||
>
|
||||
<span className="community-nav-links__link-icon">{link.icon}</span>
|
||||
<span className="community-nav-links__link-label">{link.label}</span>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CommunityNavLinks
|
||||
|
|
@ -126,19 +126,12 @@ export default buildConfig({
|
|||
serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL || 'https://pl.porwoll.tech',
|
||||
admin: {
|
||||
user: Users.slug,
|
||||
// All custom components disabled due to path-to-regexp bug
|
||||
components: {
|
||||
// Community Management Nav Links
|
||||
afterNavLinks: ['@/components/admin/CommunityNavLinks#CommunityNavLinks'],
|
||||
},
|
||||
// Note: Custom views with paths disabled due to path-to-regexp bug
|
||||
// See BUG_REPORT_CUSTOM_VIEWS.md for details
|
||||
// TypeError: Missing parameter name at 5
|
||||
// components: {
|
||||
// afterNavLinks: ['@/components/admin/TenantBreadcrumb#TenantBreadcrumb'],
|
||||
// views: {
|
||||
// TenantDashboard: {
|
||||
// Component: '@/components/admin/TenantDashboardView#TenantDashboardView',
|
||||
// path: '/tenant-dashboard',
|
||||
// },
|
||||
// },
|
||||
// beforeNavLinks: ['@/components/admin/DashboardNavLink#DashboardNavLink'],
|
||||
// },
|
||||
},
|
||||
// Multi-Tenant Email Adapter
|
||||
email: multiTenantEmailAdapter,
|
||||
|
|
|
|||
Loading…
Reference in a new issue