react-bootstrap-drawer

Drawer (Sidenav) Inspired by React Bootstrap Documentation

Usage no npm install needed!

<script type="module">
  import reactBootstrapDrawer from 'https://cdn.skypack.dev/react-bootstrap-drawer';
</script>

README

react-bootstrap-drawer

Usage

Quick Start

import 'react-bootstrap-drawer/lib/style.css';
import React, { useState } from 'react';
import {
    Col,
    Collapse,
    Container,
    Row,
} from 'react-bootstrap';
import { Drawer, } from 'react-bootstrap-drawer';

const ApplicationDrawer = (props) => {
    const [open, setOpen] = useState(false);

    const handleToggle = () => setOpen(!open);

    return (
        <Drawer { ...props }>
            <Drawer.Toggle onClick={ handleToggle } />

            <Collapse in={ open }>
                <Drawer.Overflow>
                    <Drawer.ToC>
                        <Drawer.Header href="/">Application</Drawer.Header>

                        <Drawer.Nav>
                            <Drawer.Item href="/settings">Settings</Drawer.Item>
                        </Drawer.Nav>
                    </Drawer.ToC>
                </Drawer.Overflow>
            </Collapse>
        </Drawer>
    );
};

const Application = (props) => {
    return (
        <Container fluid>
            <Row className="flex-xl-nowrap">
                <Col as={ ApplicationDrawer } xs={ 12 } md={ 3 } lg={ 2 } />
                <Col xs={ 12 } md={ 9 } lg={ 10 }>{ props.children }</Col>
            </Row>
        </Container>
    );
};

Customization

Note: One can use either Drawer.Component or DrawerComponent similar to react-bootstrap imports.

One can break-down usage into three core elements. The page in which the drawer resides, the drawer inside of the page, and the navigation inside of the drawer.

// CustomNavigation.js
import React from 'react';
import { Nav } from 'react-bootstrap';
import {
    DrawerNavigationHeader
    DrawerNavigation,
} from 'react-bootstrap-drawer';

export const CustomNavigation = (props) => {
    return (
        <>
            <DrawerNavigationHeader href="/">An Application</DrawerNavigationHeader>

            <DrawerNavigation>
                { /* Standard react-bootstrap Nav.Item / Nav.Link */ }
                { /* Caveat: CSS provides custom styles */ }
                <Nav.Item>
                    <Nav.Link href="/">Home</Nav.Link>
                </Nav.Item>

                <Nav.Item>
                    <Nav.Link href="/settings">Settings</Nav.Link>
                </Nav.Item>
            </DrawerNavigation>
        </>
    );
};
// CustomComponent.js
import React, { useState } from 'react';
import { Collapse } from 'react-bootstrap';
import {
    Drawer,
    DrawerOverflow,
    DrawerToC,
    DrawerToggle,
} from 'react-bootstrap-drawer';

import CustomNavigation from './CustomNavigation';

export const CustomDrawer = (props) => {
    const [open, setOpen] = useState(false);

    const handleToggle = () => setOpen(!open);

    return (
        <Drawer className={ props.className }>
            <DrawerToggle onClick={ handleToggle } />

            <Collapse in={ open }>
                <DrawerOverflow>
                    <DrawerToC>
                        { /* Your Navigation Goes Here */ }
                        <CustomNavigation />
                    </DrawerToC>
                </DrawerOverflow>
            </Collapse>
        </Drawer>
    );
};
// CustomPage.js
import 'react-bootstrap-drawer/src/style.css';
import React from 'react';
import {
    Col,
    Container,
    Row,
} from 'react-bootstrap';

import CustomDrawer from './CustomDrawer';

export const CustomPage = (props) => {
    return (
        <Container fluid>
            <Row className="flex-xl-nowrap">
                <Col as={ CustomDrawer } xs={ 12 } md={ 3 } lg={ 2 } />
                <Col xs={ 12 } md={ 9 } lg={ 10 }>
                    { props.children }
                </Col>
            </Row>
        </Container>
    );
};

Notes

References

Credit

The real credit goes to the react-bootstrap project for performing the development of this component. We have simply reverse-engineered their documents page and their source-code to provide a ready-made component that is as library-agnostic as possible.