Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
Four directions are available: Right, Left.
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);
Use the focus
trigger to dismiss popovers on the user’s next click of a different element than the toggle element.
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);