My React/redux app utilizes the grommet ux framework with a specific structure:
<App className="gol">
<Article>
<GLHeader />
<SideSplit active={props.nav} onResponsive={checkMobile} >
<GLNav />
<GLBoard />
</SideSplit>
<Footer colorIndex="neutral-1-a" justify="center">© 2016 </Footer>
</Article>
</App>
I want to have the <GLNav /> component hidden by default, only displaying when a Settings icon is clicked to allow the <GLBoard /> component to take up the screen. Through Redux state management, I control the toggle of the active prop and manage a CSS class for the <GLNav /> component. The CSS rules dictate that the width will transition to 0 to show/hide the NAV section:
.hide{
width: 0 !important;
transition: width .3s ease-out;
}
.show{
transition: width .3s ease-out;
}
This setup functions flawlessly in Chrome. However, Safari presents an issue when the SideSplit element is not in mobile mode (screen width above 750px) - even if the active prop is false and the .hide class is applied, the <GLNav /> retains a width value. Only when reducing the width below 750px does grommet add a `hidden` class, effectively concealing the <GLNav />.
Below is the code snippet for the <GLNav /> component:
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>
)
}