fix(Sidebar): handle clicks properly

docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js

@@ -1,86 +1,62 @@
-import React, { Component } from 'react'
-import {
-  Button,
-  Header,
-  Icon,
-  Image,
-  Menu,
-  Segment,
-  Sidebar,
-} from 'semantic-ui-react'
+import { useBooleanKnob } from '@stardust-ui/docs-components'
+import React from 'react'
+import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react'
 
-export default class SidebarExampleMultiple extends Component {
-  state = { visible: false }
+const SidebarExampleMultiple = () => {
+  const [visible, setVisible] = useBooleanKnob({ name: 'visible' })
 
-  handleHideClick = () => this.setState({ visible: false })
-  handleShowClick = () => this.setState({ visible: true })
-  handleSidebarHide = () => this.setState({ visible: false })
+  return (
+    <Sidebar.Pushable as={Segment}>
+      <Sidebar
+        as={Menu}
+        animation='overlay'
+        direction='left'
+        icon='labeled'
+        inverted
+        onHide={() => setVisible(false)}
+        vertical
+        visible={visible}
+        width='thin'
+      >
+        <Menu.Item as='a'>
+          <Icon name='home' />
+          Home
+        </Menu.Item>
+        <Menu.Item as='a'>
+          <Icon name='gamepad' />
+          Games
+        </Menu.Item>
+        <Menu.Item as='a'>
+          <Icon name='camera' />
+          Channels
+        </Menu.Item>
+      </Sidebar>
 
-  render() {
-    const { visible } = this.state
+      <Sidebar
+        as={Menu}
+        animation='overlay'
+        direction='right'
+        inverted
+        vertical
+        visible={visible}
+      >
+        <Menu.Item as='a' header>
+          File Permissions
+        </Menu.Item>
+        <Menu.Item as='a'>Share on Social</Menu.Item>
+        <Menu.Item as='a'>Share by E-mail</Menu.Item>
+        <Menu.Item as='a'>Edit Permissions</Menu.Item>
+        <Menu.Item as='a'>Delete Permanently</Menu.Item>
+      </Sidebar>
 
-    return (
-      <div>
-        <Button.Group>
-          <Button disabled={visible} onClick={this.handleShowClick}>
-            Show sidebars
-          </Button>
-          <Button disabled={!visible} onClick={this.handleHideClick}>
-            Hide sidebars
-          </Button>
-        </Button.Group>
-
-        <Sidebar.Pushable as={Segment}>
-          <Sidebar
-            as={Menu}
-            animation='overlay'
-            direction='left'
-            icon='labeled'
-            inverted
-            onHide={this.handleSidebarHide}
-            vertical
-            visible={visible}
-            width='thin'
-          >
-            <Menu.Item as='a'>
-              <Icon name='home' />
-              Home
-            </Menu.Item>
-            <Menu.Item as='a'>
-              <Icon name='gamepad' />
-              Games
-            </Menu.Item>
-            <Menu.Item as='a'>
-              <Icon name='camera' />
-              Channels
-            </Menu.Item>
-          </Sidebar>
-
-          <Sidebar
-            as={Menu}
-            animation='overlay'
-            direction='right'
-            inverted
-            vertical
-            visible={visible}
-          >
-            <Menu.Item as='a' header>
-              File Permissions
-            </Menu.Item>
-            <Menu.Item as='a'>Share on Social</Menu.Item>
-            <Menu.Item as='a'>Share by E-mail</Menu.Item>
-            <Menu.Item as='a'>Edit Permissions</Menu.Item>
-            <Menu.Item as='a'>Delete Permanently</Menu.Item>
-          </Sidebar>
-
-          <Sidebar.Pusher>
-            <Segment basic>
-              <Header as='h3'>Application Content</Header>
-              <Image src='/images/wireframe/paragraph.png' />
-            </Segment>
-          </Sidebar.Pusher>
-        </Sidebar.Pushable>
-      </div>
-    )
-  }
+      <Sidebar.Pusher>
+        <Segment basic>
+          <Header as='h3'>Application Content</Header>
+          <Image src='/images/wireframe/paragraph.png' />
+        </Segment>
+      </Sidebar.Pusher>
+    </Sidebar.Pushable>
+  )
 }
+
+export default SidebarExampleMultiple