Nutmeg Pumpkin Macchiato

    @trendmicro/react-navbar

    0.3.0 • Public • Published

    react-navbar build status Coverage Status

    NPM

    React Navbar

    Demo: https://trendmicro-frontend.github.io/react-navbar

    Installation

    1. Install the latest version of react, react-sticky@5, and react-navbar:
    npm install --save react react-sticky@5 @trendmicro/react-navbar
    
    1. At this point you can import @trendmicro/react-navbar and all dependent styles in your application as follows:
    import Navbar from '@trendmicro/react-navbar';
    
    // Be sure to include styles at some point, probably during your bootstraping
    import '@trendmicro/react-dropdown/dist/react-dropdown.css';
    import '@trendmicro/react-navs/dist/react-navs.css';
    import '@trendmicro/react-navbar/dist/react-navbar.css';

    Usage

    Sticky Navigation Bar

    StickyNavbar.jsx

    import Anchor from '@trendmicro/react-anchor';
    import Dropdown from '@trendmicro/react-dropdown';
    import Navbar from '@trendmicro/react-navbar';
    import { Nav, NavDropdown, NavItem, MenuItem } from '@trendmicro/react-navs';
    import PropTypes from 'prop-types';
    import React from 'react';
    import { StickyContainer, Sticky } from 'react-sticky';
    import styles from './index.styl';
    
    const noop = () => {};
    
    const PageContent = () => (
        <div
            style={{
                border: '1px solid #ddd',
                backgroundColor: '#f5f5f5',
                height: 600,
                marginTop: 15
            }}
        >
            <div className="container-fluid">
                <h3>Page Content</h3>
            </div>
        </div>
    );
    
    const StickyNavbar = ({ state, actions }) => {
        return (
            <StickyContainer>
                <header className={styles.siteHeader}>
                    <Anchor>
                        <i className={styles.banner} />
                        <h1 className={styles.title}>Product Name</h1>
                    </Anchor>
                </header>
                <Sticky>
                    <Navbar>
                        <Navbar.Header>
                            <Navbar.Toggle />
                        </Navbar.Header>
                        <Nav
                            navStyle="navbar"
                            activeKey={state.tab}
                            onSelect={actions.selectTab}
                        >
                            <NavItem className="text-center" style={{ minWidth: 72 }}>
                                <i className="fa fa-star" style={{ color: '#fff' }} />
                            </NavItem>
                            <NavDropdown
                                autoOpen
                                noCaret
                                eventKey="dashboard"
                                title="Dashboard"
                            >
                                <MenuItem eventKey="dashboard.1">Menu Item 1</MenuItem>
                                <MenuItem eventKey="dashboard.2">Menu Item 2</MenuItem>
                                <MenuItem eventKey="dashboard.3">Menu Item 3</MenuItem>
                                <MenuItem eventKey="dashboard.4">Menu Item 4</MenuItem>
                            </NavDropdown>
                            <NavDropdown
                                autoOpen
                                noCaret
                                eventKey="administration"
                                title="Administration"
                            >
                                <MenuItem eventKey="administration.1">Menu Item 1</MenuItem>
                                <MenuItem eventKey="administration.2">Menu Item 2</MenuItem>
                                <MenuItem eventKey="administration.3">Menu Item 3</MenuItem>
                                <MenuItem eventKey="administration.4">
                                    Menu item 4
                                    <MenuItem eventKey="administration.4.1">
                                        Second level item one
                                    </MenuItem>
                                    <MenuItem eventKey="administration.4.2">
                                        Second level item two
                                    </MenuItem>
                                </MenuItem>
                            </NavDropdown>
                        </Nav>
                    </Navbar>
                </Sticky>
                <PageContent />
            </StickyContainer>
        );
    };
    
    StickyNavbar.propTypes = {
        state: PropTypes.object,
        actions: PropTypes.object
    };
    
    export default StickyNavbar;

    app.jsx

    import React from 'react';
    import ReactDOM from 'react-dom';
    import StickyNavbar from './StickyNavbar.jsx';
    
    class App extends React.Component {
        state = {
            tab: ''
        };
        actions = {
            selectTab: (eventKey, event) => {
                if (!eventKey) {
                    return;
                }
    
                const tab = eventKey.replace(/\..+/g, '');
                this.setState({ tab });
            }
        };
    
        render() {
            return (
                <StickyNavbar
                    state={this.state}
                    actions={this.actions}
                />
            )
        }
    }
    
    ReactDOM.render(<App />, document.getElementById('container'));

    index.styl

    .site-header {
        position: relative;
        padding: 0 20px;
        height: 64px;
        margin-bottom: 0;
        background-color: #fff;
    
        a:link,
        a:hover,
        a:active,
        a:visited,
        a:focus {
            color: #222;
            text-decoration: none;
        }
    
        .banner {
            width: 32px;
            height: 32px;
            margin: 16px 0;
            margin-right: 10px;
            background: url("./tball.svg") center left no-repeat;
            float: left;
        }
        .title {
            padding: 16px 0;
            font-family: "Interstate-Light", Arial, "Helvetica Neue", Helvetica, sans-serif;
            font-size: 26px;
            font-weight: 200;
            letter-spacing: -.03em;
            white-space: nowrap;
        }
    }

    tball.svg

    image

    API

    Properties

    Name Type Default Description

    License

    MIT

    Install

    npm i @trendmicro/react-navbar

    DownloadsWeekly Downloads

    352

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    57.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • trendmicro-frontend
    • cheton
    • rothpeng
    • smalltase