Skip to content

Commit

Permalink
SideNav should overlay Content in UIShell
Browse files Browse the repository at this point in the history
  • Loading branch information
jqlio18 committed Dec 14, 2022
1 parent 8d55752 commit e9501be
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 20 deletions.
18 changes: 1 addition & 17 deletions src/UIShell/Content.svelte
Original file line number Diff line number Diff line change
@@ -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>
5 changes: 2 additions & 3 deletions src/UIShell/SideNav.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down

0 comments on commit e9501be

Please sign in to comment.