diff --git a/docs/app/Examples/collections/Sidebar/Overlay/SidebarBottomOverlay.js b/docs/app/Examples/collections/Sidebar/Overlay/SidebarBottomOverlay.js new file mode 100644 index 0000000000..d04afb5323 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/Overlay/SidebarBottomOverlay.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarBottomOverlay extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarBottomOverlay diff --git a/docs/app/Examples/collections/Sidebar/Overlay/SidebarLeftOverlay.js b/docs/app/Examples/collections/Sidebar/Overlay/SidebarLeftOverlay.js new file mode 100644 index 0000000000..e886fc2126 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/Overlay/SidebarLeftOverlay.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarLeftOverlay extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarLeftOverlay diff --git a/docs/app/Examples/collections/Sidebar/Overlay/SidebarRightOverlay.js b/docs/app/Examples/collections/Sidebar/Overlay/SidebarRightOverlay.js new file mode 100644 index 0000000000..a82537ef09 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/Overlay/SidebarRightOverlay.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarRightOverlay extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarRightOverlay diff --git a/docs/app/Examples/collections/Sidebar/Overlay/SidebarTopOverlay.js b/docs/app/Examples/collections/Sidebar/Overlay/SidebarTopOverlay.js new file mode 100644 index 0000000000..198dd1b268 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/Overlay/SidebarTopOverlay.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarTopOverlay extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarTopOverlay diff --git a/docs/app/Examples/collections/Sidebar/Overlay/index.js b/docs/app/Examples/collections/Sidebar/Overlay/index.js new file mode 100644 index 0000000000..45ccde3c3d --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/Overlay/index.js @@ -0,0 +1,31 @@ +import React from 'react' + +import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' + +const SidebarVariationsExamples = () => ( + + + + + + +) + +export default SidebarVariationsExamples diff --git a/docs/app/Examples/collections/Sidebar/Push/SidebarBottomPush.js b/docs/app/Examples/collections/Sidebar/Push/SidebarBottomPush.js new file mode 100644 index 0000000000..4740204cb5 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/Push/SidebarBottomPush.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarBottomPush extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarBottomPush diff --git a/docs/app/Examples/collections/Sidebar/Push/SidebarLeftPush.js b/docs/app/Examples/collections/Sidebar/Push/SidebarLeftPush.js new file mode 100644 index 0000000000..f06bf219d9 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/Push/SidebarLeftPush.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarLeftPush extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarLeftPush diff --git a/docs/app/Examples/collections/Sidebar/Push/SidebarRightPush.js b/docs/app/Examples/collections/Sidebar/Push/SidebarRightPush.js new file mode 100644 index 0000000000..7d678ecafd --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/Push/SidebarRightPush.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarRightPush extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarRightPush diff --git a/docs/app/Examples/collections/Sidebar/Push/SidebarTopPush.js b/docs/app/Examples/collections/Sidebar/Push/SidebarTopPush.js new file mode 100644 index 0000000000..5f272da568 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/Push/SidebarTopPush.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarTopPush extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarTopPush diff --git a/docs/app/Examples/collections/Sidebar/Push/index.js b/docs/app/Examples/collections/Sidebar/Push/index.js new file mode 100644 index 0000000000..ca46fb0ec3 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/Push/index.js @@ -0,0 +1,31 @@ +import React from 'react' + +import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' + +const SidebarVariationsExamples = () => ( + + + + + + +) + +export default SidebarVariationsExamples diff --git a/docs/app/Examples/collections/Sidebar/ScaleDown/SidebarBottomScaleDown.js b/docs/app/Examples/collections/Sidebar/ScaleDown/SidebarBottomScaleDown.js new file mode 100644 index 0000000000..e065a1ac7b --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/ScaleDown/SidebarBottomScaleDown.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarBottomScaleDown extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarBottomScaleDown diff --git a/docs/app/Examples/collections/Sidebar/ScaleDown/SidebarLeftScaleDown.js b/docs/app/Examples/collections/Sidebar/ScaleDown/SidebarLeftScaleDown.js new file mode 100644 index 0000000000..6f463eab04 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/ScaleDown/SidebarLeftScaleDown.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarLeftScaleDown extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarLeftScaleDown diff --git a/docs/app/Examples/collections/Sidebar/ScaleDown/SidebarRightScaleDown.js b/docs/app/Examples/collections/Sidebar/ScaleDown/SidebarRightScaleDown.js new file mode 100644 index 0000000000..f51d325a29 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/ScaleDown/SidebarRightScaleDown.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarRightScaleDown extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarRightScaleDown diff --git a/docs/app/Examples/collections/Sidebar/ScaleDown/SidebarTopScaleDown.js b/docs/app/Examples/collections/Sidebar/ScaleDown/SidebarTopScaleDown.js new file mode 100644 index 0000000000..15b415de0b --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/ScaleDown/SidebarTopScaleDown.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarTopScaleDown extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarTopScaleDown diff --git a/docs/app/Examples/collections/Sidebar/ScaleDown/index.js b/docs/app/Examples/collections/Sidebar/ScaleDown/index.js new file mode 100644 index 0000000000..e5c47fca3d --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/ScaleDown/index.js @@ -0,0 +1,31 @@ +import React from 'react' + +import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' + +const SidebarVariationsExamples = () => ( + + + + + + +) + +export default SidebarVariationsExamples diff --git a/docs/app/Examples/collections/Sidebar/SlideAlong/SidebarLeftSlideAlong.js b/docs/app/Examples/collections/Sidebar/SlideAlong/SidebarLeftSlideAlong.js new file mode 100644 index 0000000000..0794290db8 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/SlideAlong/SidebarLeftSlideAlong.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarLeftSlideAlong extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarLeftSlideAlong diff --git a/docs/app/Examples/collections/Sidebar/SlideAlong/SidebarRightSlideAlong.js b/docs/app/Examples/collections/Sidebar/SlideAlong/SidebarRightSlideAlong.js new file mode 100644 index 0000000000..defd9f3fd6 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/SlideAlong/SidebarRightSlideAlong.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarRightSlideAlong extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarRightSlideAlong diff --git a/docs/app/Examples/collections/Sidebar/SlideAlong/index.js b/docs/app/Examples/collections/Sidebar/SlideAlong/index.js new file mode 100644 index 0000000000..a73264e3e4 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/SlideAlong/index.js @@ -0,0 +1,21 @@ +import React from 'react' + +import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' + +const SidebarVariationsExamples = () => ( + + + + +) + +export default SidebarVariationsExamples diff --git a/docs/app/Examples/collections/Sidebar/SlideOut/SidebarLeftSlideOut.js b/docs/app/Examples/collections/Sidebar/SlideOut/SidebarLeftSlideOut.js new file mode 100644 index 0000000000..f435689f62 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/SlideOut/SidebarLeftSlideOut.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarLeftSlideOut extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarLeftSlideOut diff --git a/docs/app/Examples/collections/Sidebar/SlideOut/SidebarRightSlideOut.js b/docs/app/Examples/collections/Sidebar/SlideOut/SidebarRightSlideOut.js new file mode 100644 index 0000000000..6cd32a9bd2 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/SlideOut/SidebarRightSlideOut.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarRightSlideOut extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarRightSlideOut diff --git a/docs/app/Examples/collections/Sidebar/SlideOut/index.js b/docs/app/Examples/collections/Sidebar/SlideOut/index.js new file mode 100644 index 0000000000..1cc13fbe3b --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/SlideOut/index.js @@ -0,0 +1,21 @@ +import React from 'react' + +import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' + +const SidebarVariationsExamples = () => ( + + + + +) + +export default SidebarVariationsExamples diff --git a/docs/app/Examples/collections/Sidebar/Uncover/SidebarLeftUncover.js b/docs/app/Examples/collections/Sidebar/Uncover/SidebarLeftUncover.js new file mode 100644 index 0000000000..17b6d57161 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/Uncover/SidebarLeftUncover.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarLeftUncover extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarLeftUncover diff --git a/docs/app/Examples/collections/Sidebar/Uncover/SidebarRightUncover.js b/docs/app/Examples/collections/Sidebar/Uncover/SidebarRightUncover.js new file mode 100644 index 0000000000..3b162c245b --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/Uncover/SidebarRightUncover.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react' +import { Sidebar, Button, Menu, Image, Icon, Header } from 'semantic-ui-react' + +class SidebarRightUncover extends Component { + state = { visible: false } + + toggleVisibility = () => this.setState({ visible: !this.state.visible }) + + render() { + const { visible } = this.state + return ( +
+ +
+ + + + Home + + + + Games + + + + Channels + + +
+
Application Content
+ +
+
+
+ ) + } +} + +export default SidebarRightUncover diff --git a/docs/app/Examples/collections/Sidebar/Uncover/index.js b/docs/app/Examples/collections/Sidebar/Uncover/index.js new file mode 100644 index 0000000000..477687ab29 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/Uncover/index.js @@ -0,0 +1,21 @@ +import React from 'react' + +import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' + +const SidebarVariationsExamples = () => ( + + + + +) + +export default SidebarVariationsExamples diff --git a/docs/app/Examples/collections/Sidebar/index.js b/docs/app/Examples/collections/Sidebar/index.js new file mode 100644 index 0000000000..f508d87435 --- /dev/null +++ b/docs/app/Examples/collections/Sidebar/index.js @@ -0,0 +1,21 @@ +import React from 'react' + +import Overlay from './Overlay' +import Push from './Push' +import ScaleDown from './ScaleDown' +import SlideAlong from './SlideAlong' +import SlideOut from './SlideOut' +import Uncover from './Uncover' + +const SidebarExamples = () => ( +
+ + + + + + +
+) + +export default SidebarExamples