Add navlink active

src/components/NavBar.css

@@ -33,3 +33,14 @@ hr {
   margin-bottom: 30px;
   color: rgba(62, 62, 62, 0.4);
 }
+
+@media screen and (max-width: 768px) {
+  .nav-bar {
+    flex-direction: column;
+    margin: 10px 20px;
+  }
+
+  .header-title {
+    font-size: 20px;
+  }
+}

src/components/NavBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import logo from '../images/logo.png';
 import './NavBar.css';
-import NavLink from './NavLink';
+import NavLinks from './NavLink';
 
 const NavBar = () => (
   <div className="nav">
@@ -10,7 +10,7 @@ const NavBar = () => (
         <img className="logo" src={logo} alt="logo" />
         <h1 className="header-title">Space Travels&apos; Hub</h1>
       </header>
-      <NavLink />
+      <NavLinks />
     </div>
     <hr />
   </div>

src/components/NavLink.css

@@ -8,9 +8,17 @@
   color: rgb(78, 169, 255);
 }
 
-/* Change the color & add underline when we are on spesific page */
-
-/* .nav-link:active {
-  border-right: solid 1px rgba(0, 0, 0, 0.8);
+.active {
+  /* border-right: solid 1px rgba(0, 0, 0, 0.8); */
   text-decoration: underline;
-} */
+}
+
+@media screen and (max-width: 768px) {
+  .nav-links {
+    margin-right: 0;
+  }
+
+  .nav-link {
+    font-size: 14px;
+  }
+}

src/components/NavLink.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import './NavLink.css';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 
-const NavLink = () => (
+const NavLinks = () => (
   <div>
     <nav className="nav-links">
-      <Link className="nav-link" to="/">
+      <NavLink className="nav-link" to="/">
         Rockets
-      </Link>
-      <Link className="nav-link" to="/missions">
+      </NavLink>
+      <NavLink className="nav-link" to="/missions">
         Missions
-      </Link>
-      <Link className="nav-link" to="/profile">
+      </NavLink>
+      <NavLink className="nav-link" to="/profile">
         My Profile
-      </Link>
+      </NavLink>
     </nav>
   </div>
 );
 
-export default NavLink;
+export default NavLinks;

src/components/Rocket/Rocket.js

@@ -40,10 +40,7 @@ const Rocket = () => {
         rocketData.map((rocket) => (
           <RocketCard
             key={rocket.id}
-            title={rocket.title}
-            desc={rocket.desc}
-            jpg={rocket.jpg}
-            reserved={rocket.reserved}
+            rocket={rocket}
           />
         ))
       }

src/components/Rocket/RocketsCard.js

@@ -1,27 +1,27 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const RocketCard = ({
-  title, desc, jpg, reserved,
-}) => (
+const RocketCard = ({ rocket }) => (
   <div className="rocket">
-    <img className="rocket--image" src={jpg} alt={title} />
+    <img className="rocket--image" src={rocket.jpg} alt={rocket.title} />
     <div className="rocket--desc">
-      <h2 className="rocket--desc__title">{title}</h2>
+      <h2 className="rocket--desc__title">{rocket.title}</h2>
       <p className="rocket--desc__info">
-        {reserved && <small className="reserved-badge">reserved</small>}
-        {desc}
+        {rocket.reserved && <small className="reserved-badge">reserved</small>}
+        {rocket.desc}
       </p>
-      <button type="button" className="rocket--desc__btn">{reserved ? 'Cancel Reservation' : 'reserved Rocket' }</button>
+      <button type="button" className="rocket--desc__btn">{rocket.reserved ? 'Cancel Reservation' : 'reserved Rocket' }</button>
     </div>
   </div>
 );
 
-RocketCard.prototypes = {
-  title: PropTypes.string.isRequired,
-  desc: PropTypes.string.isRequired,
-  reserved: PropTypes.string.isRequired,
+RocketCard.propTypes = {
+  rocket: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    jpg: PropTypes.string.isRequired,
+    desc: PropTypes.string.isRequired,
+    reserved: PropTypes.bool.isRequired,
+  }).isRequired,
 };
 
 export default RocketCard;