Skip to content

Commit

Permalink
styling nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickllerandi
nickllerandi committed May 2, 2019
1 parent e511c0a commit 073fe2e
Show file tree
Hide file tree
Showing 10 changed files with 182 additions and 152 deletions.
Binary file added .DS_Store
View file
Binary file not shown.
48 changes: 34 additions & 14 deletions client/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ 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";
Expand All @@ -12,6 +13,7 @@ import store from "./store";

// CSS / Global Styles
import GlobalStyle from './Global'
import {black, white} from './utils'

// Components
// Layout
Expand Down Expand Up @@ -42,34 +44,52 @@ class App extends Component {
return (
<Provider store={store}>
<Router>
<div className="App">
<AppWrapper>
<Navbar/>
<main>
<div className='mainbar'>
<ContentWrapper>
<SidebarWrapper>
Navigation
</SidebarWrapper>
<MainbarWrapper>
<Route exact path="/" component={Homepage}/>
<Route exact path="/register" component={Register}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/ask" component={Ask}/>
<Route exact path="/questions/:id" component={Question}/>
<Route exact path="/users/:id/:name" component={Profile}/>
<Route exact path="/users/:id/:name/edit" component={ProfileEdit}/>
</div>
<div className='sidebar'>
<div className='ad ad--1'>
I'm an ad
</div>
<div className='ad ad--2'>
I'm also an ad
</div>
</div>
</main>
</MainbarWrapper>
</ContentWrapper>
<Footer/>
<GlobalStyle/>
</div>
</AppWrapper>
</Router>
</Provider>
);
}
}

const AppWrapper = styled.div`
max-width: 125rem;
margin: 4rem auto;
background-color: ${white};
min-height: 100vh;
`;

const ContentWrapper = styled.div`
display: flex;
margin-top: 30rem;
`;

const SidebarWrapper = styled.div`
background-color: ${black};
flex: 0 0 18%;
color: ${white};
`;

const MainbarWrapper = styled.div`
background-color: ${white};
flex: 1;
`;

export default App;
39 changes: 10 additions & 29 deletions client/src/Global.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {createGlobalStyle} from 'styled-components'
import {normalize} from 'polished'
import {elevation} from './utils'
import {black, white} from './utils'

const GlobalStyle = createGlobalStyle`
${normalize()}
Expand All @@ -10,45 +10,26 @@ const GlobalStyle = createGlobalStyle`
padding: 0;
}
*, *:before, *:after {
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
padding: 90px 0 0;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.App {
max-width: 1264px;
width: 90%;
height: 100%;
margin: 0 auto;
.mainbar {
width: 75%;
float: left;
}
.sidebar {
width: 25%;
float: right;
}
}
.ad {
padding: 1rem;
margin: 1rem;
height: 11rem;
width: 15rem;
border: 1px solid #d6d9dc;
${elevation[1]};
background-color: ${white};
color: ${black};
min-height: 100vh;
}
`;

Expand Down
201 changes: 107 additions & 94 deletions client/src/components/layout/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,32 @@ import React, {Component} from "react";
import {Link} from "react-router-dom";
import {connect} from "react-redux";
import styled from 'styled-components'
import {darken} from 'polished'

// REDUX ACTIONS
import {logoutUser} from "../../actions/authActions";
import {clearCurrentProfile} from "../../actions/profileActions";

// ASSETS
import fsmLogo from '../../img/fsm-green2.png'
import {lightblack, green, elevation, fixed} from '../../utils'
import mag from '../../img/sprite.svg'

// UTILS
import {Button} from '../../elements'
import {primary, lighterblack} from '../../utils'

class Navbar extends Component {
constructor() {
super();
this.state = {
search__input: ""
};
}

onChange = (e) => {
this.setState({[e.target.name]: e.target.value})
};

onLogoutClick = (e) => {
e.preventDefault();
this.props.clearCurrentProfile();
Expand All @@ -22,126 +39,122 @@ class Navbar extends Component {
const {user} = this.props.authReducer;

const outState = (
<ul>
<li>
<Link to="/login">Login</Link>
</li>
<nav className='user-nav'>
<div className='user-nav__login'>
<Link to="/login">Login</Link>
</div>
<div className='user-nav__register'>
<Link to="/register">
<Button.SignUp>
Sign Up
</Button.SignUp>
</Link>
</ul>
</div>
</nav>
);

const inState = (
<ul>
<li>
<nav className='user-nav'>
<div className='user-nav__user-name'>
<Link to={`/users/${user.id}/${user.name}`}>
{user.name}
</Link>
</li>
<li>
</div>
<div className='user-nav__logout'>
<Link to="#" onClick={this.onLogoutClick}>
Logout
</Link>
</li>
</ul>
</div>
</nav>
);


return (
<StyledNavbar>
<div className="container">
<div className="main">
<Link to="/" className="logo">
<img
src={fsmLogo}
className="fsm_logo"
alt="Full Stack Musician"
/>
</Link>
</div>
{isAuthenticated ? inState : outState}
</div>
</StyledNavbar>
<NavbarStyled>
<Link to="/">
<img
src={fsmLogo}
className="logo"
alt="Full Stack Musician"
/>
</Link>
<form action='#' className='search'>
<input
className='search__input'
type="text"
name="search__input"
placeholder="Search"
value={this.state.name}
onChange={this.onChange}
/>
<button classNmae='search__button'>
<svg className='search__icon'>
<use xlinkHref={`${mag}#icon-magnifying-glass`} />
</svg>
</button>
</form>
{isAuthenticated ? inState : outState}
</NavbarStyled>
)
}
}
const NavbarStyled = styled.header`
height: 9rem;
background-color: ${lighterblack};
border-bottom: 1px solid ${primary};
display: flex;
justify-content: space-between;
align-items: center;
.logo {
height: 3.25rem;
margin-left: 3rem;
}
const StyledNavbar = styled.header`
min-width: auto;
${elevation[1]};
width: 100%;
background-color: #fafafb;
height: 90px;
border-top: 3px solid ${green};
${fixed()};
.container {
max-width: 1264px;
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
display: flex;
flex-flow: row nowrap;
align-items: center;
.main {
height: 100%;
.logo {
padding: 0 8px;
height: 100%;
display: flex;
align-items: center;
transition: background-color
cubic-bezier(.165, .84, .44, 1) .25s;
&:hover {
background-color: rgba(239,240,241,0.75);
}
.fsm_logo {
height: 100%;
}
.search {
background-color: orangered;
flex: 0 0 40%;
&__input {
font-family: inherit;
font-size: inherit;
background-color: ${lighterblack};
border: none;
color: inherit;
padding: .7rem 2rem;
border-radius: 100px;
width: 90%;
transition: all .2s;
margin-right: -3.5rem;
&:focus {
outline: none;
width: 100%;
background-color: ${darken(0.09, lighterblack)};
}
}
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 {
flex-shrink: 0;
display: inline-flex;
height: 100%;
a {
color: ${lightblack};
display: inline-flex;
align-items: center;
padding: 0 10px;
text-decoration: none;
white-space: nowrap;
transition: background-color
cubic-bezier(.165, .84, .44, 1) .25s,color cubic-bezier(.165, .84, .44, 1) .25s;
&:hover {
color: #3b4045;
background-color: #eff0f1;
}
}
&__button {
border: none;
background-color: ${lighterblack};
&:focus {
outline: none;
}
&:active {
transform: translateY(2px);
}
}
&__icon {
height: 2rem;
width: 2rem;
}
}
.user-nav {
background-color: greenyellow;
}
`;

Expand Down
Loading

0 comments on commit 073fe2e

Please sign in to comment.