All files / Components/NavElements NavChild.js

100% Statements 9/9
100% Branches 12/12
100% Functions 2/2
100% Lines 9/9

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                    1x                     54x   54x 54x 54x   54x                                       54x                 54x             54x                                    
import React, { useContext } from 'react';
import classNames from 'classnames';
 
import Badge from '../Badge';
import Icon from '../Icon';
import Link from '../Link';
 
import { DropdownContext } from './NavDropdown';
import { WebAppsUXContext } from '../../Context';
 
const NavChild = props => {
    const {
        className,
        innerRef,
        name,
        icon,
        badge,
        addLinkClass,
        label,
        color,
        ...rest
    } = props;
 
    const { isOpen } = useContext(DropdownContext);
    const { useNavigation } = useContext(WebAppsUXContext);
    const { navigation, toggleNavigation } = useNavigation;
 
    const linkClasses = classNames(
        'relative',
        'flex',
        'items-center',
        'justify-start',
        'mb-1',
        'px-4',
        'py-2.5',
        'text-sm',
        'font-medium',
        'leading-5',
        'rounded-md',
        'transition-colors',
        'duration-200',
        'focus:outline-none',
        color
            ? `text-${color}-600 hover:bg-black/10 dark:hover:bg-white/10`
            : 'text-black/60 hover:text-black/100 dark:text-white/60 dark:hover:text-white/100 hover:bg-black/10 dark:hover:bg-white/10'
    )
 
    const routerLinkProps = rest.to && {
        exact: true,
        activeClassName: classNames(
            color
                ? `text-${color}-600 bg-black/10 dark:bg-white/10`
                : 'text-black/100 dark:text-white/100 bg-black/10 dark:bg-white/10'
        )
    }
 
    const click = () => {
        /* istanbul ignore next */
        if (navigation.display_mode === 'overlay' && navigation.opened) {
            toggleNavigation();
        }
    }
 
    return (
        <div className={className} ref={innerRef}>
            <Link
                className={linkClasses}
                onClick={click}
                {...routerLinkProps}
                {...rest}
                tabIndex={isOpen === false ? -1 : 0}
            >
                {icon && <Icon className="h-5 w-5 mr-4" icon={icon} />}
                <span className="text-sm">{name}</span>
                {badge && <Badge {...{ ...badge, text: null }}>{badge.text}</Badge>}
            </Link>
        </div>
    )
}
 
export default NavChild;