Disabled sub-nav links unless Component tab selected

Author: bvaughn

source/demo/Application.js

@@ -132,6 +132,7 @@ class Application extends Component {
                 key={component}
                 activeComponent={activeComponent}
                 component={component}
+                disabled={activeNavLink === NAV_LINKS.Wizard}
                 setActiveComponent={setActiveComponent}
               />
             ))}
@@ -143,6 +144,7 @@ class Application extends Component {
                 key={component}
                 activeComponent={activeComponent}
                 component={component}
+                disabled={activeNavLink === NAV_LINKS.Wizard}
                 setActiveComponent={setActiveComponent}
               />
             ))}

source/demo/ComponentLink.css

@@ -18,6 +18,10 @@
 .ActiveComponentLink {
   color: #fff;
 }
+.DisabledComponentLink {
+  pointer-events: none;
+  opacity: 0.5;
+}
 
 @media (max-width: 500px) {
   .ComponentLink {

source/demo/ComponentLink.js

@@ -2,9 +2,10 @@ import React from 'react'
 import cn from 'classnames'
 import styles from './ComponentLink.css'
 
-export default function ComponentLink ({ activeComponent, component, setActiveComponent }) {
+export default function ComponentLink ({ activeComponent, component, disabled, setActiveComponent }) {
   const classNames = cn(styles.ComponentLink, {
-    [styles.ActiveComponentLink]: activeComponent === component
+    [styles.ActiveComponentLink]: activeComponent === component,
+    [styles.DisabledComponentLink]: disabled
   })
 
   return (