mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui-shell): toggle SideNav rail when clicking the hamburger menu #699

Browse source
This commit is contained in:
Eric Y Liu 2021-06-27 07:58:58 -07:00
commit cceb062041
2 changed files with 20 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

30
docs/src/pages/framed/UIShell/HeaderNavRail.svelte
View file

@ -37,22 +37,22 @@
</HeaderNavMenu>
<HeaderNavItem href="/" text="Link 4" />
</HeaderNav>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}" rail>
<SideNavItems>
<SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
<SideNavLink icon="{Fade16}" text="Link 2" href="/" />
<SideNavLink icon="{Fade16}" text="Link 3" href="/" />
<SideNavMenu icon="{Fade16}" text="Menu">
<SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu>
<SideNavDivider />
<SideNavLink icon="{Fade16}" text="Link 4" href="/" />
</SideNavItems>
</SideNav>
<SideNav bind:isOpen="{isSideNavOpen}" rail>
<SideNavItems>
<SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
<SideNavLink icon="{Fade16}" text="Link 2" href="/" />
<SideNavLink icon="{Fade16}" text="Link 3" href="/" />
<SideNavMenu icon="{Fade16}" text="Menu">
<SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu>
<SideNavDivider />
<SideNavLink icon="{Fade16}" text="Link 4" href="/" />
</SideNavItems>
</SideNav>
</Header>
<Content>
<Grid>

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

@ -25,6 +25,8 @@
const dispatch = createEventDispatcher();
let winWidth = undefined;
$: dispatch(isOpen ? "open" : "close");
onMount(() => {
@ -33,6 +35,8 @@
});
</script>
<svelte:window bind:innerWidth="{winWidth}" />
{#if !fixed}
<div
on:click="{() => {
@ -49,7 +53,7 @@
class:bx--side-nav__navigation="{true}"
class:bx--side-nav="{true}"
class:bx--side-nav--ux="{true}"
class:bx--side-nav--expanded="{isOpen && !rail}"
class:bx--side-nav--expanded="{rail && winWidth >= 1056 ? false : isOpen}"
class:bx--side-nav--collapsed="{!isOpen && !rail}"
class:bx--side-nav--rail="{rail}"
{...$$restProps}