Previous commit was removing margin-left: 0

style. This revert back this change and add more
consistencies with the `navStore` and classes.
This commit is contained in:
jqlio18 2022-12-14 12:58:44 -05:00
commit 717d6d88de
3 changed files with 26 additions and 2 deletions

View file

@ -1,8 +1,24 @@
<script> <script>
/** Specify the id for the main element */ /** Specify the id for the main element */
export let id = "main-content"; export let id = "main-content";
import { isSideNavExpanded, 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 = !$isSideNavRail && !$isSideNavExpanded;
</script> </script>
<main id="{id}" class:bx--content="{true}" {...$$restProps}> <main
id="{id}"
class:bx--content="{true}"
style="{unsetLeftMargin ? 'margin-left: 0' : ''}"
{...$$restProps}
>
<slot /> <slot />
</main> </main>

View file

@ -35,7 +35,9 @@
import { import {
shouldRenderHamburgerMenu, shouldRenderHamburgerMenu,
isSideNavCollapsed, isSideNavCollapsed,
isSideNavFixed,
isSideNavRail, isSideNavRail,
isSideNavExpanded,
} from "./navStore"; } from "./navStore";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -43,7 +45,9 @@
let winWidth = undefined; let winWidth = undefined;
$: dispatch(isOpen ? "open" : "close"); $: dispatch(isOpen ? "open" : "close");
$: $isSideNavCollapsed = !isOpen; $: $isSideNavExpanded = !rail && winWidth >= expansionBreakpoint;
$: $isSideNavCollapsed = !$isSideNavExpanded;
$: $isSideNavFixed = !rail & isOpen;
$: $isSideNavRail = rail; $: $isSideNavRail = rail;
onMount(() => { onMount(() => {

View file

@ -2,6 +2,10 @@ import { writable } from "svelte/store";
export const shouldRenderHamburgerMenu = writable(false); export const shouldRenderHamburgerMenu = writable(false);
export const isSideNavExpanded = writable(false);
export const isSideNavCollapsed = writable(false); export const isSideNavCollapsed = writable(false);
export const isSideNavFixed = writable(false);
export const isSideNavRail = writable(false); export const isSideNavRail = writable(false);