mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
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:
parent
e9501be58a
commit
717d6d88de
3 changed files with 26 additions and 2 deletions
|
@ -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>
|
||||||
|
|
|
@ -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(() => {
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue