BREAKING CHANGE: If your config has a `admin.components.routes` array, you will need to key them into the `admin.components.views` object. The configuration options should remain unchanged.
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
import { NavLink } from 'react-router-dom'
|
|
|
|
// As this is the demo project, we import our dependencies from the `src` directory.
|
|
import { useConfig } from '../../../../packages/payload/src/admin/components/utilities/Config'
|
|
|
|
// In your projects, you can import as follows:
|
|
// import { useConfig } from 'payload/components/utilities';
|
|
|
|
const baseClass = 'after-nav-links'
|
|
|
|
const AfterNavLinks: React.FC = () => {
|
|
const {
|
|
routes: { admin: adminRoute },
|
|
} = useConfig()
|
|
|
|
return (
|
|
<div
|
|
className={baseClass}
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 'calc(var(--base) / 4)',
|
|
}}
|
|
>
|
|
<h4 className="nav__label" style={{ color: 'var(--theme-elevation-400)', margin: 0 }}>
|
|
Custom Routes
|
|
</h4>
|
|
<h4 className="nav__link" style={{ margin: 0 }}>
|
|
<NavLink
|
|
activeClassName="active"
|
|
style={{ textDecoration: 'none' }}
|
|
to={`${adminRoute}/custom-default-view`}
|
|
>
|
|
Default Template
|
|
</NavLink>
|
|
</h4>
|
|
<h4 className="nav__link" style={{ margin: 0 }}>
|
|
<NavLink
|
|
activeClassName="active"
|
|
style={{ textDecoration: 'none' }}
|
|
to={`${adminRoute}/custom-minimal-view`}
|
|
>
|
|
Minimal Template
|
|
</NavLink>
|
|
</h4>
|
|
<div id="custom-css" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AfterNavLinks
|