TextCritical.net

Qs:

• Position as fixed
  • Doesn't work
  • Doesn't even work when I set
• Move the sidebar under the root node and set as fixed
  • This does work with a top of 0; not sure how to make this function in the code though
• Use sticky (https://react.semantic-ui.com/modules/sticky/)
  • Has known issues with Sidebar
• Can I put the sidebar outside of the Sidebar.pushable?
  • That does seem to work
    

    import { useBooleanKnob } from '@stardust-ui/docs-components'
    import React from 'react'
    import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react'
    
    const SidebarExampleSidebar = () => {
      const [visible, setVisible] = useBooleanKnob({ name: 'visible' })
    
      return (
        <>
          <Sidebar
            as={Menu}
            animation='overlay'
            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>
        <Sidebar.Pushable as={Segment}>
          <Sidebar.Pusher>
            <Segment basic>
              <Header as='h3'>Application Content</Header>
              <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />
            </Segment>
          </Sidebar.Pusher>
        </Sidebar.Pushable>
        </>
      )
    }
    
    export default SidebarExampleSidebar