feat(leftnav): add left nav

adds the left nav component to the project
Tripwire · Mar 22, 2017 · 7964da7 · 7964da7
1 parent 64fb011
commit 7964da7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/components/LeftNav/LeftNavMenuItem.jsx b/src/components/LeftNav/LeftNavMenuItem.jsx
@@ -3,14 +3,14 @@ import React from 'react'
 const LeftNavMenuItem = (props) => {
   let active = ''
   let activeIcon = ''
-  active = props.active ? 'active' : ''
+  active = props.active ? 'icon_container-active' : 'icon_container-inactive'
   activeIcon = props.active ? 'active-icon' : ''
   return (
     <li className='nav__item' onClick={props.onClick}>
       <div className={`icon_container ${active}`}>
         {(props.image)
-                    ? <img className={`icon_nav ${activeIcon}`} src={props.image} />
-                    : null}
+          ? <img className={`icon_nav ${activeIcon}`} src={props.image} />
+          : null}
         {props.children}
       </div>
     </li>

diff --git a/src/styles/components/left-nav.css b/src/styles/components/left-nav.css
@@ -28,12 +28,18 @@
         text-align: center;
         opacity: .4;
     }  
-    & .icon_nav:hover{
-        opacity: .7;
-    }
-    & .active {
+
+    & .icon_container-active {
         border-left: 4px solid white;
         opacity: 1;
+        & .icon_nav:hover{
+            opacity: 1;
+        }
+    }
+    & .icon_container-inactive{
+        & .icon_nav:hover{
+            opacity: .7;
+        }
     }
     & .nav__link {
       color: white;