Merge pull request #27 from Yothu/feature/add-header-with-empty-nav

Add header with empty nav
Yothu · Mar 1, 2022 · e3bd044 · e3bd044
2 parents c77d65e + c963030
commit e3bd044
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 5 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Space Travelers' Hub</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,8 @@
+import Header from './components/Header';
+
 function App() {
   return (
-    <div className="App" />
+    <Header />
   );
 }
 

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import pageLogo from '../assets/images/planet.png';
+
+const Container = styled.header`
+  display: flex;
+  padding: 1rem;
+  border-bottom: 2px solid black;
+`;
+
+const PageInfo = styled.div`
+  display: flex;
+`;
+
+const LogoStyle = {
+  height: '4.8rem',
+  width: '4.8rem',
+};
+
+const Header = () => {
+  const PageLogo = () => <img src={pageLogo} style={LogoStyle} alt="page-logo" />;
+  const title = 'Space Travelers\' Hub';
+
+  return (
+    <Container>
+      <nav>
+        <PageInfo>
+          <PageLogo />
+          <h1>{title}</h1>
+        </PageInfo>
+        <div />
+      </nav>
+    </Container>
+  );
+};
+
+export default Header;
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <Router>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </Router>,
   document.getElementById('root'),
 );