Header
Defines the global header section of the page.
It has several components, which renders depending on app configuration or context. Those components includes: AppHeaderDrawer, AppHeaderLogo, AppNavigation, AppSearch, AppTextDirection, AppColorMode, AppSocialIcons.
AppHeader is used inside AppLayout component.
This is not a MDC component, but you can control it's visibility with configuration or front-matter (WIP 🚧).
Configuration
app.config.ts
export default defineAppConfig({
docux: {
header: {
title: '',
logo: false,
showLinkIcon: false,
exclude: []
},
}
})Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
docux: {
app: {
header: {
height: '64px',
backdropFilter: '{elements.backdrop.filter}',
backgroundColor: '{elements.backdrop.background}',
borderBottomWidth: '1px',
borderBottomStyle: 'solid',
borderBottomColor: '{elements.border.primary.static}',
title: {
fontSize: '{fontSize.2xl}',
fontWeight: '{fontWeight.bold}',
color: {
static: {
initial: '{color.gray.900}',
dark: '{color.gray.100}'
},
hover: '{color.primary.500}'
}
},
icon: {
size: '{space.4}'
},
layout: {
gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
gap: '{space.2}',
left: {
gridColumn: 'span 4 / span 4'
},
center: {
gridColumn: 'span 4 / span 4'
},
right: {
gridColumn: 'span 4 / span 4'
}
},
},
}
}
})