Drawer

<!-- Drawer Overlay -->
<a class="btn btn-primary drawer-toggle-link" data-target="#drawer_overlay" data-drawer="overlay" data-backdrop="active" href="javascript:void(0);">Drawer Overlay</a>
<div id="drawer_overlay" class="hk-drawer drawer-right">
	<div class="drawer-header">
		<div class="drawer-text">Drawer Overlay</div>
		<button type="button" class="drawer-close btn-close">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="drawer-body">
		<div data-simplebar class="nicescroll-bar">
			<div class="drawer-content-wrap">
				<p>With supporting text below as a natural lead-in to additional content.</p>
			</div>
		</div>
	</div>
	<div class="drawer-footer">
		<p class="p-xs">Footer text</p>
	</div>
</div>
<!-- Drawer Push -->
<a class="btn btn-primary drawer-toggle-link" data-target="#drawer_push"  data-drawer="push-normal" href="javascript:void(0);">Drawer Push</a>
<div id="drawer_push_nav_right" class="hk-drawer drawer-right">
	<div class="drawer-header">
		<div class="drawer-text">Drawer push with Nav</div>
		<button type="button" class="drawer-close btn-close">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="drawer-body">
		<div data-simplebar class="nicescroll-bar">
			<div class="drawer-content-wrap">
				<p>With supporting text below as a natural lead-in to additional content.</p>
			</div>
		</div>
	</div>
</div>
<!-- Drawer Push Full -->
<a class="btn btn-primary drawer-toggle-link" data-target="#drawer_push_nav" data-drawer="push-wth-nav" href="javascript:void(0);">Drawer push full</a>
<div id="drawer_push_nav" class="hk-drawer drawer-right">
<div class="drawer-header">
	<div class="drawer-text">Drawer push with Nav</div>
	<button type="button" class="drawer-close btn-close">
		<span aria-hidden="true">&times;</span>
	</button>
</div>
<div class="drawer-body">
	<div data-simplebar class="nicescroll-bar">
		<div class="drawer-content-wrap">
			<p>With supporting text below as a natural lead-in to additional content.</p>
		</div>
	</div>
</div>
</div>

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 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);

<template>
    <div>
        <button class="btn btn-primary drawer-toggle-link" @click="drawerOverlay">Drawer Overlay</button>
        <button class="btn btn-primary drawer-toggle-link"  @click="handleDrawerPush">Drawer Push</button>
        <button class="btn btn-primary drawer-toggle-link" @click="handleDrawerPushFull">Drawer push full</button>
    </div>
</template>
<script setup>
import { useDrawerStore } from '@/store/drawer';
const drawerStore = useDrawerStore();
const drawerOverlay = () => {
  drawerStore.setDrawerContents({
    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 handleDrawerPush = () => {
  drawerStore.setDrawerContents({
    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 handleDrawerPushFull = () => {
  drawerStore.setDrawerContents({
    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."
  });
};
</script>

<template>
    <div>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerOverlay">
          Drawer Overlay
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="handleDrawerPush">
          Drawer Push
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="handleDrawerPushFull">
          Drawer push full
        </BButton>
    </div>
</template>
<script setup>
import { useDrawerStore } from '@/store/drawer';
const drawerStore = useDrawerStore();
const drawerOverlay = () => {
  drawerStore.setDrawerContents({
    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 handleDrawerPush = () => {
  drawerStore.setDrawerContents({
    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 handleDrawerPushFull = () => {
  drawerStore.setDrawerContents({
    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."
  });
};
</script>

<!-- Drawer Overlay -->
<a class="btn btn-primary drawer-toggle-link" data-target="#drawer_overlay" data-drawer="overlay" data-backdrop="active" href="javascript:void(0);">Drawer Overlay</a>
<div id="drawer_overlay" class="hk-drawer drawer-right">
	<div class="drawer-header">
		<div class="drawer-text">Drawer Overlay</div>
		<button type="button" class="drawer-close btn-close">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="drawer-body">
		<div data-simplebar class="nicescroll-bar">
			<div class="drawer-content-wrap">
				<p>With supporting text below as a natural lead-in to additional content.</p>
			</div>
		</div>
	</div>
	<div class="drawer-footer">
		<p class="p-xs">Footer text</p>
	</div>
</div>
<!-- Drawer Push -->
<a class="btn btn-primary drawer-toggle-link" data-target="#drawer_push"  data-drawer="push-normal" href="javascript:void(0);">Drawer Push</a>
<div id="drawer_push_nav_right" class="hk-drawer drawer-right">
	<div class="drawer-header">
		<div class="drawer-text">Drawer push with Nav</div>
		<button type="button" class="drawer-close btn-close">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="drawer-body">
		<div data-simplebar class="nicescroll-bar">
			<div class="drawer-content-wrap">
				<p>With supporting text below as a natural lead-in to additional content.</p>
			</div>
		</div>
	</div>
</div>
<!-- Drawer Push Full -->
<a class="btn btn-primary drawer-toggle-link" data-target="#drawer_push_nav" data-drawer="push-wth-nav" href="javascript:void(0);">Drawer push full</a>
<div id="drawer_push_nav" class="hk-drawer drawer-right">
<div class="drawer-header">
	<div class="drawer-text">Drawer push with Nav</div>
	<button type="button" class="drawer-close btn-close">
		<span aria-hidden="true">&times;</span>
	</button>
</div>
<div class="drawer-body">
	<div data-simplebar class="nicescroll-bar">
		<div class="drawer-content-wrap">
			<p>With supporting text below as a natural lead-in to additional content.</p>
		</div>
	</div>
</div>
</div>

<!-- Drawer Overlay Left -->
<div id="drawer_overlay_left" class="hk-drawer drawer-left">
	...
</div>
<!-- /Drawer Overlay Left -->
<!-- Drawer Overlay Right -->
<div id="drawer_overlay_right" class="hk-drawer drawer-right">
	...
</div>
<!-- /Drawer Overlay Right -->
<!-- Drawer Push Right -->
<div id="drawer_push" class="hk-drawer drawer-small drawer-right">
	...
</div>
<!-- /Drawer Push Right -->
<!-- Drawer Push Left -->
<div id="drawer_push_left" class="hk-drawer drawer-small drawer-left">
	...
</div>
<!-- /Drawer Push Left -->
<!-- Drawer Push Right -->
<div id="drawer_push_right" class="hk-drawer drawer-small drawer-right">
	...
</div>
<!-- /Drawer Push Right -->
<!-- Drawer Push Right -->
<div id="drawer_push_nav" class="hk-drawer drawer-right">
	...
</div>
<!-- /Drawer Push Right -->
<!-- Drawer Push Left -->
<div id="drawer_push_nav_left" class="hk-drawer drawer-left">
	...
</div>
<!-- /Drawer Push Left -->

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);

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);

<template>
    <div>
        <button class="btn btn-primary drawer-toggle-link" @click="drawerOverlayLeft">Drawer Overlay Left</button>
        <button class="btn btn-primary drawer-toggle-link" @click="drawerOverlayRight">Drawer Overlay Right</button>
        <button class="btn btn-primary drawer-toggle-link" @click="drawerPushLeft">Drawer Push Left</button>
        <button class="btn btn-primary drawer-toggle-link" @click="drawerPushRight">Drawer push Right</button>
        <button class="btn btn-primary drawer-toggle-link" @click="drawerNavPushLeft">Drawer Push Nav Left</button>
        <button class="btn btn-primary drawer-toggle-link" @click="drawerNavPushRight">Drawer push Nav Right</button>
    </div>
</template>
<script setup>
import { useDrawerStore } from '@/store/drawer';
const drawerStore = useDrawerStore();
const drawerOverlayLeft() {
    drawerStore.setDrawerContents({
        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() {
    drawerStore.setDrawerContents({
        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() {
    drawerStore.setDrawerContents({
        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() {
    drawerStore.setDrawerContents({
        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() {
    drawerStore.setDrawerContents({
        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() {
    drawerStore.setDrawerContents({
        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."
    });
}
</script>

<template>
    <div>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerOverlayLeft">
          Drawer Overlay Left
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerOverlayRight">
          Drawer Overlay Right
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerPushLeft">
          Drawer Push Left
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerPushRight">
          Drawer push Right
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerNavPushLeft">
          Drawer Push Nav Left
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerNavPushRight">
          Drawer push Nav Right
        </BButton>
    </div>
</template>
<script setup>
import { useDrawerStore } from '@/store/drawer';
const drawerStore = useDrawerStore();
const drawerOverlayLeft() {
    drawerStore.setDrawerContents({
        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() {
    drawerStore.setDrawerContents({
        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() {
    drawerStore.setDrawerContents({
        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() {
    drawerStore.setDrawerContents({
        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() {
    drawerStore.setDrawerContents({
        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() {
    drawerStore.setDrawerContents({
        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."
    });
}
</script>

<!-- Drawer Overlay Left -->
<div id="drawer_overlay_left" class="hk-drawer drawer-left">
	...
</div>
<!-- /Drawer Overlay Left -->
<!-- Drawer Overlay Right -->
<div id="drawer_overlay_right" class="hk-drawer drawer-right">
	...
</div>
<!-- /Drawer Overlay Right -->
<!-- Drawer Push Right -->
<div id="drawer_push" class="hk-drawer drawer-small drawer-right">
	...
</div>
<!-- /Drawer Push Right -->
<!-- Drawer Push Left -->
<div id="drawer_push_left" class="hk-drawer drawer-small drawer-left">
	...
</div>
<!-- /Drawer Push Left -->
<!-- Drawer Push Right -->
<div id="drawer_push_right" class="hk-drawer drawer-small drawer-right">
	...
</div>
<!-- /Drawer Push Right -->
<!-- Drawer Push Right -->
<div id="drawer_push_nav" class="hk-drawer drawer-right">
	...
</div>
<!-- /Drawer Push Right -->
<!-- Drawer Push Left -->
<div id="drawer_push_nav_left" class="hk-drawer drawer-left">
	...
</div>
<!-- /Drawer Push Left -->