Sidebar

Optimize content organization with Bramble UI's sidebar component. Create efficient and modern web interfaces with dynamic sidebar layouts

Usage

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

import UseDrawer from '@/hooks/UseSidebar'

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

const { showSidebar, closeSidebar } = UseSidebar()

// close Sidebar
const oncancel = (e: any) => {
    e.preventDefault()
    closeSidebar()
}

// open Sidebar
showSidebar(
	// add html or component,
	// add styles,
	// add position 'top' or 'bottom',
)

Position

Right

<button
    className='btn'
    onClick={() =>
        showSidebar(
            <NewsLetter
                layout='column'
                closeLabel='Cancel'
                closeStyles='dark outline'
                onSubmit={onsubmit}
                onclick={oncancel}
            />,
            'bg-dark text-light',
            'right'
        )
    }
>
    show sidebar right
</button>

Left

<button
    className='btn'
    onClick={() =>
        showSidebar(
            <User
                layout='column'
                closeLabel='Cancel'
                closeStyles='dark outline'
                onSubmit={onsubmit}
                onclick={oncancel}
            />,
            'bg-light text-dark',
            'left'
        )
    }
>
    show sidebar left
</button>