Overlay when SideNav is open?

[brunnerh]

The React implementation has an overlay to darken the rest of the document when the side nav is open. I could not find anything in the spec regarding the existence of such an overlay, but it seems sensible to add.

The side nav in this implementation also does not seem to push away the document content when open. (This is actually behavior that ideally should be platform dependent; on iOS the convention seems to be pushing while on Android side navs go over the content.)

[weaseldotro]

The overlay would be much better than pushing the content. The main focus of the page should be the opened sidenav, so add the overlay over the current content. Also, currently the content is squeezed so much when the sidenav is opened, it breaks most styling so it looks horrible.

[brunnerh]

I think when implemented correctly the layout of the pushed page is not supposed to change, instead part of it is simply off-screen.

[metonym]

Related https://github.com/carbon-design-system/carbon/issues/7909

[brunnerh]

Note on the overlay that has been added: It has a low priority and any objects that introduce a new stacking context are positioned over it unless the nav appears after these elements in the DOM.

Example

<SideNav bind:isOpen={isSideNavOpen}>
  <SideNavItems>
    <SideNavLink text="Link 1" />
  </SideNavItems>
</SideNav>

<Content>
    <Grid>
        <Row>
            <Column>
                <p>Content</p>

                <p><Button>Positioned Element</Button></p>
                <p><Button style="position: initial">Not Positioned Element</Button></p>
            </Column>
        </Row>
    </Grid>
</Content>

In this case that can be fixed by moving the side nav below the content, but as soon as an element has a z-index greater than zero, it will appear above the overlay.

[Florian-Schoenherr]

related: #786 also I think setting a big z-index on Overlay would fix this?