fix(ui-shell): do not unset Content left margin for rail SideNav (#1462)

Fixes #1459
This commit is contained in:
metonym 2022-08-23 07:57:56 -07:00 committed by GitHub
commit 5bafda10f9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 3 deletions

View file

@ -2,14 +2,23 @@
/** Specify the id for the main element */
export let id = "main-content";
import { isSideNavCollapsed } from "./navStore";
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="{$isSideNavCollapsed && 'margin-left: 0;'} {$$restProps.style}}"
style="{unsetLeftMargin && 'margin-left: 0;'} {$$restProps.style}}"
>
<slot />
</main>