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>

View file

@ -72,9 +72,8 @@
class:bx--side-nav__navigation="{true}"
class:bx--side-nav="{true}"
class:bx--side-nav--ux="{true}"
class:bx--side-nav--expanded="{rail && winWidth >= expansionBreakpoint
? false
: isOpen}"
class:bx--side-nav--fixed="{isOpen && !rail}"
class:bx--side-nav--expanded="{!rail && winWidth >= expansionBreakpoint}"
class:bx--side-nav--collapsed="{!isOpen && !rail}"
class:bx--side-nav--rail="{rail}"
{...$$restProps}