Skip to content
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/UIShell/HamburgerMenu.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
export let ariaLabel = undefined;

/** Set to `true` to toggle the open state */
export let isOpen = false;
export let open = false;

/**
* Specify the icon to render for the closed state.
Expand Down Expand Up @@ -39,7 +39,7 @@
class:bx--header__menu-toggle="{true}"
{...$$restProps}
on:click
on:click="{() => (isOpen = !isOpen)}"
on:click="{() => (open = !open)}"
>
<svelte:component this="{isOpen ? iconClose : iconMenu}" size="{20}" />
<svelte:component this="{open ? iconClose : iconMenu}" size="{20}" />
</button>
2 changes: 1 addition & 1 deletion src/UIShell/Header.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
<slot name="skip-to-content" />
{#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}
<HamburgerMenu
bind:isOpen="{isSideNavOpen}"
bind:open="{isSideNavOpen}"
iconClose="{iconClose}"
iconMenu="{iconMenu}"
/>
Expand Down
16 changes: 8 additions & 8 deletions src/UIShell/HeaderAction.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

/** Set to `true` to open the panel */
export let isOpen = false;
export let open = false;

/**
* Specify the icon to render when the action panel is closed.
Expand Down Expand Up @@ -54,12 +54,12 @@
<svelte:window
on:click="{({ target }) => {
if (
isOpen &&
open &&
!ref.contains(target) &&
!refPanel.contains(target) &&
!preventCloseOnClickOutside
) {
isOpen = false;
open = false;
dispatch('close');
}
}}"
Expand All @@ -69,16 +69,16 @@
bind:this="{ref}"
type="button"
class:bx--header__action="{true}"
class:bx--header__action--active="{isOpen}"
class:bx--header__action--active="{open}"
class:action-text="{text}"
{...$$restProps}
on:click
on:click|stopPropagation="{() => {
isOpen = !isOpen;
dispatch(isOpen ? 'open' : 'close');
open = !open;
dispatch(open ? 'open' : 'close');
}}"
>
{#if isOpen}
{#if open}
<slot name="closeIcon">
<svelte:component this="{closeIcon}" size="{20}" />
</slot>
Expand All @@ -91,7 +91,7 @@
{#if text}<span>{text}</span>{/if}
</slot>
</button>
{#if isOpen}
{#if open}
<div
bind:this="{refPanel}"
class:bx--header-panel="{true}"
Expand Down
18 changes: 9 additions & 9 deletions src/UIShell/SideNav.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
export let ariaLabel = undefined;

/** Set to `true` to toggle the expanded state */
export let isOpen = false;
export let open = false;

/**
* The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
Expand All @@ -42,8 +42,8 @@

let winWidth = undefined;

$: dispatch(isOpen ? "open" : "close");
$: $isSideNavCollapsed = !isOpen;
$: dispatch(open ? "open" : "close");
$: $isSideNavCollapsed = !open;
$: $isSideNavRail = rail;

onMount(() => {
Expand All @@ -60,23 +60,23 @@
<div
on:click="{() => {
dispatch('click:overlay');
isOpen = false;
open = false;
}}"
class:bx--side-nav__overlay="{true}"
class:bx--side-nav__overlay-active="{isOpen}"
style:z-index="{isOpen ? 6000 : undefined}"
class:bx--side-nav__overlay-active="{open}"
style:z-index="{open ? 6000 : undefined}"
></div>
{/if}
<nav
aria-hidden="{!isOpen}"
aria-hidden="{!open}"
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}"
: open}"
class:bx--side-nav--collapsed="{!open && !rail}"
class:bx--side-nav--rail="{rail}"
{...$$restProps}
>
Expand Down