use own grid for showcase

ui/docs/containers/app/index.js

@@ -9,7 +9,10 @@ const Home = require('../home');
 const Item = require('../item/');
 
 const {
-  Base
+  Base,
+  Container,
+  Row,
+  Column
 } = require('../../../src');
 
 const {
@@ -19,7 +22,12 @@ const {
 module.exports = () => {
   return (
     <Base>
+      <Container fluid>
+        <Row>
+          <Column xs={12} md={2}>
             <Navigation />
+          </Column>
+          <Column xs={12} md={10}>
             <Match
               component={Home}
               exactly
@@ -29,6 +37,9 @@ module.exports = () => {
               component={Item}
               pattern='/:parent?/:name'
             />
+          </Column>
+        </Row>
+      </Container>
     </Base>
   );
 };

ui/docs/containers/app/navigation.js

@@ -4,7 +4,6 @@ const React = require('react');
 const ReactRouter = require('react-router');
 
 const Docs = require('../../../src/docs');
-const styles = require('./style.css');
 
 const {
   Link
@@ -21,19 +20,15 @@ const getList = (items, parent) => {
     isNested = (typeof item !== 'string');
 
     return (
-      <li className={styles.item} key={href}>
+      <li key={href}>
         <Link to={href}>{name}</Link>
         {isNested ? getList(item, href) : null}
       </li>
     );
   });
 
-  const cn = classNames(
-    isNested ? styles['is-nested'] : ''
-  );
-
   return (
-    <ul className={cn}>
+    <ul>
       {lis}
     </ul>
   );
@@ -42,7 +37,7 @@ const getList = (items, parent) => {
 const Navigation = () => {
   return (
     <div>
-      <div className={styles.navigation}>
+      <div>
         <nav role='navigation'>
           {getList(Docs)}
         </nav>

ui/docs/containers/app/style.css

@@ -1,108 +0,0 @@
-/* based on:
- *
- * salesforce-ux/design-system v2.1.3
- * BSD License Clause 2
- * github.com/salesforce-ux/design-system
- */
-
-
-.navigation {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-
-  /* Arrow Icon */
-  & .icon_svg {
-    width: .5rem;
-    height: .5rem;
-    display: inline-block;
-    opacity: .5;
-  }
-
-  /* Hide closed menu items */
-  & .is-closed ul {
-    display: none;
-  }
-
-  /* Links */
-  & a {
-    display: block;
-    padding: .75rem 2rem;
-    line-height: 1.28571428571429;
-    color: #16325c;
-
-    &:hover {
-      background-color: rgba(244, 246, 249, .5);
-    }
-  }
-
-  /* Active Link */
-  & .is-active > a {
-    background-color: #eef1f6;
-    color: #0070d2;
-  }
-
-  /* Open Menu Items */
-  & .is-open {
-    padding-bottom: .5rem;
-  }
-
-  /* Section Selected */
-  & .is-selected {
-    background-color: #f4f6f9;
-
-    & a:hover {
-      background-color: #eceff5;
-    }
-
-    & .icon__svg {
-      opacity: 1;
-    }
-  }
-
-  /* Nested List */
-  & .is-nested {
-    margin-left: 0;
-
-    & a {
-      padding-top: .5rem;
-      padding-bottom: .5rem;
-      padding-left: 3.5rem;
-    }
-
-    & .is-nested a {
-      padding-left: 5rem;
-    }
-  }
-
-  @media (min-width: 48em) {
-    position: fixed;
-    top: 6rem;
-    bottom: 0;
-    border-right: 1px solid #f4f6f9;
-    padding-top: 0;
-    width: 15rem;
-
-    & nav {
-      position: absolute;
-      width: 15rem;
-      height: 100%;
-      overflow: hidden;
-      overflow-y: auto;
-      outline: 0;
-    }
-
-    &.navigation--has-search nav {
-      top: calc(2.5rem + 2px);
-      bottom: 0;
-      height: auto;
-    }
-
-    &.site-navigation--internal {
-      top: 8rem;
-    }
-  }
-
-  & .item {
-    margin: 0 .5rem
-  }
-}