Drawer

import React from 'react'
import { Button } from 'react-bootstrap';
//Redux
import { connect } from 'react-redux';
import { drawerToggle } from '../../../redux/action/Drawer'

const DrawerTypes = ({ drawerToggle, drawerContents }) => {

    const DrawerOverlay = () => {
        drawerToggle({
            status: true,
            rootClass: "",
            classes: "drawer-right",
            title: "Drawer Overlay",
            text: "With supporting text below as a natural lead-in to additional content.",
            footer: "Footer text",
            backdrop: true,
        })
    }

    const DrawerPush = () => {
        drawerToggle({
            status: true,
            rootClass: "hk-drawer-push hk-drawer-pushright",
            classes: "drawer-small drawer-right border-top",
            title: "Drawer Push",
            text: "With supporting text below as a natural lead-in to additional content."
        })
    }

    const DrawerPushFull = () => {
        drawerToggle({
            status: true,
            rootClass: "hk-drawer-push hk-drawer-wth-nav-push hk-drawer-pushright",
            classes: "drawer-right",
            title: "Drawer push with Nav",
            text: "With supporting text below as a natural lead-in to additional content."
        })
    }

    return (
        <div className="hstack flex-wrap gap-3 p-4">
            <Button onClick={DrawerOverlay}>Drawer Overlay</Button>
            <Button onClick={DrawerPush}>Drawer Push</Button>
            <Button onClick={DrawerPushFull} >Drawer push full</Button>
        </div>
    )
}

const mapStateToProps = ({ drawerReducer }) => {
    const { drawerContents } = drawerReducer;
    return { drawerContents }
};

export default connect(mapStateToProps, { drawerToggle })(DrawerTypes);

import React from 'react'
import { Button } from 'react-bootstrap';
//Redux
import { connect } from 'react-redux';
import { drawerToggle } from '../../../redux/action/Drawer'

const DrawerDirections = ({ drawerToggle, drawerContents }) => {

    const DrawerOverlayLeft = () => {
        drawerToggle({
            status: true,
            rootClass: "",
            classes: "drawer-overlay drawer-left",
            title: "Drawer Overlay",
            text: "With supporting text below as a natural lead-in to additional content."
        })
    }
    const DrawerOverlayRight = () => {
        drawerToggle({
            status: true,
            rootClass: "",
            classes: "drawer-overlay drawer-right",
            title: "Drawer Overlay",
            text: "With supporting text below as a natural lead-in to additional content."
        })
    }
    const DrawerPushLeft = () => {
        drawerToggle({
            status: true,
            rootClass: "hk-drawer-push hk-drawer-pushleft",
            classes: "drawer-small drawer-left border-top",
            title: "Drawer Push",
            text: "With supporting text below as a natural lead-in to additional content."
        })
    }

    const DrawerPushRight = () => {
        drawerToggle({
            status: true,
            rootClass: "hk-drawer-push hk-drawer-pushright",
            classes: "drawer-small drawer-right border-top",
            title: "Drawer Push",
            text: "With supporting text below as a natural lead-in to additional content."
        })
    }

    const DrawerNavPushLeft = () => {
        drawerToggle({
            status: true,
            rootClass: "hk-drawer-push hk-drawer-wth-nav-push hk-drawer-pushleft",
            classes: "drawer-left",
            title: "Drawer push with Nav",
            text: "With supporting text below as a natural lead-in to additional content."
        })
    }

    const DrawerNavPushRight = () => {
        drawerToggle({
            status: true,
            rootClass: "hk-drawer-push hk-drawer-wth-nav-push hk-drawer-pushright",
            classes: "drawer-right",
            title: "Drawer push with Nav",
            text: "With supporting text below as a natural lead-in to additional content."
        })
    }

    return (
        <div className="hstack flex-wrap gap-3 p-4">
            <Button onClick={DrawerOverlayLeft}>Drawer Overlay Left</Button>
            <Button onClick={DrawerOverlayRight}>Drawer Overlay Right</Button>
            <Button onClick={DrawerPushLeft}>Drawer Push Left</Button>
            <Button onClick={DrawerPushRight}>Drawer Push Right</Button>
            <Button onClick={DrawerNavPushLeft}>Drawer Push Nav Left</Button>
            <Button onClick={DrawerNavPushRight}>Drawer Push Nav Right</Button>
        </div>
    )
}

const mapStateToProps = ({ drawerReducer }) => {
    const { drawerContents } = drawerReducer;
    return { drawerContents }
};

export default connect(mapStateToProps, { drawerToggle })(DrawerDirections);