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

feat(ui-shell): support fixed SideNav

Browse source
This commit is contained in:
Eric Liu 2020-08-02 05:52:42 -07:00
commit 4f2251b5e1
2 changed files with 34 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,10 @@
<script>
/**
* Set to `true` to use the fixed variant
* @type {boolean} [fixed=false]
*/
export let fixed = false;
/**
* Specify the ARIA label for the nav
* @type {string} [ariaLabel]
@ -12,12 +18,21 @@
export let isOpen = false;
</script>
{#if fixed}
<div
on:click={() => {
isOpen = false;
}}
class:bx--side-nav__overlay={true}
class:bx--side-nav__overlay-active={isOpen} />
{/if}
<nav
aria-label={ariaLabel}
class:bx--side-nav__navigation={true}
class:bx--side-nav={true}
class:bx--side-nav--ux={true}
class:bx--side-nav--expanded={isOpen}
class:bx--side-nav--collapsed={!isOpen && fixed}
{...$$restProps}>
<slot />
</nav>

37
src/UIShell/UIShell.Story.svelte
View file

@ -213,24 +213,25 @@
</HeaderUtilities>
</Header>
{:else if story === 'header-and-sidenav'}
<Header bind:isSideNavOpen {...$$props} />
<SideNav bind:isOpen={isSideNavOpen}>
<SideNavItems>
<SideNavMenu text="Menu 01" icon={iCatalog}>
<SideNavMenuItem text="Sub 01" href="/" />
<SideNavMenuItem text="Sub 02" href="/" />
<SideNavMenuItem text="Sub 03" href="/" />
<SideNavMenuItem text="Sub 04" href="/" />
</SideNavMenu>
<SideNavMenu text="Menu 02" icon={iAdjust}>
<SideNavMenuItem text="Sub 01" href="/" />
<SideNavMenuItem text="Sub 02" href="/" />
<SideNavMenuItem text="Sub 03" href="/" />
<SideNavMenuItem text="Sub 04" href="/" />
</SideNavMenu>
<SideNavLink text="Menu 03" href="/" icon={iProtection} />
</SideNavItems>
</SideNav>
<Header expandedByDefault={false} bind:isSideNavOpen {...$$props}>
<SideNav fixed bind:isOpen={isSideNavOpen}>
<SideNavItems>
<SideNavMenu text="Menu 01" icon={iCatalog}>
<SideNavMenuItem text="Sub 01" href="/" />
<SideNavMenuItem text="Sub 02" href="/" />
<SideNavMenuItem text="Sub 03" href="/" />
<SideNavMenuItem text="Sub 04" href="/" />
</SideNavMenu>
<SideNavMenu text="Menu 02" icon={iAdjust}>
<SideNavMenuItem text="Sub 01" href="/" />
<SideNavMenuItem text="Sub 02" href="/" />
<SideNavMenuItem text="Sub 03" href="/" />
<SideNavMenuItem text="Sub 04" href="/" />
</SideNavMenu>
<SideNavLink text="Menu 03" href="/" icon={iProtection} />
</SideNavItems>
</SideNav>
</Header>
{/if}
<Content>
<h2>Page Title</h2>