Nav-styles#71

nickllerandi · Apr 21, 2019 · b43e290 · b43e290
1 parent 345ec65
commit b43e290
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 19 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -2,7 +2,6 @@ import React, {Component} from 'react';
 import {BrowserRouter as Router, Route} from "react-router-dom";
 import {Provider} from "react-redux";
 import jwtDecode from "jwt-decode";
-import styled from "styled-components"
 
 // Utils / Actions
 import {setAuthToken} from "./utils/setAuthToken";
@@ -38,18 +37,12 @@ if (localStorage.jwtToken) {
     store.dispatch(setCurrentUser(decoded));
 }
 
-const AppWrapper = styled.div`
-    nav {
-        background: #FAFAFB;
-    }
-`;
-
 class App extends Component {
     render() {
         return (
             <Provider store={store}>
                 <Router>
-                    <AppWrapper>
+                    <div className="App">
                         <Navbar/>
                         <Route exact path="/" component={Homepage}/>
                         <Route exact path="/register" component={Register}/>
@@ -59,7 +52,7 @@ class App extends Component {
                         <Route exact path="/users/:id/:name" component={Profile}/>
                         <Route exact path="/users/:id/:name/edit" component={ProfileEdit}/>
                         <Footer/>
-                    </AppWrapper>
+                    </div>
                 </Router>
             </Provider>
         );

diff --git a/client/src/components/layout/Navbar.js b/client/src/components/layout/Navbar.js
@@ -1,10 +1,69 @@
 import React, {Component} from "react";
 import {Link} from "react-router-dom";
 import {connect} from "react-redux";
+import styled from 'styled-components'
 
 import {logoutUser} from "../../actions/authActions";
 import {clearCurrentProfile} from "../../actions/profileActions";
 
+import fsmLogo from '../../img/fsm.png'
+
+const HeaderNav = styled.header`
+    min-width: auto;
+    box-shadow: 0 1px 0 rgba(12,13,14,0.1), 0 1px 6px rgba(59,64,69,0.1);
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #fafafb;
+    transition: box-shadow cubic-bezier(.165, .84, .44, 1) .25s;
+    height: 50px;
+    border-top: 3px solid #F48024;
+
+    .container {
+        max-width: 1264px;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        margin: 0 auto;
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        ul {
+            height: 100%;
+            display: flex;
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            padding-left: 48px;
+            align-items: center;
+            flex-grow: 1;
+            justify-content: flex-end;
+
+            li {
+                position: relative;
+                flex-shrink: 0;
+                display: inline-flex;
+                padding-bottom: 0;
+                height: 100%;
+
+                a {
+                    color: #848d95;
+                    display: inline-flex;
+                    align-items: center;
+                    padding: 0 10px;
+                    text-decoration: none;
+                    white-space: nowrap;
+                    position: relative;
+                    transition: background-color cubic-bezier(.165, .84, .44, 1) .25s,color cubic-bezier(.165, .84, .44, 1) .25s;
+                    }
+                }
+            }
+        }
+    }
+`;
+
 class Navbar extends Component {
     onLogoutClick = (e) => {
         e.preventDefault();
@@ -17,29 +76,41 @@ class Navbar extends Component {
         const {user} = this.props.authReducer;
 
         const outState = (
-            <div>
-                <Link to="/login">Login</Link> -
-                <Link to="/register">Signup</Link>
-            </div>
+            <ul>
+                <li>
+                    <Link to="/login">Login</Link>    
+                </li>
+                <li>
+                    <Link to="/register">Signup</Link>
+                </li>
+            </ul>
         );
 
         const inState = (
-            <div>
+            <ul>
                 <Link to={`/users/${user.id}/${user.name}`}>
                     {user.name}
                 </Link>
                 <button onClick={this.onLogoutClick}>
                     Logout
                 </button>
-            </div>
+            </ul>
         );
 
 
         return (
-            <nav className="Navbar">
-                <Link to="/">FSM</Link>
-                {isAuthenticated ? inState : outState}
-            </nav>
+            <HeaderNav>
+                <div className="container">
+                    <div className="main">
+                        <Link to="/" className="logo">
+                            <span>
+                                Full Stack Musician
+                            </span>
+                        </Link>
+                    </div>
+                    {isAuthenticated ? inState : outState}
+                </div>
+            </HeaderNav>
         )
     }
 }

diff --git a/client/src/img/fsm.png b/client/src/img/fsm.png
diff --git a/client/src/index.css b/client/src/index.css
@@ -1,6 +1,7 @@
 * {
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
 }
 
 a:visited {