mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
feat(UIShell): add persistentHamburgerMenu prop to header
This commit is contained in:
parent
8c30452169
commit
9d0a0b00b7
2 changed files with 10 additions and 3 deletions
|
@ -36,6 +36,12 @@
|
||||||
*/
|
*/
|
||||||
export let platformName = "";
|
export let platformName = "";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify Hamburger Menu persistance
|
||||||
|
* @type {boolean} [persistentHamburgerMenu=false]
|
||||||
|
*/
|
||||||
|
export let persistentHamburgerMenu = false;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Obtain a reference to the HTML anchor element
|
* Obtain a reference to the HTML anchor element
|
||||||
* @type {null | HTMLAnchorElement} [ref=null]
|
* @type {null | HTMLAnchorElement} [ref=null]
|
||||||
|
@ -46,7 +52,8 @@
|
||||||
|
|
||||||
let winWidth = undefined;
|
let winWidth = undefined;
|
||||||
|
|
||||||
$: isSideNavOpen = expandedByDefault && winWidth >= 1056;
|
$: isSideNavOpen =
|
||||||
|
expandedByDefault && winWidth >= 1056 && persistentHamburgerMenu !== true;
|
||||||
$: ariaLabel = company
|
$: ariaLabel = company
|
||||||
? `${company} `
|
? `${company} `
|
||||||
: "" + (uiShellAriaLabel || $$props["aria-label"] || platformName);
|
: "" + (uiShellAriaLabel || $$props["aria-label"] || platformName);
|
||||||
|
@ -56,7 +63,7 @@
|
||||||
|
|
||||||
<header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
|
<header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
|
||||||
<slot name="skip-to-content" />
|
<slot name="skip-to-content" />
|
||||||
{#if winWidth < 1056}
|
{#if winWidth < 1056 || persistentHamburgerMenu === true}
|
||||||
<HamburgerMenu bind:isOpen="{isSideNavOpen}" />
|
<HamburgerMenu bind:isOpen="{isSideNavOpen}" />
|
||||||
{/if}
|
{/if}
|
||||||
<a
|
<a
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
class:bx--side-nav="{true}"
|
class:bx--side-nav="{true}"
|
||||||
class:bx--side-nav--ux="{true}"
|
class:bx--side-nav--ux="{true}"
|
||||||
class:bx--side-nav--expanded="{isOpen}"
|
class:bx--side-nav--expanded="{isOpen}"
|
||||||
class:bx--side-nav--collapsed="{!isOpen && fixed}"
|
class:bx--side-nav--collapsed="{!isOpen && !fixed}"
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue