Move sidebar state inside sidebar component

Author: mdubus

src/components/Sidebar.js

@@ -3,6 +3,7 @@ import Color from 'color'
 import styled from 'styled-components'
 import { ArrowDown } from 'components/icons'
 import {
+  useDisclosureState,
   Disclosure as ReakitDisclosure,
   DisclosureContent as ReakitDisclosureContent,
 } from 'reakit/Disclosure'
@@ -77,7 +78,9 @@ const DisclosureContent = styled(ReakitDisclosureContent)`
   }
 `
 
-const Sidebar = ({ sidebarIcon, disclosure, children, ...props }) => {
+const Sidebar = ({ sidebarIcon, children, ...props }) => {
+  const disclosure = useDisclosureState({ animated: true, visible: true })
+
   const openingIcon = sidebarIcon || (
     <Arrow style={{ transform: 'rotate(270deg)' }} />
   )

src/stories/Sidebar.stories.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import { useDisclosureState } from 'reakit/Disclosure'
 
 import Box from 'components/Box'
 import Sidebar from 'components/Sidebar'
@@ -13,15 +12,11 @@ export default {
   },
 }
 
-const Template = (args) => {
-  const disclosure = useDisclosureState({ animated: true })
-
-  return (
-    <Box position="relative" height="100vh">
-      <Sidebar disclosure={disclosure} {...args} />
-    </Box>
-  )
-}
+const Template = (args) => (
+  <Box height="100vh">
+    <Sidebar {...args} />
+  </Box>
+)
 
 export const Default = Template.bind({})
 Default.args = {