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

105
src/UIShell/GlobalHeader/HeaderNavMenu.svelte
View file

@ -1,105 +0,0 @@
<script>
/** Set to `true` to toggle the expanded state */
export let expanded = false;
/** Specify the `href` attribute */
export let href = "/";
/**
* Specify the text
* @type {string}
*/
export let text = undefined;
/** Obtain a reference to the HTML anchor element */
export let ref = null;
import { setContext } from "svelte";
import { writable } from "svelte/store";
import ChevronDown16 from "../../icons/ChevronDown16.svelte";
const selectedItems = writable({});
let menuRef = null;
setContext("HeaderNavMenu", {
selectedItems,
updateSelectedItems(item) {
selectedItems.update((_items) => ({
..._items,
[item.id]: item.isSelected,
}));
},
closeMenu() {
expanded = false;
},
});
$: isCurrentSubmenu =
Object.values($selectedItems).filter(Boolean).length > 0;
</script>
<svelte:window
on:click="{({ target }) => {
if (!ref.contains(target)) {
expanded = false;
}
}}"
/>
<li
role="none"
class:bx--header__submenu="{true}"
class:bx--header__submenu--current="{isCurrentSubmenu}"
on:click="{(e) => {
if (!menuRef.contains(e.target)) {
e.preventDefault();
}
expanded = !expanded;
}}"
on:keydown="{(e) => {
if (e.key === 'Enter') {
e.stopPropagation();
expanded = !expanded;
}
}}"
>
<a
bind:this="{ref}"
role="menuitem"
tabindex="0"
aria-haspopup="menu"
aria-expanded="{expanded}"
aria-label="{text}"
href="{href}"
class:bx--header__menu-item="{true}"
class:bx--header__menu-title="{true}"
{...$$restProps}
style="{$$restProps.style}; z-index: 1"
on:keydown
on:keydown="{(e) => {
if (e.key === ' ') e.preventDefault();
if (e.key === 'Enter' || e.key === ' ') {
expanded = !expanded;
}
}}"
on:click|preventDefault
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:focus
on:blur
>
{text}
<ChevronDown16 class="bx--header__menu-arrow" />
</a>
<ul
bind:this="{menuRef}"
role="menu"
aria-label="{text}"
class:bx--header__menu="{true}"
>
<slot />
</ul>
</li>