3b59416298
## Description Adds `admin.components.header` option to allow users to insert custom components in the page header / top of page. [Related discussion](https://github.com/payloadcms/payload/discussions/7584) - [X] I have read and understand the [CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md) document in this repository. ## Type of change - [ ] Chore (non-breaking change which does not add functionality) - [X] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Change to the [templates](https://github.com/payloadcms/payload/tree/main/templates) directory (does not affect core functionality) - [ ] Change to the [examples](https://github.com/payloadcms/payload/tree/main/examples) directory (does not affect core functionality) - [x] This change requires a documentation update ## Checklist: - [x] I have added tests that prove my fix is effective or that my feature works - will add - [X] Existing test suite passes locally with my changes
31 lines
794 B
TypeScript
31 lines
794 B
TypeScript
import type { PayloadServerReactComponent, SanitizedConfig } from 'payload'
|
|
|
|
import React from 'react'
|
|
|
|
const baseClass = 'custom-header'
|
|
|
|
export const CustomHeader: PayloadServerReactComponent<
|
|
SanitizedConfig['admin']['components']['header'][0]
|
|
> = () => {
|
|
return (
|
|
<div
|
|
className={baseClass}
|
|
style={{
|
|
alignItems: 'center',
|
|
backgroundColor: 'var(--theme-success-500)',
|
|
display: 'flex',
|
|
minHeight: 'var(--app-header-height)',
|
|
padding: '0 var(--gutter-h)',
|
|
// position: 'sticky',
|
|
top: 0,
|
|
width: '100%',
|
|
zIndex: 'var(--z-modal)',
|
|
}}
|
|
>
|
|
<p style={{ color: 'var(--theme-text)', margin: 0 }}>
|
|
Here is a custom header inserted with admin.components.header
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|