2020-1-CloudComputing-E / E_Team_KhuBox

Go to a project
Toggle navigation Toggle navigation pinning
Woojin Lee
8a1f4d1d 1 parent 85c642b8

Add navigation bar

Inline Side-by-side
Showing 3 changed files with 20 additions and 25 deletions
...@@ -24,7 +24,11 @@ ...@@ -24,7 +24,11 @@
24 work correctly both with client-side routing and a non-root public URL. 24 work correctly both with client-side routing and a non-root public URL.
25 Learn how to configure a non-root public URL by running `npm run build`. 25 Learn how to configure a non-root public URL by running `npm run build`.
26 --> 26 -->
27 - <title>React App</title> 27 +
28 + <!-- Bootstrap CSS -->
29 + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
30 +
31 + <title>Khubox</title>
28 </head> 32 </head>
29 <body> 33 <body>
30 <noscript>You need to enable JavaScript to run this app.</noscript> 34 <noscript>You need to enable JavaScript to run this app.</noscript>
......
1 import React from 'react'; 1 import React from 'react';
2 -import logo from './logo.svg'; 2 +
3 -import './App.css'; 3 +const NavBar = () => {
4 + return (
5 + <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
6 + <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Khubox</a>
7 + <ul class="navbar-nav px-3">
8 + <li class="nav-item text-nowrap">
9 + <a class="nav-link" href="#">Sign out</a>
10 + </li>
11 + </ul>
12 + </nav>
13 + );
14 +}
4 15
5 function App() { 16 function App() {
6 return ( 17 return (
7 <div className="App"> 18 <div className="App">
8 - <header className="App-header"> 19 + <NavBar />
9 - <img src={logo} className="App-logo" alt="logo" />
10 - <p>
11 - Edit <code>src/App.js</code> and save to reload.
12 - </p>
13 - <a
14 - className="App-link"
15 - href="https://reactjs.org"
16 - target="_blank"
17 - rel="noopener noreferrer"
18 - >
19 - Learn React
20 - </a>
21 - </header>
22 </div> 20 </div>
23 ); 21 );
24 } 22 }
......
...@@ -5,13 +5,6 @@ import App from './App'; ...@@ -5,13 +5,6 @@ import App from './App';
5 import * as serviceWorker from './serviceWorker'; 5 import * as serviceWorker from './serviceWorker';
6 6
7 ReactDOM.render( 7 ReactDOM.render(
8 - <React.StrictMode> 8 + <App />,
9 - <App />
10 - </React.StrictMode>,
11 document.getElementById('root') 9 document.getElementById('root')
12 ); 10 );
13 -
14 -// If you want your app to work offline and load faster, you can change
15 -// unregister() to register() below. Note this comes with some pitfalls.
16 -// Learn more about service workers: https://bit.ly/CRA-PWA
17 -serviceWorker.unregister();
......