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