fix(docs): update sidebar to use Menu v1 API (#555)

Semantic-Org · Sep 28, 2016 · 3ffc602 · 3ffc602
1 parent e1ade8c
commit 3ffc602
Showing 1 changed file with 35 additions and 29 deletions.
diff --git a/docs/app/Components/Sidebar/Sidebar.js b/docs/app/Components/Sidebar/Sidebar.js
@@ -22,7 +22,7 @@ const parentComponents = _.flow(
 const getRoute = (_meta) => `/${_meta.type}s/${_.kebabCase(_meta.name)}`
 
 const MenuItem = ({ meta, children, ...rest }) => (
-  <Link key={meta.name} to={getRoute(meta)} {...rest}>
+  <Link to={getRoute(meta)} {...rest}>
     {children || meta.name}
   </Link>
 )
@@ -110,15 +110,21 @@ export default class Sidebar extends Component {
     const items = _.flow(
       _.filter(META.isType(type)),
       _.map(({ _meta }) => (
-        <MenuItem key={_meta.name} meta={_meta} onClick={this.handleItemClick} />
+        <Menu.Item
+          key={_meta.name}
+          name={_meta.name}
+          onClick={this.handleItemClick}
+          as={Link}
+          to={getRoute(_meta)}
+        />
       ))
     )(parentComponents)
 
     return (
-      <div className='item' key={type}>
-        <div className='header'>{_.capitalize(type)}s</div>
-        <div className='menu'>{items}</div>
-      </div>
+      <Menu.Item key={type}>
+        <Menu.Header>{_.capitalize(type)}s</Menu.Header>
+        <Menu.Menu>{items}</Menu.Menu>
+      </Menu.Item>
     )
   }, typeOrder)
 
@@ -146,50 +152,50 @@ export default class Sidebar extends Component {
       if (isSelected) this.selectedRoute = getRoute(_meta)
 
       return (
-        <MenuItem
+        <Menu.Item
           key={_meta.name}
-          meta={_meta}
-          className={isSelected ? 'active item' : 'item'}
-          // don't show the current route as active
-          activeClassName=''
+          name={_meta.name}
           onClick={this.handleItemClick}
+          active={isSelected}
+          as={Link}
+          to={getRoute(_meta)}
         >
           {_meta.name}
           {isSelected && selectedItemLabel}
-        </MenuItem>
+        </Menu.Item>
       )
     }, this.filteredComponents)
 
-    return <div className='menu'>{menuItems}</div>
+    return <Menu.Menu>{menuItems}</Menu.Menu>
   }
 
   render() {
     const { style } = this.props
     const { query } = this.state
     return (
-      <Menu className='vertical fixed inverted' style={{ ...style }}>
-        <div className='item'>
+      <Menu vertical fixed inverted style={{ ...style }}>
+        <Menu.Item>
           <Logo spaced='right' size='mini' />
           <strong>
             Semantic-UI-React &nbsp;
             <small><em>{pkg.version}</em></small>
           </strong>
-        </div>
-        <div className='item'>
-          <div className='header'>Getting Started</div>
-          <div className='menu'>
-            <Link to='/introduction' className='item' activeClassName='active'>
+        </Menu.Item>
+        <Menu.Item>
+          <Menu.Header>Getting Started</Menu.Header>
+          <Menu.Menu>
+            <Menu.Item as={Link} to='/introduction' activeClassName='active'>
               Introduction
-            </Link>
-            <a className='item' href='https://github.com/TechnologyAdvice/stardust'>
+            </Menu.Item>
+            <Menu.Item as='a' href='https://github.com/TechnologyAdvice/stardust'>
               <Icon name='github' /> GitHub
-            </a>
-            <a className='item' href='https://github.com/TechnologyAdvice/stardust/blob/master/CHANGELOG.md'>
+            </Menu.Item>
+            <Menu.Item as='a' href='https://github.com/TechnologyAdvice/stardust/blob/master/CHANGELOG.md'>
               <Icon name='file text outline' /> CHANGELOG
-            </a>
-          </div>
-        </div>
-        <div className='item'>
+            </Menu.Item>
+          </Menu.Menu>
+        </Menu.Item>
+        <Menu.Item>
           <Input
             className='transparent inverted icon'
             icon='search'
@@ -201,7 +207,7 @@ export default class Sidebar extends Component {
               if (c !== null) this._searchInput = findDOMNode(c).querySelector('input')
             }}
           />
-        </div>
+        </Menu.Item>
         {query ? this.renderSearchItems() : this.menuItemsByType}
       </Menu>
     )