Fixes #565

Author: ksraj123

src/user/dashboard/navigation/navigation.js

@@ -31,18 +31,18 @@ class Navigation extends Component {
   render() {
     const ListItem = (props) => {
       const item = props.isMobile ? (
-        <ListGroup.Item className={props.className}>
-          <NavLink to={props.link} className="link">
+        <NavLink to={props.link} className="link">
+          <ListGroup.Item className={props.className}>
             <SVGIcon name={props.name} isMobile={true} />
-          </NavLink>
-        </ListGroup.Item>
+          </ListGroup.Item>
+        </NavLink>
       ) : (
-        <ListGroup.Item className={props.className}>
-          <SVGIcon name={props.name} />
-          <NavLink to={props.link} className="link">
+        <NavLink to={props.link} className="link">
+          <ListGroup.Item className={props.className}>
+            <SVGIcon name={props.name} />
             <b>{props.name}</b>
-          </NavLink>
-        </ListGroup.Item>
+          </ListGroup.Item>
+        </NavLink>
       );
 
       return item;

src/user/dashboard/navigation/navigation.scss

@@ -25,17 +25,17 @@
 
 .main-navigation {
   .list-group {
-    .active {
+    .link {
       background-color: rgba(26, 115, 232, 0.1);
-      .link {
+      .active {
         color: #1a73e8;
         background-color: transparent;
       }
     }
     span {
-      .active {
+      .link {
         background-color: rgba(26, 115, 232, 0.1);
-        .link {
+        .active {
           color: #1a73e8;
           background-color: transparent;
         }
@@ -46,15 +46,15 @@
 
 .main-navigation {
   .list-group {
-    .inactive {
-      .link {
+    .link {
+      .inactive {
         color: rgba(0, 0, 0, 0.5);
       }
     }
     span {
-      .active {
-        background-color: rgba(26, 115, 232, 0.1);
-        .link {
+      .link {
+        .active {
+          background-color: rgba(26, 115, 232, 0.1);
           color: #1a73e8;
           background-color: transparent;
         }