Setup-grid-system#76; sidebar styling

nickllerandi · May 3, 2019 · efbe5ba · efbe5ba
1 parent 120d243
commit efbe5ba
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 9 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/client/src/App.js b/client/src/App.js
@@ -18,6 +18,7 @@ import {black, white} from './utils'
 // Components
 // Layout
 import Navbar from "./components/layout/Navbar";
+import Sidebar from './components/layout/Sidebar'
 import Homepage from "./components/homepage/Homepage";
 import Footer from "./components/layout/Footer";
 
@@ -48,7 +49,7 @@ class App extends Component {
                         <Navbar/>
                         <ContentWrapper>
                             <SidebarWrapper>
-                                Navigation
+                                <Sidebar/>
                             </SidebarWrapper>
                             <MainbarWrapper>
                                 <Route exact path="/" component={Homepage}/>
@@ -78,12 +79,11 @@ const AppWrapper = styled.div`
 
 const ContentWrapper = styled.div`
     display: flex;
-    margin-top: 30rem;
 `;
 
-const SidebarWrapper = styled.div`
+const SidebarWrapper = styled.nav`
     background-color: ${black};
-    flex: 0 0 18%;
+    flex: 0 0 15%;
     color: ${white};
 `;
 

diff --git a/client/src/components/layout/Navbar.js b/client/src/components/layout/Navbar.js
@@ -2,7 +2,7 @@ import React, {Component} from "react";
 import {Link} from "react-router-dom";
 import {connect} from "react-redux";
 import styled from 'styled-components'
-import {darken, lighten} from 'polished'
+import {darken} from 'polished'
 
 // REDUX ACTIONS
 import {logoutUser} from "../../actions/authActions";
@@ -143,9 +143,9 @@ const NavbarStyled = styled.header`
             }
         }
 
-        &__input:focus + &__button {
+        /* &__input:focus + &__button {
             background-color: red;
-        }
+        } */
 
         &__button {
             border: none;

diff --git a/client/src/components/layout/Sidebar.js b/client/src/components/layout/Sidebar.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import {Link} from 'react-router-dom'
+
+// ASSETS
+import sprites from '../../img/sprite.svg'
+
+const Sidebar = () => {
+    return (
+        <ul className='side-nav'>
+            <li className='side-nav__item'>
+                <Link to='/'>
+                    <svg className='side-nav__icon'>
+                        <use xlinkHref={`${sprites}#icon-home`} />
+                    </svg>
+                    <span>Home</span>
+                </Link>
+            </li>
+            <li className='side-nav__item'>
+                <Link to='/'>
+                    <svg className='side-nav__icon'>
+                        <use xlinkHref={`${sprites}#icon-price-tag`} />
+                    </svg>
+                    <span>Tags</span>
+                </Link>
+            </li>
+            <li className='side-nav__item'>
+                <Link to='/'>
+                    <svg className='side-nav__icon'>
+                        <use xlinkHref={`${sprites}#icon-slideshare`} />
+                    </svg>
+                    <span>Users</span>
+                </Link>
+            </li>
+        </ul>
+    );
+}
+
+export default Sidebar;
diff --git a/client/src/elements/Buttons.js b/client/src/elements/Buttons.js
@@ -22,7 +22,7 @@ export const Button = styled.button`
 `;
 
 const SignUpButton = styled(Button)`
-    background: ${secondary};
+    background: ${primary};
     
     &:hover {
         background: ${darken(0.2, primary)};

diff --git a/client/src/img/sprite.svg b/client/src/img/sprite.svg
diff --git a/client/src/utils/Colors.js b/client/src/utils/Colors.js
@@ -1,5 +1,5 @@
 export const primary = '#5EC5B6'
-export const secondary = '#85DAEF'
+export const secondary = '#54C0E4'
 export const secondary_light = '#8EEEEF'
 
 export const black = '#242729'