use own grid for showcase
This commit is contained in:
parent
88df5fce34
commit
b8fbde98fa
@ -9,7 +9,10 @@ const Home = require('../home');
|
|||||||
const Item = require('../item/');
|
const Item = require('../item/');
|
||||||
|
|
||||||
const {
|
const {
|
||||||
Base
|
Base,
|
||||||
|
Container,
|
||||||
|
Row,
|
||||||
|
Column
|
||||||
} = require('../../../src');
|
} = require('../../../src');
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -19,16 +22,24 @@ const {
|
|||||||
module.exports = () => {
|
module.exports = () => {
|
||||||
return (
|
return (
|
||||||
<Base>
|
<Base>
|
||||||
<Navigation />
|
<Container fluid>
|
||||||
<Match
|
<Row>
|
||||||
component={Home}
|
<Column xs={12} md={2}>
|
||||||
exactly
|
<Navigation />
|
||||||
pattern='/'
|
</Column>
|
||||||
/>
|
<Column xs={12} md={10}>
|
||||||
<Match
|
<Match
|
||||||
component={Item}
|
component={Home}
|
||||||
pattern='/:parent?/:name'
|
exactly
|
||||||
/>
|
pattern='/'
|
||||||
|
/>
|
||||||
|
<Match
|
||||||
|
component={Item}
|
||||||
|
pattern='/:parent?/:name'
|
||||||
|
/>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
</Base>
|
</Base>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -4,7 +4,6 @@ const React = require('react');
|
|||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router');
|
||||||
|
|
||||||
const Docs = require('../../../src/docs');
|
const Docs = require('../../../src/docs');
|
||||||
const styles = require('./style.css');
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
Link
|
Link
|
||||||
@ -21,19 +20,15 @@ const getList = (items, parent) => {
|
|||||||
isNested = (typeof item !== 'string');
|
isNested = (typeof item !== 'string');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li className={styles.item} key={href}>
|
<li key={href}>
|
||||||
<Link to={href}>{name}</Link>
|
<Link to={href}>{name}</Link>
|
||||||
{isNested ? getList(item, href) : null}
|
{isNested ? getList(item, href) : null}
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
const cn = classNames(
|
|
||||||
isNested ? styles['is-nested'] : ''
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ul className={cn}>
|
<ul>
|
||||||
{lis}
|
{lis}
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
@ -42,7 +37,7 @@ const getList = (items, parent) => {
|
|||||||
const Navigation = () => {
|
const Navigation = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className={styles.navigation}>
|
<div>
|
||||||
<nav role='navigation'>
|
<nav role='navigation'>
|
||||||
{getList(Docs)}
|
{getList(Docs)}
|
||||||
</nav>
|
</nav>
|
||||||
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user