All files / Components/Drawer Drawer.js

100% Statements 20/20
100% Branches 14/14
100% Functions 4/4
100% Lines 20/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75            1x       8x   8x 8x   8x 3x 3x   3x 3x 3x       8x 3x 2x 2x   1x 1x   3x     8x   8x                           8x                                            
import React, { useContext, useEffect } from 'react';
import classNames from 'classnames';
 
import { WebAppsUXContext } from '../../Context';
import Scrollbar from '../Scrollbar';
 
const Drawer = props => {
    const {
        children,
        ...rest
    } = props;
 
    const { breakpoint, isBreakpoint, useDrawer } = useContext(WebAppsUXContext);
    const { drawer, setDrawer, toggleDrawer } = useDrawer;
 
    useEffect(() => {
        drawer.active = true;
        setDrawer({ ...drawer });
 
        return () => {
            drawer.active = false;
            setDrawer({ ...drawer });
        }
    }, []);
 
    useEffect(() => {
        if (isBreakpoint('lg')) {
            drawer.display_mode = 'side';
            drawer.opened = true;
        } else {
            drawer.display_mode = 'overlay';
            drawer.opened = false;
        }
        setDrawer({ ...drawer });
    }, [breakpoint]);
 
    const isRtl = getComputedStyle(document.querySelector('html')).direction === 'rtl';
 
    const navClasses = classNames(
        'webapps-drawer',
        'bg-white dark:bg-gray-900',
        'text-black dark:text-white',
        'border-r',
        'dark:border-gray-800',
        (drawer.display_mode === 'side') ? '' : 'webapps-drawer-overlay',
        (drawer.display_mode === 'side')
            ? (drawer.opened)
                ? 'ml-0' : '-ml-72'
            : (drawer.opened)
                ? 'translate-x-0' : '-translate-x-full'
    )
 
    return (
        <>
            <div className={navClasses} {...rest}>
                <div className="absolute left-0 top-0 bottom-0 flex flex-auto flex-col w-full h-full overflow-hidden z-[110]">
                    <Scrollbar
                        settings={{ suppressScrollX: !isRtl }}
                        tag="div"
                        className={`flex flex-col flex-grow h-full`}
                    >
                        {children}
                    </Scrollbar>
                </div>
            </div>
            {
                (drawer.display_mode === 'overlay' && drawer.opened)
                    ? <div className="absolute top-0 bottom-0 left-0 right-0 z-[199] opacity-60 bg-gray-600" onClick={toggleDrawer}></div>
                    : null
            }
        </>
    );
}
 
export default Drawer;