Merge branch 'ui-demo' of https://github.com/aeagle/react-spaces into ui-demo

Author: aeagle

demo/src/App.scss

@@ -59,6 +59,12 @@ pre {
 	display: none;
 }
 
+.ant-menu {
+	.ant-menu-item {
+		font-size: 16px !important;
+	}
+}
+
 .ant-anchor-link {
 	line-height: 1.5;
 }

demo/src/docs/Docs.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Space from 'react-spaces';
-import { Anchor, Button, Icon } from 'antd';
+import { Button, Icon, Menu } from 'antd';
 import 'antd/dist/antd.css';
 import { GettingStarted } from './GettingStarted';
 import { Types } from './Types';
@@ -12,6 +12,7 @@ import { Stacked } from './Stacked';
 import { SizingInfo } from './SizingInfo';
 import { VersionHistory } from './VersionHistory';
 import { Intro } from './Intro';
+import { Try } from './Try';
 
 export const Docs = () => {
 	return (
@@ -22,42 +23,46 @@ export const Docs = () => {
           </Space.CenteredVertically>
         </Space.Top>
         <Space.Fill className="all-content">
-          <Space.Left className="sidebar" scrollable={true} size={250} style={{ padding: 30, borderRight: '2px solid #ddd' }}>
+          <Space.Left className="sidebar" scrollable={true} size={250} style={{ paddingTop: 15, borderRight: '2px solid #ddd' }}>
 
-            <h3 className="sidebar-header">GitHub</h3>
-            <div style={{ marginBottom: 15 }}>
-              <Button type="primary" onClick={() => window.location.href = 'https://github.com/aeagle/react-spaces'}><Icon type="github" /> View on GitHub</Button>
-            </div>
-
-            <h3 className="sidebar-header">NPM <img style={{ position: 'relative', top: -2 }} alt="NPM version" src="https://img.shields.io/npm/v/react-spaces.svg" /></h3>
+            <Menu>
+              <Menu.Item><a href="#getting-started">Getting started</a></Menu.Item>
+              <Menu.Item><a href="#types">Types</a></Menu.Item>
+              <Menu.Item><a href="#non-resizable">Anchored</a></Menu.Item>
+              <Menu.Item><a href="#resizable">Resizable</a></Menu.Item>
+              <Menu.Item><a href="#nested">Nested</a></Menu.Item>
+              <Menu.Item><a href="#scrollable">Scrollable</a></Menu.Item>
+              <Menu.Item><a href="#stacked">Stacked</a></Menu.Item>
+              <Menu.Item><a href="#sizeinfo">Sizing information</a></Menu.Item>
+              <Menu.Item><a href="#try">Try</a></Menu.Item>
+              <Menu.Item><a href="#changes">Version history</a></Menu.Item>
+            </Menu>
 
-            <Anchor offsetTop={30}>
-              <Anchor.Link href="#getting-started" title="Getting started" />
-              <Anchor.Link href="#types" title="Types" />
-              <Anchor.Link href="#non-resizable" title="Anchored" />
-              <Anchor.Link href="#resizable" title="Resizable" />
-              <Anchor.Link href="#nested" title="Nested" />
-              <Anchor.Link href="#scrollable" title="Scrollable" />
-              <Anchor.Link href="#stacked" title="Stacked" />
-              <Anchor.Link href="#sizeinfo" title="Sizing information" />
-              <Anchor.Link href="#changes" title="Version history" />
-            </Anchor>
+            <div style={{ padding: 15}}>
+              <h3 className="sidebar-header">GitHub</h3>
+              <div style={{ marginBottom: 15 }}>
+                <Button type="primary" onClick={() => window.location.href = 'https://github.com/aeagle/react-spaces'}><Icon type="github" /> View on GitHub</Button>
+              </div>
 
-            <h2 className="sidebar-header"><a style={{ color: 'black', fontSize: 24 }} href="https://twitter.com/allaneagle">@allaneagle</a></h2>
+              <h3 className="sidebar-header">NPM <img style={{ position: 'relative', top: -2 }} alt="NPM version" src="https://img.shields.io/npm/v/react-spaces.svg" /></h3>
+ 
+              <h2 className="sidebar-header"><a style={{ color: 'black', fontSize: 18 }} href="https://twitter.com/allaneagle">@allaneagle</a></h2>
+            </div>
 
           </Space.Left>
           <Space.Fill className="main" scrollable={true} style={{ padding: 30, paddingTop: 0 }}>
 
-			<Intro />
-			<GettingStarted />
-			<Types />
-			<Anchored />
-			<Resizable />
-			<Nested />
-			<Scrollable />
-			<Stacked />
-			<SizingInfo />
-			<VersionHistory />
+            <Intro />
+            <GettingStarted />
+            <Types />
+            <Anchored />
+            <Resizable />
+            <Nested />
+            <Scrollable />
+            <Stacked />
+            <SizingInfo />
+            <Try />
+            <VersionHistory />
 
           </Space.Fill>
 

demo/src/docs/Try.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export const Try: React.FC = () => {
+	return (
+		<>
+			<h2 id="try">Try for yourself</h2>
+
+			<iframe src="https://codesandbox.io/embed/react-shapes-ml4kl?fontsize=14" title="react-shapes" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style={{ width:'100%', maxWidth: 1000, height: 500, border: 0, borderRadius: 4, overflow: 'hidden' }} sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+		</>
+	)
+}