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 | 32x 32x 32x 32x 32x 4x 4x 4x 4x 8x 4x 32x 32x | import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
import { ComponentProps } from '../../types';
export interface NavItemProps extends ComponentProps, HTMLProps<HTMLElement> {
/**
* Apply an active class to the NavItem
*/
active?: boolean;
}
/**
* NavItems are used inside of a Nav. These already have basic hover styles applied.
* You should **always** nest an `<a>` inside a NavItem. This is not part of the component so that you can use other
* components in place of an `<a>`, such as a React Router link (which renders an `<a>` also).
* These can have an active class applied to them to highlight the currently active page.
* You may apply `button` and related classes to a NavItem e.g. for a logout button.
* See the [Nav](#nav) section for a full example.
*/
export class NavItem extends PureComponent<NavItemProps, {}> {
public render() {
const {
className,
children,
active,
component: Component = 'li',
} = this.props;
return (
<Component
className={classNames('nav-item', active && 'active', className)}
>
{children}
</Component>
);
}
}
export default NavItem;
|