28. Navbar

uidotdev · Mar 15, 2019 · b6a24e1 · b6a24e1
1 parent c95ef6d
commit b6a24e1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/app/components/Nav.js b/app/components/Nav.js
@@ -1,11 +1,35 @@
 import React from 'react'
 import { ThemeConsumer } from '../contexts/theme'
+import { NavLink } from 'react-router-dom'
+
+const activeStyle = {
+  color: 'rgb(187, 46, 31)'
+}
 
 export default function Nav () {
   return (
     <ThemeConsumer>
       {({ theme, toggleTheme }) => (
         <nav className='row space-between'>
+          <ul className='row nav'>
+            <li>
+              <NavLink
+                to='/'
+                exact
+                activeStyle={activeStyle}
+                className='nav-link'>
+                  Popular
+              </NavLink>
+            </li>
+            <li>
+              <NavLink
+                to='/battle'
+                activeStyle={activeStyle}
+                className='nav-link'>
+                  Battle
+              </NavLink>
+            </li>
+          </ul>
           <button
             style={{fontSize: 30}}
             className='btn-clear'

diff --git a/app/index.css b/app/index.css
@@ -46,6 +46,10 @@ li {
   color: inherit;
 }
 
+.nav li {
+  margin-right: 10px;
+}
+
 .grid {
   display: flex;
   flex-wrap: wrap;
@@ -55,6 +59,10 @@ li {
   justify-content: space-around;
 }
 
+.space-between {
+  justify-content: space-between;
+}
+
 .header-lg {
   font-size: 35px;
   font-weight: 300;