SideNav should overlay Content in UIShell

Fixes #1463
This commit is contained in:
jqlio18 2022-12-14 00:18:40 -05:00
commit e9501be58a
2 changed files with 3 additions and 20 deletions

View file

@ -1,24 +1,8 @@
<script>
/** Specify the id for the main element */
export let id = "main-content";
import { isSideNavCollapsed, isSideNavRail } from "./navStore";
/**
* By default, the `SideNav` applies a left margin of `3rem` to `Content`
* if it's a sibling component (e.g., .bx--side-nav ~ .bx--content).
*
* We manually unset the left margin if the `SideNav`
* is collapsed and if it's not the `rail` variant.
*/
$: unsetLeftMargin = $isSideNavCollapsed && !$isSideNavRail;
</script>
<main
id="{id}"
class:bx--content="{true}"
{...$$restProps}
style="{unsetLeftMargin ? 'margin-left: 0;' : ''} {$$restProps.style}"
>
<main id="{id}" class:bx--content="{true}" {...$$restProps}>
<slot />
</main>