Drawer

Utilize Bramble UI's drawer component for efficient content navigation. Create modern and user-friendly web interfaces with dynamic drawer functionality.

Usage

The drawer component is available globally via the Context API and is imported using a custom hook: useDrawer.

import UseDrawer from '@/hooks/useDrawer'

import { NewsLetter } from '@/features' // import component to be added to drawer.

const { showDrawer, closeDrawer } = UseDrawer() // expose functionality from custom hook

// close drawer
const oncancel = (e: any) => {
	e.preventDefault()
	closeDrawer()
}

<button
	className='btn'
	onClick={() =>
		showDrawer(
			<NewsLetter
				layout='row'
				closeLabel='Cancel'
				closeStyles='dark outline'
				onSubmit={onsubmit}
				onclick={oncancel}
			/>,
			'bg-light text-dark',
			'top'
		)
	}
>
	show drawer top
</button>

Options

showDrawer(
	// add html or component,
	// add styles,
	// add position 'top' or 'bottom',
)

Position

Top

Bottom