├── .babelrc ├── .eslintrc ├── .gitignore ├── .npmignore ├── .stylintrc ├── .travis.yml ├── LICENSE ├── README.md ├── bower.json ├── dist ├── react-navbar.css ├── react-navbar.css.map └── react-navbar.min.css ├── docs ├── 0b39d1e64af23fe5437238402d08496a.svg ├── 35071d00819547a959ef3450c129d77e.eot ├── 37f4597594857b017901209aae0a60e1.svg ├── 3eff5a4e9fb92ca96cbf2fa77649b8c1.ttf ├── 81436770636b45508203b3022075ae73.ttf ├── 8854c448a7903a7159ef7743634bae8c.svg ├── 8a53d21a4d9aa1aac2bf15093bd748c4.woff ├── af39e41be700d6148c61a6c1ffc84215.svg ├── bundle.js ├── bundle.js.map ├── d6c7e9d3e5adb7a5261c5ad9f7d3caaa.woff ├── d9c6d360d27eac625da0405245ec9f0d.eot ├── efe2a52b957d048ce7ae71931056eeee.svg └── index.html ├── examples ├── .stylintrc ├── HorizontalNavbar1.jsx ├── HorizontalNavbar2.jsx ├── index.html ├── index.jsx ├── index.styl ├── layout │ ├── Navbar.jsx │ ├── Navbar.styl │ ├── Section.jsx │ ├── Section.styl │ └── index.js ├── site-header.styl ├── tball.svg └── webpack.config.js ├── package.json ├── scripts └── bowersync ├── src ├── Navbar.jsx ├── NavbarBrand.jsx ├── NavbarHeader.jsx ├── NavbarToggle.jsx ├── capitalize.js ├── index.js ├── index.styl ├── navbar.styl ├── reset-context.styl └── variables.styl ├── test └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0", "react"], 3 | "plugins": [ 4 | "transform-decorators-legacy" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "trendmicro", 3 | "parser": "babel-eslint", 4 | "env": { 5 | "browser": true, 6 | "node": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | /.nyc_output 4 | /coverage 5 | /lib 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | /.nyc_output 3 | /coverage 4 | -------------------------------------------------------------------------------- /.stylintrc: -------------------------------------------------------------------------------- 1 | // 2 | // https://github.com/rossPatton/stylint 3 | // 4 | { 5 | "blocks": false, 6 | "brackets": "always", 7 | "colons": "always", 8 | "colors": false, 9 | "commaSpace": "always", 10 | "commentSpace": false, 11 | "cssLiteral": "never", 12 | "depthLimit": false, 13 | "duplicates": false, 14 | "efficient": "always", 15 | "extendPref": false, 16 | "globalDupe": false, 17 | "indentPref": false, 18 | "leadingZero": "never", 19 | "maxErrors": false, 20 | "maxWarnings": false, 21 | "mixed": false, 22 | "namingConvention": false, 23 | "namingConventionStrict": false, 24 | "none": "never", 25 | "noImportant": true, 26 | "parenSpace": false, 27 | "placeholders": "always", 28 | "prefixVarsWithDollar": "always", 29 | "quotePref": false, 30 | "semicolons": "always", 31 | "sortOrder": false, 32 | "stackedProperties": "never", 33 | "trailingWhitespace": "never", 34 | "universal": false, 35 | "valid": true, 36 | "zeroUnits": "never", 37 | "zIndexNormalize": false 38 | } 39 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | dist: trusty 3 | group: edge 4 | 5 | language: node_js 6 | 7 | os: 8 | - linux 9 | 10 | node_js: 11 | - '6' 12 | - '5' 13 | - '4' 14 | 15 | before_install: 16 | - npm install -g npm 17 | - npm --version 18 | 19 | after_success: 20 | - npm run coveralls 21 | - npm run coverage-clean 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Trend Micro Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-navbar [![build status](https://travis-ci.org/trendmicro-frontend/react-navbar.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-navbar) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-navbar/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-navbar?branch=master) 2 | 3 | [![NPM](https://nodei.co/npm/@trendmicro/react-navbar.png?downloads=true&stars=true)](https://nodei.co/npm/@trendmicro/react-navbar/) 4 | 5 | React Navbar 6 | 7 | Demo: https://trendmicro-frontend.github.io/react-navbar 8 | 9 | ## Installation 10 | 11 | 1. Install the latest version of [react](https://github.com/facebook/react), [react-sticky@5](https://github.com/captivationsoftware/react-sticky), and [react-navbar](https://github.com/trendmicro-frontend/react-navbar): 12 | 13 | ``` 14 | npm install --save react react-sticky@5 @trendmicro/react-navbar 15 | ``` 16 | 17 | 2. At this point you can import `@trendmicro/react-navbar` and all dependent styles in your application as follows: 18 | 19 | ```js 20 | import Navbar from '@trendmicro/react-navbar'; 21 | 22 | // Be sure to include styles at some point, probably during your bootstraping 23 | import '@trendmicro/react-dropdown/dist/react-dropdown.css'; 24 | import '@trendmicro/react-navs/dist/react-navs.css'; 25 | import '@trendmicro/react-navbar/dist/react-navbar.css'; 26 | ``` 27 | 28 | ## Usage 29 | 30 | ### Sticky Navigation Bar 31 | 32 | #### StickyNavbar.jsx 33 | ```js 34 | import Anchor from '@trendmicro/react-anchor'; 35 | import Dropdown from '@trendmicro/react-dropdown'; 36 | import Navbar from '@trendmicro/react-navbar'; 37 | import { Nav, NavDropdown, NavItem, MenuItem } from '@trendmicro/react-navs'; 38 | import PropTypes from 'prop-types'; 39 | import React from 'react'; 40 | import { StickyContainer, Sticky } from 'react-sticky'; 41 | import styles from './index.styl'; 42 | 43 | const noop = () => {}; 44 | 45 | const PageContent = () => ( 46 |
54 |
55 |

Page Content

56 |
57 |
58 | ); 59 | 60 | const StickyNavbar = ({ state, actions }) => { 61 | return ( 62 | 63 |
64 | 65 | 66 |

Product Name

67 | 68 |
69 | 70 | 71 | 72 | 73 | 74 | 113 | 114 | 115 | 116 | 117 | ); 118 | }; 119 | 120 | StickyNavbar.propTypes = { 121 | state: PropTypes.object, 122 | actions: PropTypes.object 123 | }; 124 | 125 | export default StickyNavbar; 126 | ``` 127 | 128 | #### app.jsx 129 | ```js 130 | import React from 'react'; 131 | import ReactDOM from 'react-dom'; 132 | import StickyNavbar from './StickyNavbar.jsx'; 133 | 134 | class App extends React.Component { 135 | state = { 136 | tab: '' 137 | }; 138 | actions = { 139 | selectTab: (eventKey, event) => { 140 | if (!eventKey) { 141 | return; 142 | } 143 | 144 | const tab = eventKey.replace(/\..+/g, ''); 145 | this.setState({ tab }); 146 | } 147 | }; 148 | 149 | render() { 150 | return ( 151 | 155 | ) 156 | } 157 | } 158 | 159 | ReactDOM.render(, document.getElementById('container')); 160 | ``` 161 | 162 | #### index.styl 163 | ```css 164 | .site-header { 165 | position: relative; 166 | padding: 0 20px; 167 | height: 64px; 168 | margin-bottom: 0; 169 | background-color: #fff; 170 | 171 | a:link, 172 | a:hover, 173 | a:active, 174 | a:visited, 175 | a:focus { 176 | color: #222; 177 | text-decoration: none; 178 | } 179 | 180 | .banner { 181 | width: 32px; 182 | height: 32px; 183 | margin: 16px 0; 184 | margin-right: 10px; 185 | background: url("./tball.svg") center left no-repeat; 186 | float: left; 187 | } 188 | .title { 189 | padding: 16px 0; 190 | font-family: "Interstate-Light", Arial, "Helvetica Neue", Helvetica, sans-serif; 191 | font-size: 26px; 192 | font-weight: 200; 193 | letter-spacing: -.03em; 194 | white-space: nowrap; 195 | } 196 | } 197 | ``` 198 | 199 | #### [tball.svg](examples/tball.svg?raw=true) 200 | 201 | ![image](https://cloud.githubusercontent.com/assets/447801/24544119/b27ce2ba-1634-11e7-984d-aa58ca6c5934.png) 202 | 203 | ## API 204 | 205 | ### Properties 206 | 207 | Name | Type | Default | Description 208 | :--- | :--- | :------ | :---------- 209 | 210 | ## License 211 | 212 | MIT 213 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@trendmicro/react-navbar", 3 | "description": "Trend Micro Components: React Navbar", 4 | "homepage": "https://github.com/trendmicro-frontend/react-navbar", 5 | "snapshots": [], 6 | "keywords": [ 7 | "react", 8 | "react-navbar", 9 | "navbar", 10 | "sticky" 11 | ], 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /dist/react-navbar.css: -------------------------------------------------------------------------------- 1 | /*! react-navbar v0.3.0 | (c) 2018 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-navbar */ 2 | .navbar---navbar---2JqF- { 3 | -webkit-box-sizing: border-box; 4 | -moz-box-sizing: border-box; 5 | box-sizing: border-box; 6 | line-height: 20px; 7 | position: relative; 8 | height: 40px; 9 | border: 0; 10 | } 11 | .navbar---navbar---2JqF- *, 12 | .navbar---navbar---2JqF- *:before, 13 | .navbar---navbar---2JqF- *:after { 14 | -webkit-box-sizing: inherit; 15 | -moz-box-sizing: inherit; 16 | box-sizing: inherit; 17 | } 18 | .navbar---sr-only---zXHnu { 19 | position: absolute; 20 | width: 1px; 21 | height: 1px; 22 | margin: -1px; 23 | padding: 0; 24 | overflow: hidden; 25 | clip: rect(0, 0, 0, 0); 26 | border: 0; 27 | } 28 | .navbar---navbar-fixed-top---3dov0, 29 | .navbar---navbar-fixed-bottom---1XC9a { 30 | position: fixed; 31 | right: 0; 32 | left: 0; 33 | z-index: 1030; 34 | } 35 | @media (min-width: 768px) { 36 | .navbar---navbar-fixed-top---3dov0, 37 | .navbar---navbar-fixed-bottom---1XC9a { 38 | border-radius: 0; 39 | } 40 | } 41 | .navbar---navbar-fixed-top---3dov0 { 42 | top: 0; 43 | border-width: 0 0 1px; 44 | } 45 | .navbar---navbar-fixed-bottom---1XC9a { 46 | bottom: 0; 47 | margin-bottom: 0; 48 | border-width: 1px 0 0; 49 | } 50 | .navbar---navbar-default---3rqTh { 51 | background-color: #db3d44; 52 | border-color: #db3d44; 53 | } 54 | @media (min-width: 768px) { 55 | .navbar---navbar-header---3Al_7 { 56 | float: left; 57 | } 58 | } 59 | .navbar---navbar-brand---1ATO3 { 60 | float: left; 61 | padding: 15px; 62 | font-size: 18px; 63 | line-height: 20px; 64 | height: 50px; 65 | } 66 | .navbar---navbar-brand---1ATO3:focus, 67 | .navbar---navbar-brand---1ATO3:hover { 68 | text-decoration: none; 69 | } 70 | .navbar---navbar-brand---1ATO3 > img { 71 | display: block; 72 | } 73 | @media (min-width: 768px) { 74 | .navbar---navbar---2JqF- > .navbar---container-fluid---2FU10 .navbar---navbar-brand---1ATO3, 75 | .navbar---navbar---2JqF- > .navbar---container---3HwUr .navbar---navbar-brand---1ATO3 { 76 | margin-left: -15px; 77 | } 78 | } 79 | .navbar---navbar-toggle---19waF { 80 | position: relative; 81 | float: right; 82 | margin-right: 15px; 83 | padding: 9px 10px; 84 | margin-top: 8px; 85 | margin-bottom: 8px; 86 | background-color: transparent; 87 | background-image: none; 88 | border: 1px solid transparent; 89 | border-radius: 4px; 90 | } 91 | @media (min-width: 768px) { 92 | .navbar---navbar-toggle---19waF { 93 | display: none; 94 | } 95 | } 96 | .navbar---navbar-toggle---19waF:focus { 97 | outline: 0; 98 | } 99 | .navbar---navbar-toggle---19waF .navbar---icon-bar---u1f02 { 100 | display: block; 101 | width: 22px; 102 | height: 2px; 103 | border-radius: 1px; 104 | } 105 | .navbar---navbar-toggle---19waF .navbar---icon-bar---u1f02 + .navbar---icon-bar---u1f02 { 106 | margin-top: 4px; 107 | } 108 | .navbar---navbar-collapse---2bR5O { 109 | overflow-x: visible; 110 | border-top: 1px solid transparent; 111 | -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 112 | box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 113 | -webkit-overflow-scrolling: touch; 114 | } 115 | .navbar---navbar-collapse---2bR5O.navbar---in---1iDGq { 116 | overflow-y: auto; 117 | } 118 | @media (min-width: 768px) { 119 | .navbar---navbar-collapse---2bR5O { 120 | width: auto; 121 | border-top: 0; 122 | -webkit-box-shadow: none; 123 | box-shadow: none; 124 | } 125 | .navbar---navbar-collapse---2bR5O.navbar---collapse---2uAfP { 126 | display: block !important; 127 | height: auto !important; 128 | padding-bottom: 0; 129 | overflow: visible !important; 130 | } 131 | .navbar---navbar-collapse---2bR5O.navbar---in---1iDGq { 132 | overflow-y: visible; 133 | } 134 | } 135 | 136 | /*# sourceMappingURL=react-navbar.css.map*/ -------------------------------------------------------------------------------- /dist/react-navbar.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"../dist/react-navbar.css","sourceRoot":""} -------------------------------------------------------------------------------- /dist/react-navbar.min.css: -------------------------------------------------------------------------------- 1 | /*! react-navbar v0.3.0 | (c) 2018 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-navbar */.navbar---navbar---2JqF-{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;line-height:20px;position:relative;height:40px;border:0}.navbar---navbar---2JqF- *,.navbar---navbar---2JqF- :after,.navbar---navbar---2JqF- :before{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}.navbar---sr-only---zXHnu{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.navbar---navbar-fixed-bottom---1XC9a,.navbar---navbar-fixed-top---3dov0{position:fixed;right:0;left:0;z-index:1030}@media (min-width:768px){.navbar---navbar-fixed-bottom---1XC9a,.navbar---navbar-fixed-top---3dov0{border-radius:0}}.navbar---navbar-fixed-top---3dov0{top:0;border-width:0 0 1px}.navbar---navbar-fixed-bottom---1XC9a{bottom:0;margin-bottom:0;border-width:1px 0 0}.navbar---navbar-default---3rqTh{background-color:#db3d44;border-color:#db3d44}@media (min-width:768px){.navbar---navbar-header---3Al_7{float:left}}.navbar---navbar-brand---1ATO3{float:left;padding:15px;font-size:18px;line-height:20px;height:50px}.navbar---navbar-brand---1ATO3:focus,.navbar---navbar-brand---1ATO3:hover{text-decoration:none}.navbar---navbar-brand---1ATO3>img{display:block}@media (min-width:768px){.navbar---navbar---2JqF->.navbar---container---3HwUr .navbar---navbar-brand---1ATO3,.navbar---navbar---2JqF->.navbar---container-fluid---2FU10 .navbar---navbar-brand---1ATO3{margin-left:-15px}}.navbar---navbar-toggle---19waF{position:relative;float:right;margin-right:15px;padding:9px 10px;margin-top:8px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}@media (min-width:768px){.navbar---navbar-toggle---19waF{display:none}}.navbar---navbar-toggle---19waF:focus{outline:0}.navbar---navbar-toggle---19waF .navbar---icon-bar---u1f02{display:block;width:22px;height:2px;border-radius:1px}.navbar---navbar-toggle---19waF .navbar---icon-bar---u1f02+.navbar---icon-bar---u1f02{margin-top:4px}.navbar---navbar-collapse---2bR5O{overflow-x:visible;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);-webkit-overflow-scrolling:touch}.navbar---navbar-collapse---2bR5O.navbar---in---1iDGq{overflow-y:auto}@media (min-width:768px){.navbar---navbar-collapse---2bR5O{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar---navbar-collapse---2bR5O.navbar---collapse---2uAfP{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar---navbar-collapse---2bR5O.navbar---in---1iDGq{overflow-y:visible}} -------------------------------------------------------------------------------- /docs/35071d00819547a959ef3450c129d77e.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trendmicro-frontend/react-navbar/0b61b2f0c7a268cc0def8bd28b919cc7ed7c85b6/docs/35071d00819547a959ef3450c129d77e.eot -------------------------------------------------------------------------------- /docs/37f4597594857b017901209aae0a60e1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/3eff5a4e9fb92ca96cbf2fa77649b8c1.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trendmicro-frontend/react-navbar/0b61b2f0c7a268cc0def8bd28b919cc7ed7c85b6/docs/3eff5a4e9fb92ca96cbf2fa77649b8c1.ttf -------------------------------------------------------------------------------- /docs/81436770636b45508203b3022075ae73.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trendmicro-frontend/react-navbar/0b61b2f0c7a268cc0def8bd28b919cc7ed7c85b6/docs/81436770636b45508203b3022075ae73.ttf -------------------------------------------------------------------------------- /docs/8854c448a7903a7159ef7743634bae8c.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs/8a53d21a4d9aa1aac2bf15093bd748c4.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trendmicro-frontend/react-navbar/0b61b2f0c7a268cc0def8bd28b919cc7ed7c85b6/docs/8a53d21a4d9aa1aac2bf15093bd748c4.woff -------------------------------------------------------------------------------- /docs/d6c7e9d3e5adb7a5261c5ad9f7d3caaa.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trendmicro-frontend/react-navbar/0b61b2f0c7a268cc0def8bd28b919cc7ed7c85b6/docs/d6c7e9d3e5adb7a5261c5ad9f7d3caaa.woff -------------------------------------------------------------------------------- /docs/d9c6d360d27eac625da0405245ec9f0d.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trendmicro-frontend/react-navbar/0b61b2f0c7a268cc0def8bd28b919cc7ed7c85b6/docs/d9c6d360d27eac625da0405245ec9f0d.eot -------------------------------------------------------------------------------- /docs/efe2a52b957d048ce7ae71931056eeee.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 15 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Navbar 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/.stylintrc: -------------------------------------------------------------------------------- 1 | // 2 | // https://github.com/rossPatton/stylint 3 | // 4 | { 5 | "blocks": false, 6 | "brackets": "always", 7 | "colons": "always", 8 | "colors": false, 9 | "commaSpace": "always", 10 | "commentSpace": false, 11 | "cssLiteral": "never", 12 | "depthLimit": false, 13 | "duplicates": false, 14 | "efficient": "always", 15 | "extendPref": false, 16 | "globalDupe": false, 17 | "indentPref": false, 18 | "leadingZero": "never", 19 | "maxErrors": false, 20 | "maxWarnings": false, 21 | "mixed": false, 22 | "namingConvention": false, 23 | "namingConventionStrict": false, 24 | "none": "never", 25 | "noImportant": false, 26 | "parenSpace": false, 27 | "placeholders": "always", 28 | "prefixVarsWithDollar": "always", 29 | "quotePref": false, 30 | "semicolons": "always", 31 | "sortOrder": false, 32 | "stackedProperties": "never", 33 | "trailingWhitespace": "never", 34 | "universal": false, 35 | "valid": true, 36 | "zeroUnits": "never", 37 | "zIndexNormalize": false 38 | } 39 | -------------------------------------------------------------------------------- /examples/HorizontalNavbar1.jsx: -------------------------------------------------------------------------------- 1 | import Anchor from '@trendmicro/react-anchor'; 2 | import PropTypes from 'prop-types'; 3 | import React from 'react'; 4 | import { StickyContainer, Sticky } from 'react-sticky'; 5 | import { Nav, NavDropdown, NavItem, MenuItem } from '@trendmicro/react-navs'; 6 | import Navbar from '../src'; 7 | import styles from './index.styl'; 8 | 9 | const PageContent = () => ( 10 |
18 |
19 |

Page Content

20 |
21 |
22 | ); 23 | 24 | const HorizontalNavbar = ({ state, actions }) => { 25 | return ( 26 | 27 |
28 | 29 | 30 |

Product Name

31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 | 118 | 119 | 120 | 121 | 122 | ); 123 | }; 124 | 125 | HorizontalNavbar.propTypes = { 126 | state: PropTypes.object, 127 | actions: PropTypes.object 128 | }; 129 | 130 | export default HorizontalNavbar; 131 | -------------------------------------------------------------------------------- /examples/HorizontalNavbar2.jsx: -------------------------------------------------------------------------------- 1 | import Anchor from '@trendmicro/react-anchor'; 2 | import PropTypes from 'prop-types'; 3 | import React from 'react'; 4 | import { StickyContainer, Sticky } from 'react-sticky'; 5 | import { Nav, NavDropdown, NavItem, MenuItem } from '@trendmicro/react-navs'; 6 | import Navbar from '../src'; 7 | import styles from './index.styl'; 8 | 9 | const PageContent = () => ( 10 |
18 |
19 |

Page Content

20 |
21 |
22 | ); 23 | 24 | const HorizontalNavbar = ({ state, actions }) => { 25 | return ( 26 | 27 |
28 | 29 | 30 |

Product Name

31 | 32 |
33 | 34 | 35 | 36 | 102 | 103 | 104 | 105 | 106 | ); 107 | }; 108 | 109 | HorizontalNavbar.propTypes = { 110 | state: PropTypes.object, 111 | actions: PropTypes.object 112 | }; 113 | 114 | export default HorizontalNavbar; 115 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Navbar 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/index.jsx: -------------------------------------------------------------------------------- 1 | import 'trendmicro-ui/dist/css/trendmicro-ui.css'; 2 | import '@trendmicro/react-buttons/dist/react-buttons.css'; 3 | import '@trendmicro/react-navs/dist/react-navs.css'; 4 | import '@trendmicro/react-dropdown/dist/react-dropdown.css'; 5 | import React from 'react'; 6 | import ReactDOM from 'react-dom'; 7 | import * as Layout from './layout'; 8 | import HorizontalNavbar1 from './HorizontalNavbar1'; 9 | import HorizontalNavbar2 from './HorizontalNavbar2'; 10 | 11 | class App extends React.Component { 12 | state = { 13 | tab: '' 14 | }; 15 | actions = { 16 | selectTab: (eventKey, event) => { 17 | if (!eventKey) { 18 | return; 19 | } 20 | 21 | const tab = eventKey.replace(/\..+/g, ''); 22 | this.setState({ tab }); 23 | } 24 | }; 25 | 26 | render() { 27 | const name = 'React Navbar'; 28 | const url = 'https://github.com/trendmicro-frontend/react-navbar'; 29 | 30 | return ( 31 |
32 | 33 |
34 |
35 |
36 | 37 |

Horizontal Navigation Bar #1

38 |

Do not use arrows if all nav dropdowns contain sub-items.

39 | 43 | 44 |
45 |
46 | 47 |

Horizontal Navigation Bar #2

48 |

Use arrows for the nav dropdown containing sub-items.

49 | 53 | 54 |
55 |
56 |
57 |
58 | ); 59 | } 60 | } 61 | 62 | ReactDOM.render( 63 | , 64 | document.getElementById('container') 65 | ); 66 | -------------------------------------------------------------------------------- /examples/index.styl: -------------------------------------------------------------------------------- 1 | @import "./site-header"; 2 | -------------------------------------------------------------------------------- /examples/layout/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import Anchor from '@trendmicro/react-anchor'; 2 | import { Button } from '@trendmicro/react-buttons'; 3 | import classNames from 'classnames'; 4 | import PropTypes from 'prop-types'; 5 | import React, { Component } from 'react'; 6 | import styles from './Navbar.styl'; 7 | 8 | export default class extends Component { 9 | static propTypes = { 10 | name: PropTypes.string, 11 | url: PropTypes.string 12 | }; 13 | 14 | state = { 15 | collapseIn: false 16 | }; 17 | 18 | render() { 19 | const { name, url } = this.props; 20 | 21 | return ( 22 | 62 | ); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /examples/layout/Navbar.styl: -------------------------------------------------------------------------------- 1 | .container-fluid { 2 | padding-right: 15px; 3 | padding-left: 15px; 4 | margin-right: auto; 5 | margin-left: auto; 6 | } 7 | .sr-only { 8 | position: absolute; 9 | width: 1px; 10 | height: 1px; 11 | padding: 0; 12 | margin: -1px; 13 | overflow: hidden; 14 | clip: rect(0, 0, 0, 0); 15 | border: 0; 16 | } 17 | .collapse { 18 | display: none; 19 | &.in { display: block; } 20 | tr&.in { display: table-row; } 21 | tbody&.in { display: table-row-group; } 22 | } 23 | .nav:before, 24 | .nav:after, 25 | .navbar:before, 26 | .navbar:after, 27 | .navbar-header:before, 28 | .navbar-header:after, 29 | .navbar-collapse:before, 30 | .navbar-collapse:after { 31 | display: table; 32 | content: ""; 33 | } 34 | .nav:after, 35 | .navbar:after, 36 | .navbar-header:after, 37 | .navbar-collapse:after { 38 | clear: both; 39 | } 40 | .nav { 41 | padding-left: 0; 42 | margin-bottom: 0; 43 | list-style: none; 44 | } 45 | .navbar { 46 | position: relative; 47 | min-height: 50px; 48 | border: 1px solid transparent; 49 | } 50 | @media (min-width: 768px) { 51 | .navbar { 52 | border-radius: 4px; 53 | } 54 | } 55 | @media (min-width: 768px) { 56 | .navbar-header { 57 | float: left; 58 | } 59 | } 60 | .navbar-collapse { 61 | padding-right: 15px; 62 | padding-left: 15px; 63 | overflow-x: visible; 64 | -webkit-overflow-scrolling: touch; 65 | border-top: 1px solid transparent; 66 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); 67 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); 68 | } 69 | .navbar-collapse.in { 70 | overflow-y: auto; 71 | } 72 | @media (min-width: 768px) { 73 | .navbar-collapse { 74 | width: auto; 75 | border-top: 0; 76 | -webkit-box-shadow: none; 77 | box-shadow: none; 78 | } 79 | .navbar-collapse.collapse { 80 | display: block !important; 81 | height: auto !important; 82 | padding-bottom: 0; 83 | overflow: visible !important; 84 | } 85 | .navbar-collapse.in { 86 | overflow-y: visible; 87 | } 88 | .navbar-fixed-top .navbar-collapse, 89 | .navbar-static-top .navbar-collapse, 90 | .navbar-fixed-bottom .navbar-collapse { 91 | padding-right: 0; 92 | padding-left: 0; 93 | } 94 | } 95 | .navbar-fixed-top .navbar-collapse, 96 | .navbar-fixed-bottom .navbar-collapse { 97 | max-height: 340px; 98 | } 99 | @media (max-device-width: 480px) and (orientation: landscape) { 100 | .navbar-fixed-top .navbar-collapse, 101 | .navbar-fixed-bottom .navbar-collapse { 102 | max-height: 200px; 103 | } 104 | } 105 | .container > .navbar-header, 106 | .container-fluid > .navbar-header, 107 | .container > .navbar-collapse, 108 | .container-fluid > .navbar-collapse { 109 | margin-right: -15px; 110 | margin-left: -15px; 111 | } 112 | @media (min-width: 768px) { 113 | .container > .navbar-header, 114 | .container-fluid > .navbar-header, 115 | .container > .navbar-collapse, 116 | .container-fluid > .navbar-collapse { 117 | margin-right: 0; 118 | margin-left: 0; 119 | } 120 | } 121 | .navbar-static-top { 122 | z-index: 1000; 123 | border-width: 0 0 1px; 124 | } 125 | @media (min-width: 768px) { 126 | .navbar-static-top { 127 | border-radius: 0; 128 | } 129 | } 130 | .navbar-fixed-top, 131 | .navbar-fixed-bottom { 132 | position: fixed; 133 | right: 0; 134 | left: 0; 135 | z-index: 1030; 136 | } 137 | @media (min-width: 768px) { 138 | .navbar-fixed-top, 139 | .navbar-fixed-bottom { 140 | border-radius: 0; 141 | } 142 | } 143 | .navbar-fixed-top { 144 | top: 0; 145 | border-width: 0 0 1px; 146 | } 147 | .navbar-fixed-bottom { 148 | bottom: 0; 149 | margin-bottom: 0; 150 | border-width: 1px 0 0; 151 | } 152 | .navbar-brand { 153 | float: left; 154 | height: 50px; 155 | padding: 15px 15px; 156 | font-size: 18px; 157 | line-height: 20px; 158 | } 159 | .navbar-brand, 160 | .navbar-brand:hover, 161 | .navbar-brand:focus { 162 | text-decoration: none; 163 | } 164 | .navbar-brand > img { 165 | display: block; 166 | } 167 | @media (min-width: 768px) { 168 | .navbar > .container .navbar-brand, 169 | .navbar > .container-fluid .navbar-brand { 170 | margin-left: -15px; 171 | } 172 | } 173 | .navbar-toggle { 174 | position: relative; 175 | float: right; 176 | padding: 9px 10px; 177 | margin-top: 8px; 178 | margin-right: 15px; 179 | margin-bottom: 8px; 180 | background-color: transparent; 181 | background-image: none; 182 | border: 1px solid transparent; 183 | border-radius: 4px; 184 | cursor: pointer; 185 | } 186 | .navbar-toggle:focus { 187 | outline: 0; 188 | } 189 | .navbar-toggle .icon-bar { 190 | display: block; 191 | width: 22px; 192 | height: 2px; 193 | border-radius: 1px; 194 | } 195 | .navbar-toggle .icon-bar + .icon-bar { 196 | margin-top: 4px; 197 | } 198 | @media (min-width: 768px) { 199 | .navbar-toggle { 200 | display: none; 201 | } 202 | } 203 | .navbar-nav { 204 | margin: 7.5px -15px; 205 | } 206 | .navbar-nav > li > a { 207 | padding-top: 10px; 208 | padding-bottom: 10px; 209 | line-height: 20px; 210 | } 211 | @media (max-width: 767px) { 212 | .navbar-nav .open .dropdown-menu { 213 | position: static; 214 | float: none; 215 | width: auto; 216 | margin-top: 0; 217 | background-color: transparent; 218 | border: 0; 219 | -webkit-box-shadow: none; 220 | box-shadow: none; 221 | } 222 | .navbar-nav .open .dropdown-menu > li > a, 223 | .navbar-nav .open .dropdown-menu .dropdown-header { 224 | padding: 5px 15px 5px 25px; 225 | } 226 | .navbar-nav .open .dropdown-menu > li > a { 227 | line-height: 20px; 228 | } 229 | .navbar-nav .open .dropdown-menu > li > a:hover, 230 | .navbar-nav .open .dropdown-menu > li > a:focus { 231 | background-image: none; 232 | } 233 | } 234 | @media (min-width: 768px) { 235 | .navbar-nav { 236 | float: left; 237 | margin: 0; 238 | } 239 | .navbar-nav > li { 240 | float: left; 241 | } 242 | .navbar-nav > li > a { 243 | padding-top: 15px; 244 | padding-bottom: 15px; 245 | } 246 | } 247 | .navbar-form { 248 | padding: 10px 15px; 249 | margin-top: 8px; 250 | margin-right: -15px; 251 | margin-bottom: 8px; 252 | margin-left: -15px; 253 | border-top: 1px solid transparent; 254 | border-bottom: 1px solid transparent; 255 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); 256 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); 257 | } 258 | @media (min-width: 768px) { 259 | .navbar-form .form-group { 260 | display: inline-block; 261 | margin-bottom: 0; 262 | vertical-align: middle; 263 | } 264 | .navbar-form .form-control { 265 | display: inline-block; 266 | width: auto; 267 | vertical-align: middle; 268 | } 269 | .navbar-form .form-control-static { 270 | display: inline-block; 271 | } 272 | .navbar-form .input-group { 273 | display: inline-table; 274 | vertical-align: middle; 275 | } 276 | .navbar-form .input-group .input-group-addon, 277 | .navbar-form .input-group .input-group-btn, 278 | .navbar-form .input-group .form-control { 279 | width: auto; 280 | } 281 | .navbar-form .input-group > .form-control { 282 | width: 100%; 283 | } 284 | .navbar-form .control-label { 285 | margin-bottom: 0; 286 | vertical-align: middle; 287 | } 288 | .navbar-form .radio, 289 | .navbar-form .checkbox { 290 | display: inline-block; 291 | margin-top: 0; 292 | margin-bottom: 0; 293 | vertical-align: middle; 294 | } 295 | .navbar-form .radio label, 296 | .navbar-form .checkbox label { 297 | padding-left: 0; 298 | } 299 | .navbar-form .radio input[type="radio"], 300 | .navbar-form .checkbox input[type="checkbox"] { 301 | position: relative; 302 | margin-left: 0; 303 | } 304 | .navbar-form .has-feedback .form-control-feedback { 305 | top: 0; 306 | } 307 | } 308 | @media (max-width: 767px) { 309 | .navbar-form .form-group { 310 | margin-bottom: 5px; 311 | } 312 | .navbar-form .form-group:last-child { 313 | margin-bottom: 0; 314 | } 315 | } 316 | @media (min-width: 768px) { 317 | .navbar-form { 318 | width: auto; 319 | padding-top: 0; 320 | padding-bottom: 0; 321 | margin-right: 0; 322 | margin-left: 0; 323 | border: 0; 324 | -webkit-box-shadow: none; 325 | box-shadow: none; 326 | } 327 | } 328 | .navbar-nav > li > .dropdown-menu { 329 | margin-top: 0; 330 | border-top-left-radius: 0; 331 | border-top-right-radius: 0; 332 | } 333 | .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { 334 | margin-bottom: 0; 335 | border-top-left-radius: 4px; 336 | border-top-right-radius: 4px; 337 | border-bottom-right-radius: 0; 338 | border-bottom-left-radius: 0; 339 | } 340 | .navbar-btn { 341 | margin-top: 8px; 342 | margin-bottom: 8px; 343 | } 344 | .navbar-btn.btn-sm { 345 | margin-top: 10px; 346 | margin-bottom: 10px; 347 | } 348 | .navbar-btn.btn-xs { 349 | margin-top: 14px; 350 | margin-bottom: 14px; 351 | } 352 | .navbar-text { 353 | margin-top: 15px; 354 | margin-bottom: 15px; 355 | } 356 | @media (min-width: 768px) { 357 | .navbar-text { 358 | float: left; 359 | margin-right: 15px; 360 | margin-left: 15px; 361 | } 362 | } 363 | @media (min-width: 768px) { 364 | .navbar-left { 365 | float: left !important; 366 | } 367 | .navbar-right { 368 | float: right !important; 369 | margin-right: -15px; 370 | } 371 | .navbar-right ~ .navbar-right { 372 | margin-right: 0; 373 | } 374 | } 375 | .navbar-default { 376 | background-color: #f8f8f8; 377 | border-color: #e7e7e7; 378 | } 379 | .navbar-default .navbar-brand { 380 | color: #777; 381 | } 382 | .navbar-default .navbar-brand:hover, 383 | .navbar-default .navbar-brand:focus { 384 | color: #5e5e5e; 385 | background-color: transparent; 386 | } 387 | .navbar-default .navbar-text { 388 | color: #777; 389 | } 390 | .navbar-default .navbar-nav > li > a { 391 | color: #777; 392 | } 393 | .navbar-default .navbar-nav > li > a:hover, 394 | .navbar-default .navbar-nav > li > a:focus { 395 | color: #333; 396 | background-color: transparent; 397 | } 398 | .navbar-default .navbar-nav > .active > a, 399 | .navbar-default .navbar-nav > .active > a:hover, 400 | .navbar-default .navbar-nav > .active > a:focus { 401 | color: #555; 402 | background-color: #e7e7e7; 403 | } 404 | .navbar-default .navbar-nav > .disabled > a, 405 | .navbar-default .navbar-nav > .disabled > a:hover, 406 | .navbar-default .navbar-nav > .disabled > a:focus { 407 | color: #ccc; 408 | background-color: transparent; 409 | } 410 | .navbar-default .navbar-toggle { 411 | border-color: #ddd; 412 | } 413 | .navbar-default .navbar-toggle:hover, 414 | .navbar-default .navbar-toggle:focus { 415 | background-color: #ddd; 416 | } 417 | .navbar-default .navbar-toggle .icon-bar { 418 | background-color: #888; 419 | } 420 | .navbar-default .navbar-collapse, 421 | .navbar-default .navbar-form { 422 | border-color: #e7e7e7; 423 | } 424 | .navbar-default .navbar-nav > .open > a, 425 | .navbar-default .navbar-nav > .open > a:hover, 426 | .navbar-default .navbar-nav > .open > a:focus { 427 | color: #555; 428 | background-color: #e7e7e7; 429 | } 430 | @media (max-width: 767px) { 431 | .navbar-default .navbar-nav .open .dropdown-menu > li > a { 432 | color: #777; 433 | } 434 | .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 435 | .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 436 | color: #333; 437 | background-color: transparent; 438 | } 439 | .navbar-default .navbar-nav .open .dropdown-menu > .active > a, 440 | .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, 441 | .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { 442 | color: #555; 443 | background-color: #e7e7e7; 444 | } 445 | .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, 446 | .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, 447 | .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { 448 | color: #ccc; 449 | background-color: transparent; 450 | } 451 | } 452 | .navbar-default .navbar-link { 453 | color: #777; 454 | } 455 | .navbar-default .navbar-link:hover { 456 | color: #333; 457 | } 458 | .navbar-default .btn-link { 459 | color: #777; 460 | } 461 | .navbar-default .btn-link:hover, 462 | .navbar-default .btn-link:focus { 463 | color: #333; 464 | } 465 | -------------------------------------------------------------------------------- /examples/layout/Section.jsx: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames'; 2 | import React from 'react'; 3 | import styles from './Section.styl'; 4 | 5 | export default (props) => ( 6 |
7 |
8 | {props.children} 9 |
10 |
11 | ); 12 | -------------------------------------------------------------------------------- /examples/layout/Section.styl: -------------------------------------------------------------------------------- 1 | .section { 2 | background: #fff; 3 | border: 1px solid #d6d6d6; 4 | position: relative; 5 | z-index: 1; 6 | transition: height .3s ease; 7 | } 8 | .section:last-child { 9 | margin-bottom: 20px; 10 | } 11 | .section-content { 12 | padding: 0 16px 16px; 13 | position: absolute; 14 | top: 0; 15 | bottom: 0; 16 | left: 0; 17 | right: 0; 18 | } 19 | @media screen and (max-width: 1023px) { 20 | .section-content { 21 | position: static; 22 | height: 100%; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/layout/index.js: -------------------------------------------------------------------------------- 1 | export Navbar from './Navbar'; 2 | export Section from './Section'; 3 | -------------------------------------------------------------------------------- /examples/site-header.styl: -------------------------------------------------------------------------------- 1 | .site-header { 2 | position: relative; 3 | padding: 0 20px; 4 | height: 64px; 5 | margin-bottom: 0; 6 | background-color: #fff; 7 | 8 | a:link, 9 | a:hover, 10 | a:active, 11 | a:visited, 12 | a:focus { 13 | color: #222; 14 | text-decoration: none; 15 | } 16 | 17 | .banner { 18 | width: 32px; 19 | height: 32px; 20 | margin: 16px 0; 21 | margin-right: 10px; 22 | background: url("./tball.svg") center left no-repeat; 23 | float: left; 24 | } 25 | .title { 26 | padding: 16px 0; 27 | font-family: "Interstate-Light", Arial, "Helvetica Neue", Helvetica, sans-serif; 28 | font-size: 26px; 29 | font-weight: 200; 30 | letter-spacing: -.03em; 31 | white-space: nowrap; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /examples/tball.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 15 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /examples/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const stylusLoader = require('stylus-loader'); 5 | const nib = require('nib'); 6 | 7 | module.exports = { 8 | devtool: 'source-map', 9 | entry: path.resolve(__dirname, 'index.jsx'), 10 | output: { 11 | path: path.join(__dirname, '../docs'), 12 | filename: 'bundle.js?[hash]' 13 | }, 14 | module: { 15 | rules: [ 16 | // http://survivejs.com/webpack_react/linting_in_webpack/ 17 | { 18 | test: /\.jsx?$/, 19 | loader: 'eslint-loader', 20 | enforce: 'pre', 21 | exclude: /node_modules/ 22 | }, 23 | { 24 | test: /\.styl$/, 25 | loader: 'stylint-loader', 26 | enforce: 'pre' 27 | }, 28 | { 29 | test: /\.jsx?$/, 30 | loader: 'babel-loader', 31 | exclude: /(node_modules|bower_components)/ 32 | }, 33 | { 34 | test: /\.styl$/, 35 | use: [ 36 | 'style-loader', 37 | 'css-loader?camelCase&modules&importLoaders=1&localIdentName=[local]---[hash:base64:5]', 38 | 'stylus-loader' 39 | ] 40 | }, 41 | { 42 | test: /\.css$/, 43 | loader: 'style-loader!css-loader' 44 | }, 45 | { 46 | test: /\.(png|jpg)$/, 47 | loader: 'url-loader', 48 | options: { 49 | limit: 8192 50 | } 51 | }, 52 | { 53 | test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 54 | loader: 'url-loader', 55 | options: { 56 | limit: 10000, 57 | mimetype: 'application/font-woff' 58 | } 59 | }, 60 | { 61 | test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 62 | loader: 'file-loader' 63 | } 64 | ] 65 | }, 66 | plugins: [ 67 | new webpack.LoaderOptionsPlugin({ 68 | debug: true 69 | }), 70 | new webpack.NamedModulesPlugin(), 71 | new webpack.NoEmitOnErrorsPlugin(), 72 | new stylusLoader.OptionsPlugin({ 73 | default: { 74 | // nib - CSS3 extensions for Stylus 75 | use: [nib()], 76 | // no need to have a '@import "nib"' in the stylesheet 77 | import: ['~nib/lib/nib/index.styl'] 78 | } 79 | }), 80 | new HtmlWebpackPlugin({ 81 | filename: '../docs/index.html', 82 | template: 'index.html' 83 | }) 84 | ], 85 | resolve: { 86 | extensions: ['.js', '.json', '.jsx'] 87 | }, 88 | // https://webpack.github.io/docs/webpack-dev-server.html#additional-configuration-options 89 | devServer: { 90 | disableHostCheck: true, 91 | noInfo: false, 92 | lazy: false, 93 | // https://webpack.github.io/docs/node.js-api.html#compiler 94 | watchOptions: { 95 | poll: true, // use polling instead of native watchers 96 | ignored: /node_modules/ 97 | } 98 | } 99 | }; 100 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@trendmicro/react-navbar", 3 | "version": "0.3.0", 4 | "description": "Trend Micro Components: React Navbar", 5 | "main": "lib/index.js", 6 | "files": [ 7 | "dist", 8 | "lib" 9 | ], 10 | "scripts": { 11 | "prepublish": "npm run eslint && npm test && npm run clean && npm run bowersync && npm run build && npm run build-examples", 12 | "bowersync": "./scripts/bowersync", 13 | "build": "webpack && npm run cleancss", 14 | "build-examples": "cd examples; webpack", 15 | "clean": "rm -f {lib,dist}/*", 16 | "cleancss": "cleancss -o dist/react-navbar.min.css dist/react-navbar.css", 17 | "demo": "http-server -p 8000 docs/", 18 | "eslint": "eslint --ext .js --ext .jsx examples src test", 19 | "test": "tap test/*.js --node-arg=--require --node-arg=babel-register --node-arg=--require --node-arg=babel-polyfill", 20 | "coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=babel-register --nyc-arg=--require --nyc-arg=babel-polyfill | coveralls", 21 | "dev": "cd examples; webpack-dev-server --hot --inline --host 0.0.0.0 --port 8000 --content-base ../docs" 22 | }, 23 | "repository": { 24 | "type": "git", 25 | "url": "git+https://github.com/trendmicro-frontend/react-navbar.git" 26 | }, 27 | "author": "Cheton Wu", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/trendmicro-frontend/react-navbar/issues" 31 | }, 32 | "homepage": "https://github.com/trendmicro-frontend/react-navbar", 33 | "keywords": [ 34 | "react", 35 | "react-navbar", 36 | "navbar", 37 | "sticky" 38 | ], 39 | "peerDependencies": { 40 | "react": "^0.14.0 || >=15.0.0" 41 | }, 42 | "dependencies": { 43 | "@trendmicro/react-navs": "^0.11.0", 44 | "chained-function": "^0.5.0", 45 | "classnames": "^2.2.5", 46 | "prop-types": "^15.6.0", 47 | "uncontrollable": "^5.0.0" 48 | }, 49 | "devDependencies": { 50 | "@trendmicro/react-anchor": "~0.5.6", 51 | "@trendmicro/react-buttons": "~1.3.0", 52 | "@trendmicro/react-dropdown": "~1.1.0", 53 | "babel-cli": "~6.26.0", 54 | "babel-core": "~6.26.0", 55 | "babel-eslint": "~8.2.1", 56 | "babel-loader": "~7.1.2", 57 | "babel-plugin-transform-decorators-legacy": "~1.3.4", 58 | "babel-preset-es2015": "~6.24.1", 59 | "babel-preset-react": "~6.24.1", 60 | "babel-preset-stage-0": "~6.24.1", 61 | "clean-css": "~4.1.9", 62 | "clean-css-cli": "~4.1.10", 63 | "coveralls": "~3.0.0", 64 | "css-loader": "~0.28.9", 65 | "eslint": "~4.17.0", 66 | "eslint-config-trendmicro": "~1.3.0", 67 | "eslint-loader": "~1.9.0", 68 | "eslint-plugin-import": "~2.8.0", 69 | "eslint-plugin-jsx-a11y": "~6.0.3", 70 | "eslint-plugin-react": "~7.6.1", 71 | "extract-text-webpack-plugin": "~3.0.2", 72 | "file-loader": "~1.1.6", 73 | "find-imports": "~0.5.2", 74 | "html-webpack-plugin": "~2.30.1", 75 | "http-server": "~0.11.1", 76 | "nib": "~1.1.2", 77 | "react": "^0.14.0 || >=15.0.0", 78 | "react-dom": "^0.14.0 || >=15.0.0", 79 | "react-sticky": "~5.0.8", 80 | "style-loader": "~0.20.1", 81 | "stylint": "~1.5.9", 82 | "stylint-loader": "~1.0.0", 83 | "stylus-loader": "~3.0.1", 84 | "tap": "~11.1.0", 85 | "trendmicro-ui": "~0.5.1", 86 | "url-loader": "~0.6.2", 87 | "webpack": "~3.10.0", 88 | "webpack-dev-server": "~2.11.1", 89 | "which": "~1.3.0" 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /scripts/bowersync: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | var fs = require('fs'); 4 | var path = require('path'); 5 | var pkg = require('../package.json'); 6 | var bower = require('../bower.json'); 7 | 8 | // Update bower.json 9 | Object.keys(bower).forEach((key) => { 10 | bower[key] = pkg[key] || bower[key]; 11 | }); 12 | bower.authors = pkg.contributors.map(author => { 13 | return { 14 | name: author.name, 15 | email: author.email, 16 | homepage: author.url 17 | }; 18 | }); 19 | 20 | var content = JSON.stringify(bower, null, 2); 21 | fs.writeFileSync(path.join(__dirname, '../bower.json'), content + '\n', 'utf8'); 22 | -------------------------------------------------------------------------------- /src/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames'; 2 | import PropTypes from 'prop-types'; 3 | import React, { PureComponent } from 'react'; 4 | import uncontrollable from 'uncontrollable'; 5 | import NavbarBrand from './NavbarBrand'; 6 | import NavbarHeader from './NavbarHeader'; 7 | import NavbarToggle from './NavbarToggle'; 8 | import styles from './index.styl'; 9 | 10 | class Navbar extends PureComponent { 11 | static propTypes = { 12 | // Set a custom element for this component. 13 | componentClass: PropTypes.oneOfType([ 14 | PropTypes.string, 15 | PropTypes.func 16 | ]), 17 | 18 | // Create a fixed navbar along the top of the screen, that scrolls with the page. 19 | fixedTop: PropTypes.bool, 20 | 21 | // Create a fixed navbar along the bottom of the screen, that scrolls with the page. 22 | fixedBottom: PropTypes.bool, 23 | 24 | // Explicitly set the visibility of the navbar body. 25 | expanded: PropTypes.bool, 26 | 27 | // A callback fired when a descendant of a child `