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>
  )
}

Solution

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;
}