mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 10:51:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(ui-shell): export expansionBreakpoint as a prop in Header, SideNav #715 (#723)

Browse source 
Closes #715
This commit is contained in:
Eric Liu 2021-07-05 08:44:21 -07:00 • committed by GitHub
commit a62e9c0c3c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 93 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/UIShell/SideNav/SideNav.svelte
View file

@ -20,6 +20,17 @@
/** Set to `true` to toggle the expanded state */
export let isOpen = false;
/**
* The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
* 1056 represents the "large" breakpoint in pixels from the Carbon Design System:
* small: 320
* medium: 672
* large: 1056
* x-large: 1312
* max: 1584
*/
export let expansionBreakpoint = 1056;
import { onMount, createEventDispatcher } from "svelte";
import { shouldRenderHamburgerMenu } from "../navStore";
@ -53,7 +64,9 @@
class:bx--side-nav__navigation="{true}"
class:bx--side-nav="{true}"
class:bx--side-nav--ux="{true}"
class:bx--side-nav--expanded="{rail && winWidth >= 1056 ? false : isOpen}"
class:bx--side-nav--expanded="{rail && winWidth >= expansionBreakpoint
? false
: isOpen}"
class:bx--side-nav--collapsed="{!isOpen && !rail}"
class:bx--side-nav--rail="{rail}"
{...$$restProps}