From 13a2c59a15f320591104a83c8d720a87d9702357 Mon Sep 17 00:00:00 2001
From: Nitcelis Bravo <nbravoalcala@gmail.com>
Date: Mon, 24 Jul 2023 17:09:37 -0400
Subject: [PATCH 1/4] Add a nav link for the MyProfile page

---
 src/components/Header.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 2a0dd7d..f76193c 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,4 +1,5 @@
 import AppLogo from './AppLogo';
+import MenuLink from './MenuLink';
 import '../assets/styles/Header.css';
 
 const Header = () => (
@@ -6,7 +7,9 @@ const Header = () => (
     <div className="container">
       <nav className="navbar">
         <AppLogo />
-        <ul id="navigation" />
+        <ul id="navigation">
+          <MenuLink url="/my-profile" pageName="My Profile" />
+        </ul>
       </nav>
     </div>
   </header>

From a587dea19393a3c89b3dc85a92f33cd868af6b9c Mon Sep 17 00:00:00 2001
From: Nitcelis Bravo <nbravoalcala@gmail.com>
Date: Mon, 24 Jul 2023 17:10:06 -0400
Subject: [PATCH 2/4] Create the MyProfile page

---
 src/views/Layout.jsx    | 17 +++++++++++++++++
 src/views/MyProfile.jsx |  9 +++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 src/views/Layout.jsx
 create mode 100644 src/views/MyProfile.jsx

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
new file mode 100644
index 0000000..f967413
--- /dev/null
+++ b/src/views/Layout.jsx
@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import Header from '../components/Header';
+
+const Layout = ({ children }) => (
+  <>
+    <Header />
+    <main>
+      { children }
+    </main>
+  </>
+);
+
+Layout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Layout;
diff --git a/src/views/MyProfile.jsx b/src/views/MyProfile.jsx
new file mode 100644
index 0000000..983f7bf
--- /dev/null
+++ b/src/views/MyProfile.jsx
@@ -0,0 +1,9 @@
+import Layout from './Layout';
+
+const MyProfile = () => (
+  <Layout>
+    <section id="myProfile" />
+  </Layout>
+);
+
+export default MyProfile;

From 8a0b18bc3c21a5d17ff2fd384f7b8964358c3057 Mon Sep 17 00:00:00 2001
From: Nitcelis Bravo <nbravoalcala@gmail.com>
Date: Mon, 24 Jul 2023 17:10:56 -0400
Subject: [PATCH 3/4] Add the routes for MyProfile page and some css styles for
 the page

---
 src/App.js                       |  9 ++++++---
 src/assets/styles/index.css      | 12 ++++++++++++
 src/assets/styles/responsive.css | 28 ++++++++++++++++++++++++++++
 src/index.js                     |  8 ++++++--
 4 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/styles/responsive.css

diff --git a/src/App.js b/src/App.js
index b9d74ec..32fd7a4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,11 @@
+import { Routes, Route } from 'react-router-dom';
+import MyProfile from './views/MyProfile';
+
 function App() {
   return (
-    <div className="App">
-      <h1>Space Travelers Hub</h1>
-    </div>
+    <Routes>
+      <Route path="my-profile" element={<MyProfile />} />
+    </Routes>
   );
 }
 
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 8a9b04c..bdee04c 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -29,6 +29,18 @@ body {
   letter-spacing: normal;
 }
 
+ul {
+  list-style: none;
+}
+
+main {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 3rem 0;
+}
+
 .container {
   width: 100%;
   margin: 0 auto;
diff --git a/src/assets/styles/responsive.css b/src/assets/styles/responsive.css
new file mode 100644
index 0000000..854cb39
--- /dev/null
+++ b/src/assets/styles/responsive.css
@@ -0,0 +1,28 @@
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+
+  .navbar {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 9168dc4..a90dd0b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import { BrowserRouter } from 'react-router-dom';
+import './assets/styles/index.css';
 import App from './App';
+import './assets/styles/responsive.css';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
 );
 

From 78bb20908f0a46e2405cde58996fa43c303a5ebe Mon Sep 17 00:00:00 2001
From: Nitcelis Bravo <nbravoalcala@gmail.com>
Date: Mon, 24 Jul 2023 17:17:22 -0400
Subject: [PATCH 4/4] Fix linters issues

---
 src/assets/styles/responsive.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/styles/responsive.css b/src/assets/styles/responsive.css
index 854cb39..3ef5a70 100644
--- a/src/assets/styles/responsive.css
+++ b/src/assets/styles/responsive.css
@@ -25,4 +25,4 @@
   .container {
     max-width: 1140px;
   }
-}
\ No newline at end of file
+}