From b43e290f028e6cf0cf22ff35aa0ed2224ed86f4f Mon Sep 17 00:00:00 2001 From: nicholas llerandi Date: Sun, 21 Apr 2019 10:50:58 -0400 Subject: [PATCH] Nav-styles#71 --- client/src/App.js | 11 +-- client/src/components/layout/Navbar.js | 91 ++++++++++++++++++++++--- client/src/img/fsm.png | Bin 0 -> 3389 bytes client/src/index.css | 1 + 4 files changed, 84 insertions(+), 19 deletions(-) create mode 100644 client/src/img/fsm.png diff --git a/client/src/App.js b/client/src/App.js index f906506..a5ae7d7 100755 --- 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 ( - +
@@ -59,7 +52,7 @@ class App extends Component {
- +
); diff --git a/client/src/components/layout/Navbar.js b/client/src/components/layout/Navbar.js index 1e0d098..2d0ac6a 100644 --- 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 = ( -
- Login - - Signup -
+ ); const inState = ( -
+
+ ); return ( - + +
+
+ + + Full Stack Musician + + +
+ {isAuthenticated ? inState : outState} +
+ ) } } diff --git a/client/src/img/fsm.png b/client/src/img/fsm.png new file mode 100644 index 0000000000000000000000000000000000000000..2a2c430542fc1b56b2762b0b4bb4d3c5475bcea0 GIT binary patch literal 3389 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 Vwd0~&fat#^a}z6LjM0O?{tMn%ff@h+ literal 0 HcmV?d00001 diff --git a/client/src/index.css b/client/src/index.css index 86b47ba..c6717b1 100755 --- a/client/src/index.css +++ b/client/src/index.css @@ -1,6 +1,7 @@ * { margin: 0; padding: 0; + box-sizing: border-box; } a:visited {