Add styles to navbar component

recipes/src/App.tsx

@@ -45,15 +45,15 @@ class Recipes extends Component {
 }
 
 class App extends Component {
-  navbarItems: { title: string, path: string }[]
+  navbarItems: { title: string, path: string, active: boolean }[]
 
   constructor(props: any) {
     super(props);
     this.navbarItems = [
-      { title: 'home', path: '/' },
-      { title: 'recipes', path: '/recipes' },
-      { title: 'planner', path: '/planner' },
-      { title: 'shoplist', path: '/shoplist' },
+      { title: 'home', path: '/', active: false },
+      { title: 'recipes', path: '/recipes', active: false },
+      { title: 'planner', path: '/planner', active: false },
+      { title: 'shoplist', path: '/shoplist', active: false },
     ];
   }
 

recipes/src/components/Navbar/index.tsx

@@ -3,14 +3,29 @@ import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 
 import './styles.scss';
 
-type Props = {
-  items: {
-    title: string,
-    path: string,
-  }[]
+type LinkItem = {
+  title: string,
+  path: string,
+  active: boolean,
 }
 
-function Navbar(props: Props) {
+
+type NavbarProps = { 
+  items: LinkItem[]
+};
+
+function NavbarLink(props: {link: LinkItem}) {
+  return (
+    <li
+      key={props.link.title}
+      className={`Navbar__items__links ${props.link.active ? 'Navbar__items__links--active' : ''}`}
+    >
+      <Link to={props.link.path}>{props.link.title}</Link>
+    </li>
+  )
+}
+
+function Navbar(props: NavbarProps) {
   return (
     <nav
       className='Navbar'
@@ -23,15 +38,9 @@ function Navbar(props: Props) {
           <h1>Cookbook</h1>
         </li>
         {
-          props.items.map((item: any) => (
-            <li 
-              key={item.title}
-              className='Navbar__items__links'
-            >
-              <Link to={item.path}>{item.title}</Link>
-            </li>
-          ))
+          props.items.map((item: any) => <NavbarLink link={item}/>)
         }
+          
       </ul>
     </nav>
   );

recipes/src/components/Navbar/styles.scss

@@ -23,7 +23,8 @@
   font-weight: $font-weight-bold;
   font-size: $font-size-x-large;
   line-height: 40px;
-  
+  height: 30px;
+
   a {
     color: $white;
   }