Skip to content
This repository was archived by the owner on Feb 5, 2025. It is now read-only.

add custom masthead #36

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add custom masthead #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"classnames": "^2.2.5",
"lodash.orderby": "^4.6.0",
"numeral": "^2.0.6",
"patternfly-react": "^2.10.1",
"patternfly-react": "^2.11.1",
"prop-types": "^15.6.2",
"react": "^16.4.0",
"react-dom": "^16.4.0",
Expand Down
87 changes: 43 additions & 44 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,7 @@ import {
VerticalNav,
VerticalNavItem,
VerticalNavSecondaryItem,
VerticalNavMasthead,
VerticalNavBrand,
VerticalNavIconBar,
Dropdown,
Masthead,
Icon,
MenuItem
} from 'patternfly-react';
Expand All @@ -19,6 +16,10 @@ import { routes } from './routes';
import './App.css';

class App extends React.Component {
state = {
collapse: false
};

constructor() {
super();

Expand Down Expand Up @@ -63,6 +64,10 @@ class App extends React.Component {
);
};

onCollapse = () => {
this.setState({ collapse: !this.state.collapse });
};

navigateTo = path => {
const { history } = this.props;
history.push(path);
Expand Down Expand Up @@ -95,49 +100,43 @@ class App extends React.Component {
</VerticalNavItem>
));

const dropdownComponentClass = props => (
<li className={props.className}>{props.children}</li>
);

return (
<React.Fragment>
<VerticalNav persistentSecondary={false}>
<VerticalNavMasthead>
<VerticalNavBrand titleImg={pfBrand} iconImg={pfLogo} />
<VerticalNavIconBar>
<Dropdown componentClass={dropdownComponentClass} id="help">
<Dropdown.Toggle
className="nav-item-iconic"
bsStyle="link"
noCaret
>
<Icon type="pf" name="help" />
</Dropdown.Toggle>
<Dropdown.Menu>
<MenuItem eventKey="1">Help</MenuItem>
<MenuItem eventKey="2">About</MenuItem>
</Dropdown.Menu>
</Dropdown>
<Dropdown componentClass={dropdownComponentClass} id="user">
<Dropdown.Toggle className="nav-item-iconic" bsStyle="link">
<Icon type="pf" name="user" />{' '}
<span className="dropdown-title">Brian Johnson</span>
</Dropdown.Toggle>
<Dropdown.Menu>
<MenuItem eventKey="1">Preferences</MenuItem>
<MenuItem eventKey="2">Logout</MenuItem>
</Dropdown.Menu>
</Dropdown>
</VerticalNavIconBar>
</VerticalNavMasthead>
<Masthead
iconImg={pfLogo}
titleImg={pfBrand}
title="PatternFly React Demo App"
onNavToggleClick={() => this.onCollapse()}
>
<Masthead.Collapse>
<Masthead.Dropdown
id="app-help-dropdown"
noCaret
title={<span title="Help" className="pficon pficon-help" />}
>
<MenuItem eventKey="1">Help</MenuItem>
<MenuItem eventKey="2">About</MenuItem>
</Masthead.Dropdown>
<Masthead.Dropdown
id="app-user-dropdown"
title={[
<Icon type="pf" name="user" key="user-icon" />,
<span className="dropdown-title" key="dropdown-title">
Brian Johnson
</span>
]}
>
<MenuItem eventKey="1">User Preferences</MenuItem>
<MenuItem eventKey="2">Logout</MenuItem>
</Masthead.Dropdown>
</Masthead.Collapse>
</Masthead>
<VerticalNav
persistentSecondary={false}
hideMasthead
navCollapsed={this.state.collapse}
>
{vertNavItems}
{/* <VerticalNavItem
key="abc"
title="Ipsum"
iconClass="fa fa-dashboard"
active
onClick={() => this.navigateTo('/')}
/> */}
</VerticalNav>
{this.renderContent()}
</React.Fragment>
Expand Down
10 changes: 5 additions & 5 deletions src/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ $icon-font-path: './fonts/';
margin-bottom: 10px;
}

.navbar-pf-vertical {
.nav .nav-item-iconic > .pficon-user {
padding-right: 7px;
}
}
// .navbar-pf-vertical {
// .nav .nav-item-iconic > .pficon-user {
// padding-right: 7px;
// }
// }

a:hover,
a:focus {
Expand Down
14 changes: 7 additions & 7 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6151,15 +6151,15 @@ patternfly-bootstrap-treeview@~2.1.0:
bootstrap "3.3.x"
jquery ">= 2.1.x"

patternfly-react@^2.10.1:
version "2.10.1"
resolved "https://registry.yarnpkg.com/patternfly-react/-/patternfly-react-2.10.1.tgz#eb1cfd0e32a4b956d8ac238ec12415db9b63625a"
patternfly-react@^2.11.1:
version "2.11.1"
resolved "https://registry.yarnpkg.com/patternfly-react/-/patternfly-react-2.11.1.tgz#5b0c23d5a289de4a6b7e658fc8d04bb252e8d32b"
dependencies:
bootstrap-slider-without-jquery "^10.0.0"
breakjs "^1.0.0"
classnames "^2.2.5"
css-element-queries "^1.0.1"
patternfly "^3.51.0"
patternfly "^3.52.1"
react-bootstrap "^0.32.1"
react-bootstrap-switch "^15.5.3"
react-bootstrap-typeahead "^3.1.3"
Expand All @@ -6172,9 +6172,9 @@ patternfly-react@^2.10.1:
sortabular "^1.5.1"
table-resolver "^3.2.0"

patternfly@^3.51.0:
version "3.51.1"
resolved "https://registry.yarnpkg.com/patternfly/-/patternfly-3.51.1.tgz#675727a81c78a40931208d2de94f14a6b0f1af2a"
patternfly@^3.52.1:
version "3.52.1"
resolved "https://registry.yarnpkg.com/patternfly/-/patternfly-3.52.1.tgz#0c6f067ec987f4f16b93acb54e8f7de02300eead"
dependencies:
bootstrap "~3.3.7"
font-awesome "^4.7.0"
Expand Down