Extract Navbar component from App component
Change-Id: Ie2fa04dd6326dba736341b7baf51f17e04984254
This commit is contained in:
parent
72e86499e7
commit
fc81f257d6
84
src/App.js
84
src/App.js
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 6.9 KiB |
Loading…
Reference in New Issue