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 76 77 78 79 80 81 82 83 84 85 | 1x 30x 29x 29x 29x 12x 12x 12x 12x 12x 29x 12x 8x 8x 4x 4x 12x 29x 29x | import React, { useContext, useEffect } from 'react'; import { NavChild, NavDropdown, NavItem, NavTitle } from './NavElements/index'; import CreateElement from '../Helpers/CreateElement'; import SidebarWrapper from './SidebarWrapper'; import { WebAppsUXContext } from '../Context'; import NavigationError from '../Errors/NavigationError'; import classNames from 'classnames'; import SidebarHeader from './SidebarHeader'; const Sidebar = props => { const { dropDownMode, ...rest } = props; const { breakpoint, isBreakpoint, useNavigation } = useContext(WebAppsUXContext); const { loadNavigation, navigation, setNavigation, toggleNavigation } = useNavigation; useEffect(() => { /* istanbul ignore else */ if (!navigation.dropDownMode) { navigation.dropDownMode = dropDownMode; } /* istanbul ignore else */ if (!navigation.openDropdown) { navigation.openDropdown = ''; } setNavigation({ ...navigation }); }, []); useEffect(() => { if (isBreakpoint('md')) { navigation.display_mode = 'side'; navigation.opened = true; } else { navigation.display_mode = 'overlay'; navigation.opened = false; } setNavigation({ ...navigation }); }, [breakpoint]); const navClasses = classNames( 'webapps-sidebar', 'border-r', 'dark:border-gray-800', (navigation?.color_mode === 'dark') ? 'dark bg-gray-900' : 'bg-white dark:bg-gray-900', (navigation?.display_mode === 'side') ? '' : 'webapps-sidebar-overlay', (navigation?.display_mode === 'side') ? (navigation?.opened) ? 'ml-0' : '-ml-72' : (navigation?.opened) ? 'translate-x-0' : '-translate-x-full' ) return ( <> <nav className={navClasses} {...rest}> <div className="absolute left-0 top-0 bottom-0 flex flex-auto flex-col w-full h-full overflow-hidden z-[1000]"> <SidebarHeader /> <NavigationError retry={loadNavigation}> <SidebarWrapper {...rest}> { (navigation.menu && !navigation.menu.error) ? ( <CreateElement items={navigation.menu} components={{ NavChild, NavDropdown, NavItem, NavTitle }}> </CreateElement> ) : null } </SidebarWrapper> </NavigationError> </div> </nav> { (navigation.display_mode === 'overlay' && navigation.opened) ? <div className="absolute top-0 bottom-0 left-0 right-0 z-[199] opacity-60 bg-gray-600" onClick={toggleNavigation}></div> : null } </> ) } export default Sidebar; |