fix(docs): Fixing doc navigation link issues

docs/app/Components/ComponentDoc/ComponentDoc.js

@@ -47,8 +47,16 @@ class ComponentDoc extends Component {
     ).isRequired,
     suiLink: PropTypes.string,
   }
-
-  state = {}
+  constructor(props) {
+    super(props)
+    let activePath
+    if (location.hash) {
+      activePath = _.last((location.hash || '').split('#'))
+    }
+    this.state = {
+      activePath,
+    }
+  }
 
   getChildContext() {
     return {
@@ -68,14 +76,28 @@ class ComponentDoc extends Component {
 
   handleSidebarItemClick = (e, { path }) => {
     const { history } = this.props
-    const aPath = _.kebabCase(_.last(path.split('/')))
+    const aPath = _.kebabCase(path.split('/').join(' '))
 
     history.replace(`${location.pathname}#${aPath}`)
-    scrollToAnchor()
+    // set active hash path
+    this.setState(
+      {
+        activePath: aPath,
+      },
+      scrollToAnchor,
+    )
   }
 
   render() {
-    const { componentGroup, componentName, description, ghLink, path, seeItems, suiLink } = this.props
+    const {
+      componentGroup,
+      componentName,
+      description,
+      ghLink,
+      path,
+      seeItems,
+      suiLink,
+    } = this.props
     const { activePath, examplesRef } = this.state
 
     return (

docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js

@@ -71,7 +71,7 @@ class ComponentExample extends Component {
     const { examplePath, location } = this.props
     const sourceCode = this.getOriginalSourceCode()
 
-    this.anchorName = _.kebabCase(_.last(examplePath.split('/')))
+    this.anchorName = _.kebabCase(examplePath.split('/').join(' '))
 
     // show code for direct links to examples
     const showCode = this.anchorName === location.hash.replace('#', '')
@@ -441,7 +441,7 @@ class ComponentExample extends Component {
     }
 
     return (
-      <Visibility once={false} onTopPassed={this.handlePass} onTopPassedReverse={this.handlePass}>
+      <Visibility once={false}>
         <Grid
           className='docs-example'
           id={this.anchorName}

docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.js

@@ -9,21 +9,25 @@ import ComponentSidebarItem from './ComponentSidebarItem'
 class ComponentSidebarSection extends Component {
   static propTypes = {
     activePath: PropTypes.string,
-    examples: PropTypes.arrayOf(PropTypes.shape({
-      title: PropTypes.string,
-      path: PropTypes.string,
-    })),
+    examples: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        path: PropTypes.string,
+      }),
+    ),
     name: PropTypes.string,
     onItemClick: PropTypes.func,
     onTitleClick: PropTypes.func,
   }
-
-  state = {}
+  constructor(props) {
+    super(props)
+    this.state = {
+      isActiveByProps: this.isActiveAccordion(),
+    }
+  }
 
   componentWillReceiveProps(nextProps) {
-    const { activePath, examples } = nextProps
-    const isActiveByProps = !!_.find(examples, { path: activePath })
-
+    const isActiveByProps = this.isActiveAccordion(nextProps)
     const didCloseByProps = this.state.isActiveByProps && !isActiveByProps
 
     // We allow the user to open accordions, but we close them when we scroll passed them
@@ -35,7 +39,13 @@ class ComponentSidebarSection extends Component {
 
   handleItemClick = (e, itemProps) => _.invoke(this.props, 'onItemClick', e, itemProps)
 
-  handleTitleClick = () => this.setState(prevState => ({ isActiveByUser: !prevState.isActiveByUser }))
+  handleTitleClick = () =>
+    this.setState(prevState => ({ isActiveByUser: !prevState.isActiveByUser }))
+
+  isActiveAccordion = (props = this.props) =>
+    (props.examples || []).findIndex(
+      item => _.kebabCase(item.path.split('/').join(' ')) === props.activePath,
+    ) !== -1
 
   render() {
     const { activePath, examples, name } = this.props
@@ -52,7 +62,7 @@ class ComponentSidebarSection extends Component {
         <Accordion.Content as={Menu.Menu} active={active}>
           {_.map(examples, ({ title, path }) => (
             <ComponentSidebarItem
-              active={activePath === path}
+              active={activePath === _.kebabCase(path.split('/').join(' '))}
               key={path}
               onClick={this.handleItemClick}
               path={path}