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

breaking(ui-shell): remove GlobalHeader, SideNav folders (#1223)

Browse source 
* breaking(ui-shell): remove GlobalHeader/SideNav folders

* Run "yarn build:docs"
This commit is contained in:
metonym 2022-04-02 11:46:55 -07:00 • committed by GitHub
commit 62735d6275
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 56 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,75 +0,0 @@
<script>
/**
* @event {null} open
* @event {null} close
* @event {null} click:overlay
*/
/** Set to `true` to use the fixed variant */
export let fixed = false;
/** Set to `true` to use the rail variant */
export let rail = false;
/**
* Specify the ARIA label for the nav
* @type {string}
*/
export let ariaLabel = undefined;
/** 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";
const dispatch = createEventDispatcher();
let winWidth = undefined;
$: dispatch(isOpen ? "open" : "close");
onMount(() => {
shouldRenderHamburgerMenu.set(true);
return () => shouldRenderHamburgerMenu.set(false);
});
</script>
<svelte:window bind:innerWidth="{winWidth}" />
{#if !fixed}
<div
on:click="{() => {
dispatch('click:overlay');
isOpen = false;
}}"
class:bx--side-nav__overlay="{true}"
class:bx--side-nav__overlay-active="{isOpen}"
></div>
{/if}
<nav
aria-hidden="{!isOpen}"
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="{rail && winWidth >= expansionBreakpoint
? false
: isOpen}"
class:bx--side-nav--collapsed="{!isOpen && !rail}"
class:bx--side-nav--rail="{rail}"
{...$$restProps}
>
<slot />
</nav>