CODEWITHSUNDEEP
javascriptreactjssemantic-uisemantic-ui-react
Ben Gubler
Ben Gubler

Reputation: 1441

How to return ReactJS child that opens sidebar not within Sidebar component

I am using Semantic-UI-React and Semantic-UI to write a web application. The page I am working on is mostly static but I want to replace the Dropdown and Sidebar with Semantic-UI-React, rather than using jQuery. However, the Menu (which the Dropdown is in) and the Sidebar are completely different components, and I'm not sure how to open the sidebar from my Menu (without nesting all of my page content inside the Sidebar Pusher content). Thanks!

Here's an example of what I'm trying to do:

import React, { Component } from 'react'
import { Sidebar, Segment, Button, Menu, Image, Icon, Header } from 'semantic-ui-react'

class SidebarBottomOverlay extends Component {
    constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
    this.toggleVisibility = this.toggleVisibility.bind(this);
  }

    toggleVisibility = () => this.setState({ visible: !this.state.visible })

  get MyButton() {
    return(
      <Button onClick={this.toggleVisibility}>Togglevis2</Button>
    )
  }

  render() {
    const { visible } = this.state
    return (
      <div>
        <Button onClick={this.toggleVisibility.bind(this)}>Toggle Visibility</Button>
        <Sidebar.Pushable as={Segment}>
          <Sidebar as={Menu} animation='overlay' direction='bottom' visible={visible} inverted>
            <Menu.Item name='home'>
              <Icon name='home' />
              Home
            </Menu.Item>
            <Menu.Item name='gamepad'>
              <Icon name='gamepad' />
              Games
            </Menu.Item>
            <Menu.Item name='camera'>
              <Icon name='camera' />
              Channels
            </Menu.Item>
          </Sidebar>
          <Sidebar.Pusher>
            <Segment basic>
              <Header as='h3'>Application Content</Header>
              <Image src='/assets/images/wireframe/paragraph.png' />
            </Segment>
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </div>
    )
  }
}

class MyApp extends Component {
  render () {
    return(
      <div>
      <SidebarBottomOverlay.MyButton />
      <SidebarBottomOverlay />
      </div>
      )
  }
}

export default MyApp

Upvotes: 0

Views: 1063

Answers (1)

Donny West
Donny West

Reputation: 720

I'd suggest holding the sidebar's visibility state in the parent component that renders both the menu and sidebar components. Your toggle visibility method would also move to the parent component. You can then pass down the visibility state and toggle function as needed to each child component as props.

Upvotes: 2

Related Questions