All files / Components Sidebar.js

100% Statements 19/19
100% Branches 22/22
100% Functions 3/3
100% Lines 19/19

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;