Update examples

trendmicro-frontend · Jun 12, 2018 · 988a70f · 988a70f
1 parent 49c8c31
commit 988a70f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/examples/Default/index.jsx b/examples/Default/index.jsx
@@ -1,4 +1,6 @@
 import Breadcrumbs from '@trendmicro/react-breadcrumbs';
+import { Button, ButtonGroup } from '@trendmicro/react-buttons';
+import Dropdown, { MenuItem } from '@trendmicro/react-dropdown';
 import ensureArray from 'ensure-array';
 import React, { PureComponent } from 'react';
 import styled from 'styled-components';
@@ -29,7 +31,7 @@ export default class extends PureComponent {
         'home': 'Home',
         'devices': ['Devices'],
         'reports': ['Reports'],
-        'settings/policy': ['Settings', 'Policy'],
+        'settings/policies': ['Settings', 'Policies'],
         'settings/network': ['Settings', 'Network']
     };
 
@@ -50,14 +52,50 @@ export default class extends PureComponent {
             </Breadcrumbs>
         );
     }
+
+    navigate = (pathname) => () => {
+        this.setState({ selected: pathname });
+    };
+
     render() {
         const { expanded, selected } = this.state;
 
         return (
             <div>
+                <div
+                    style={{
+                        marginLeft: expanded ? 240 : 64,
+                        padding: '15px 20px 0 20px'
+                    }}
+                >
+                    <ButtonGroup>
+                        <Button btnStyle="flat" onClick={this.navigate('home')}>
+                            Home
+                        </Button>
+                        <Button btnStyle="flat" onClick={this.navigate('devices')}>
+                            Devices
+                        </Button>
+                        <Button btnStyle="flat" onClick={this.navigate('reports')}>
+                            Reports
+                        </Button>
+                        <Dropdown>
+                            <Dropdown.Toggle>
+                                Settings
+                            </Dropdown.Toggle>
+                            <Dropdown.Menu>
+                                <MenuItem onClick={this.navigate('settings/policies')}>
+                                    Policies
+                                </MenuItem>
+                                <MenuItem onClick={this.navigate('settings/network')}>
+                                    Network
+                                </MenuItem>
+                            </Dropdown.Menu>
+                        </Dropdown>
+                    </ButtonGroup>
+                </div>
                 <SideNav onSelect={this.onSelect} onToggle={this.onToggle}>
                     <SideNav.Toggle />
-                    <SideNav.Nav defaultSelected={selected}>
+                    <SideNav.Nav selected={selected}>
                         <NavItem eventKey="home">
                             <NavIcon>
                                 <i className="fa fa-fw fa-home" style={{ fontSize: '1.75em', verticalAlign: 'middle' }} />
@@ -89,7 +127,7 @@ export default class extends PureComponent {
                             <NavText style={{ paddingRight: 32 }} title="Settings">
                                 Settings
                             </NavText>
-                            <NavItem eventKey="settings/policy">
+                            <NavItem eventKey="settings/policies">
                                 <NavText title="Policies">
                                     Policies
                                 </NavText>

diff --git a/examples/index.jsx b/examples/index.jsx
@@ -1,6 +1,7 @@
 import 'trendmicro-ui/dist/css/trendmicro-ui.css';
-import '@trendmicro/react-buttons/dist/react-buttons.css';
 import '@trendmicro/react-breadcrumbs/dist/react-breadcrumbs.css';
+import '@trendmicro/react-buttons/dist/react-buttons.css';
+import '@trendmicro/react-dropdown/dist/react-dropdown.css';
 import { Button } from '@trendmicro/react-buttons';
 import React from 'react';
 import ReactDOM from 'react-dom';