mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
ba58ba8f00* chore: update ignore rules, remove unused files * refactor(icons): use icons from carbon-icons-svelte@11 * docs(time-picker): fix default value * chore: upgrade carbon-icons-svelte to v11 * docs: update examples to use icons from carbon-icons-svelte@11 * docs: update number of icons [ci skip]
103 lines
2.6 KiB
Svelte
103 lines
2.6 KiB
Svelte
<script>
|
|
/** Set to `false` to hide the side nav by default */
|
|
export let expandedByDefault = true;
|
|
|
|
/** Set to `true` to open the side nav */
|
|
export let isSideNavOpen = false;
|
|
|
|
/**
|
|
* Specify the ARIA label for the header
|
|
* @type {string}
|
|
*/
|
|
export let uiShellAriaLabel = undefined;
|
|
|
|
/**
|
|
* Specify the `href` attribute
|
|
* @type {string}
|
|
*/
|
|
export let href = undefined;
|
|
|
|
/**
|
|
* Specify the company name
|
|
* @type {string}
|
|
*/
|
|
export let company = undefined;
|
|
|
|
/**
|
|
* Specify the platform name
|
|
* Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>)
|
|
*/
|
|
export let platformName = "";
|
|
|
|
/** Set to `true` to persist the hamburger menu */
|
|
export let persistentHamburgerMenu = 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;
|
|
|
|
/** Obtain a reference to the HTML anchor element */
|
|
export let ref = null;
|
|
|
|
/**
|
|
* Specify the icon to render for the closed state.
|
|
* Defaults to `<Menu size={20} />`
|
|
* @type {typeof import("svelte").SvelteComponent}
|
|
*/
|
|
export let iconMenu = Menu;
|
|
|
|
/**
|
|
* Specify the icon to render for the opened state.
|
|
* Defaults to `<Close size={20} />`
|
|
* @type {typeof import("svelte").SvelteComponent}
|
|
*/
|
|
export let iconClose = Close;
|
|
|
|
import Close from "../icons/Close.svelte";
|
|
import Menu from "../icons/Menu.svelte";
|
|
import { shouldRenderHamburgerMenu } from "./navStore";
|
|
import HamburgerMenu from "./HamburgerMenu.svelte";
|
|
|
|
let winWidth = undefined;
|
|
|
|
$: isSideNavOpen =
|
|
expandedByDefault &&
|
|
winWidth >= expansionBreakpoint &&
|
|
!persistentHamburgerMenu;
|
|
$: ariaLabel = company
|
|
? `${company} `
|
|
: "" + (uiShellAriaLabel || $$props["aria-label"] || platformName);
|
|
</script>
|
|
|
|
<svelte:window bind:innerWidth="{winWidth}" />
|
|
|
|
<header aria-label="{ariaLabel}" class:bx--header="{true}">
|
|
<slot name="skip-to-content" />
|
|
{#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}
|
|
<HamburgerMenu
|
|
bind:isOpen="{isSideNavOpen}"
|
|
iconClose="{iconClose}"
|
|
iconMenu="{iconMenu}"
|
|
/>
|
|
{/if}
|
|
<a
|
|
href="{href}"
|
|
class:bx--header__name="{true}"
|
|
bind:this="{ref}"
|
|
{...$$restProps}
|
|
on:click
|
|
>
|
|
{#if company}
|
|
<span class:bx--header__name--prefix="{true}">{company} </span>
|
|
{/if}
|
|
<slot name="platform">{platformName}</slot>
|
|
</a>
|
|
<slot />
|
|
</header>
|