CODEWITHSUNDEEP
cssreactjsgrommet
genestd
genestd

Reputation: 404

How to hide Grommet SideSplit component

I have a React/redux app using the grommet ux framework. The basic structure is:

    <App className="gol">
      <Article>
        <GLHeader />
          <SideSplit active={props.nav} onResponsive={checkMobile} >
             <GLNav />
             <GLBoard />
          </SideSplit>
        <Footer colorIndex="neutral-1-a" justify="center">&copy;&nbsp;2016 </Footer>
      </Article>
    </App>

I would like the <GLNav /> component to be hidden unless a Settings icon is clicked, allowing the <GLBoard /> component to fill the screen. I have a redux state variable connected to the icon to toggle the active prop and also toggle a CSS class on the <GLNav /> component. The CSS sets the width to 0 so that the NAV component slides in and out:

.hide{
  width: 0 !important;
  transition: width .3s ease-out;
}
.show{
  transition: width .3s ease-out;
}

All of this works perfectly in Chrome. However in Safari when the SideSplit component is in non-mobile mode (screen width greater than 750px) - even when the active prop is false, and the CSS class .hide is applied - the <GLNav /> component has a width value. If I change the width to less than 750px, grommet applies a hidden class, and that will hide the <GLNav /> as desired.

Here is the <GLNav /> class:

const GLNav = props => {
    return(
      <SideBar colorIndex="neutral-1-a" className={props.nav}>
        <Header pad="medium" justify="between">
          <Title>
            Settings
          </Title>
          <Button icon={<Close />} onClick={() => props.actions.toggleNav()} />
        </Header>
     </SideBar>
  )
}

Upvotes: 0

Views: 1074

Answers (2)

Alan Souza
Alan Souza

Reputation: 7795

Although this solution works, I believe there is a better way to achieve what you are trying to do, without the need for manipulating css directly.

Have you seen the Animate utility in Grommet?

https://grommet.github.io/docs/animate/examples/#1

It allows you to use a pure react approach to hide elements without needing to rely on the css to hide elements (it uses react-addons-transition-group behind the scenes).

In your example I would do something like this:

export default MyComponent extends Component {
  state = { navActive: false }

  render () {
    const { navActive } = this.state;

    let navNode;
    if (navActive) {
      navNode = (
        <Animate leave={{"animation": "slide-left", "duration": 1000}}
          visible={true}>
          <GLNav />
        </Animate>
      );
    }

    <App className="gol">
      <Article>
        <GLHeader />
          <SideSplit active={props.nav} onResponsive={checkMobile} >
             {navNode}
             <GLBoard />
          </SideSplit>
        <Footer colorIndex="neutral-1-a" justify="center">&copy;&nbsp;2016 </Footer>
      </Article>
    </App>

  }
}

Upvotes: 1

yadhu
yadhu

Reputation: 15642

Copying my comment to answer as it worked.

Lets' force .hide class maximum width to 0

.hide{
  width: 0 !important; /* may be you don't need !important anymore */
  max-width: 0;
  transition: width .3s ease-out;
}

Upvotes: 0

Related Questions