Header Drawer
A wrapper around Elements Drawer component.
It consist of a button with icon and a drawer component, which is a panel that slides out from the edge of the screen.
The drawer component is hidden by default and can be toggled by clicking on the button. It contains social icons and a DocsNavigation component.
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
docux: {
app: {
header: {
drawer: {
button: {
color: {
static: {
initial: '{color.gray.500}',
dark: '{color.gray.400}'
},
hover: {
initial: '{color.gray.700}',
dark: '{color.gray.200}'
}
},
zIndex: '10',
padding: '{space.4}',
paddingInlineStart: '0px'
},
menu: {
borderRightWidth: '1px',
borderRightStyle: 'solid',
borderRightColor: '{elements.border.primary.static}',
backgroundColor: {
initial: '{color.gray.50}',
dark: '{color.gray.900}'
},
paddingX: {
initial: '{space.4}',
sm: '{space.6}'
},
header: {
height: '{docux.app.header.height}',
alignItems: 'center',
justifyContent: 'space-between',
borderBottomWidth: '1px',
borderBottomStyle: 'solid',
borderBottomColor: '{elements.border.primary.static}',
gap: '{space.2}',
icon: {
size: '{space.4}'
}
},
links: {
paddingTop: '{space.6}'
}
}
}
},
}
}
})