Extract Navbar component from App component

Change-Id: Ie2fa04dd6326dba736341b7baf51f17e04984254
This commit is contained in:
Guillaume Vincent 2018-04-23 16:38:06 +02:00
parent 72e86499e7
commit fc81f257d6
3 changed files with 85 additions and 79 deletions

View File

@ -1,87 +1,13 @@
import React, { Component } from "react";
import logo from "./logo.svg";
import { version } from "../package.json";
import React from "react";
import "./App.css";
import Navbar from "./components/Header/Navbar";
class App extends Component {
class App extends React.Component {
render() {
return (
<div className="App">
<nav className="navbar navbar-default navbar-pf">
<div className="navbar-header">
<button
type="button"
className="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse-1"
>
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar" />
<span className="icon-bar" />
<span className="icon-bar" />
</button>
<a className="navbar-brand" href="/reports/">
<img
src={logo}
alt="ARA: Ansible Run Analysis"
width="81"
height="32"
/>
</a>
</div>
<div className="collapse navbar-collapse navbar-collapse-1">
<ul className="nav navbar-nav navbar-utility">
<li>
<a
href="https://ara.readthedocs.io/en/latest/"
target="_blank"
rel="noopener noreferrer"
>
Documentation
</a>
</li>
<li>
<a
href="https://github.com/openstack/ara"
target="_blank"
rel="noopener noreferrer"
>
<strong>ARA</strong> {version}
</a>
</li>
<li>
<a
href="https://www.ansible.com/"
target="_blank"
rel="noopener noreferrer"
>
<strong>Ansible</strong> 2.3.1.0
</a>
</li>
<li>
<a
href="https://www.python.org/"
target="_blank"
rel="noopener noreferrer"
>
<strong>Python</strong> 2.7
</a>
</li>
</ul>
<ul className="nav navbar-nav navbar-primary">
<li className="active">
<a href="/reports/">Playbook reports</a>
</li>
<li>
<a href="/about/">About</a>
</li>
</ul>
</div>
</nav>
<p className="App-intro">
...
</p>
<Navbar />
<p className="App-intro">...</p>
</div>
);
}

View File

@ -0,0 +1,80 @@
import React from "react";
import logo from "./logo.svg";
export default class Navbar extends React.Component {
render() {
return (
<nav className="navbar navbar-default navbar-pf">
<div className="navbar-header">
<button
type="button"
className="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse-1"
>
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar" />
<span className="icon-bar" />
<span className="icon-bar" />
</button>
<a className="navbar-brand" href="/reports/">
<img
src={logo}
alt="ARA: Ansible Run Analysis"
width="81"
height="32"
/>
</a>
</div>
<div className="collapse navbar-collapse navbar-collapse-1">
<ul className="nav navbar-nav navbar-utility">
<li>
<a
href="https://ara.readthedocs.io/en/latest/"
target="_blank"
rel="noopener noreferrer"
>
Documentation
</a>
</li>
<li>
<a
href="https://github.com/openstack/ara"
target="_blank"
rel="noopener noreferrer"
>
<strong>ARA</strong> 1.0.0
</a>
</li>
<li>
<a
href="https://www.ansible.com/"
target="_blank"
rel="noopener noreferrer"
>
<strong>Ansible</strong> 2.3.1.0
</a>
</li>
<li>
<a
href="https://www.python.org/"
target="_blank"
rel="noopener noreferrer"
>
<strong>Python</strong> 2.7
</a>
</li>
</ul>
<ul className="nav navbar-nav navbar-primary">
<li className="active">
<a href="/reports/">Playbook reports</a>
</li>
<li>
<a href="/about/">About</a>
</li>
</ul>
</div>
</nav>
);
}
}

View File

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB