mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
sidenave finished
This commit is contained in:
Adan Ulloa
parent
2746249d98
commit
6be928a2d3
8 changed files with 1488 additions and 1842 deletions
|
|
@ -15,6 +15,7 @@
|
|||
"prepublishOnly": "yarn build"
|
||||
},
|
||||
"dependencies": {
|
||||
"bin-links": ">=1.1.6",
|
||||
"carbon-icons-svelte": "^10.8.1",
|
||||
"flatpickr": "^4.6.3"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,8 +4,13 @@
|
|||
import UIShell from './UIShell.svelte';
|
||||
import FormTest from './FormTest.svelte';
|
||||
import SettingsAdjust20 from 'carbon-icons-svelte/lib/SettingsAdjust20';
|
||||
import ChangeCatalog16 from 'carbon-icons-svelte/lib/ChangeCatalog16';
|
||||
import ManageProtection16 from 'carbon-icons-svelte/lib/ManageProtection16';
|
||||
import Recommend16 from 'carbon-icons-svelte/lib/Recommend16';
|
||||
import Settings16 from 'carbon-icons-svelte/lib/Settings16';
|
||||
import { leftPanelActions, leftPanelTypes } from './constants';
|
||||
import searchStore from './searchStore';
|
||||
import isNavItemSelectedStore from './UIShellSideNav/isNavItemSelectedStore';
|
||||
|
||||
const navMenu = [
|
||||
{
|
||||
|
|
@ -200,48 +205,94 @@
|
|||
subMenu: [
|
||||
{
|
||||
href: '#',
|
||||
text: 'Sub-link 1'
|
||||
text: 'Cat 1 Sub-link 1'
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Sub-link 2'
|
||||
text: 'Cat 1 Sub-link 2'
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Sub-link 3'
|
||||
text: 'Cat 1 Sub-link 3'
|
||||
}
|
||||
],
|
||||
icon: [
|
||||
{
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: ChangeCatalog16,
|
||||
title: 'Catalog',
|
||||
tabIndex: 0,
|
||||
focusable: false,
|
||||
style: undefined
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Link 2',
|
||||
subMenu: undefined
|
||||
subMenu: undefined,
|
||||
icon: [
|
||||
{
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: ManageProtection16,
|
||||
title: 'Protection',
|
||||
tabIndex: 0,
|
||||
focusable: false,
|
||||
style: undefined
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Link 3',
|
||||
subMenu: undefined
|
||||
subMenu: undefined,
|
||||
icon: [
|
||||
{
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: Recommend16,
|
||||
title: 'Recommend',
|
||||
tabIndex: 0,
|
||||
focusable: false,
|
||||
style: undefined
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
href: undefined,
|
||||
text: 'Link 4',
|
||||
text: 'Category 2',
|
||||
subMenu: [
|
||||
{
|
||||
href: '#',
|
||||
text: 'Sub-link 1'
|
||||
text: 'Cat 2 Sub-link 1'
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Sub-link 2'
|
||||
text: 'Cat 2 Sub-link 2'
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'Sub-link 3'
|
||||
text: 'Cat 2 Sub-link 3'
|
||||
}
|
||||
],
|
||||
icon: [
|
||||
{
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: Settings16,
|
||||
title: 'Settings',
|
||||
tabIndex: 0,
|
||||
focusable: false,
|
||||
style: undefined
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
isNavItemSelectedStore.setStoreValues(sideNavMenu);
|
||||
|
||||
function searchInStore(event) {
|
||||
if (event.detail.action === leftPanelActions.search.actionString) {
|
||||
searchStore.search(event.detail.textInput);
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
window.addEventListener('resize', () => {
|
||||
winWidth = window.innerWidth;
|
||||
|
||||
|
||||
if (winWidth >= 1056) {
|
||||
isSideNavOpen = true;
|
||||
} else {
|
||||
|
|
@ -50,8 +50,10 @@
|
|||
<UIShellRightPanel {rightPanel} on:inputSearch />
|
||||
{/if}
|
||||
{#if sideNavMenu}
|
||||
<UIShellSideNavWrapper bind:isOpen={isSideNavOpen} bind:winWidth={winWidth}>
|
||||
<UIShellSideNavItem />
|
||||
<UIShellSideNavWrapper bind:isOpen={isSideNavOpen} bind:winWidth>
|
||||
{#each sideNavMenu as itemSideMenu}
|
||||
<UIShellSideNavItem {...itemSideMenu} />
|
||||
{/each}
|
||||
</UIShellSideNavWrapper>
|
||||
{/if}
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@
|
|||
tabindex="0"
|
||||
aria-label={text}
|
||||
href="javascript:void(0)"
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
expanded = !expanded;
|
||||
|
|
|
|||
|
|
@ -1,185 +1,81 @@
|
|||
<li class="bx--side-nav__item bx--side-nav__item--icon">
|
||||
<button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
|
||||
<div class="bx--side-nav__icon">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
|
||||
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
|
||||
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
|
||||
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="bx--side-nav__submenu-title">Category title</span>
|
||||
<div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
|
||||
<svg
|
||||
focusable="false"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true"
|
||||
style="will-change: transform;">
|
||||
<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<ul class="bx--side-nav__menu" role="menu">
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bx--side-nav__item bx--side-nav__item--icon">
|
||||
<button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
|
||||
<div class="bx--side-nav__icon">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
|
||||
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
|
||||
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
|
||||
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="bx--side-nav__submenu-title">Category title</span>
|
||||
<div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
|
||||
<svg
|
||||
focusable="false"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true"
|
||||
style="will-change: transform;">
|
||||
<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<ul class="bx--side-nav__menu" role="menu">
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bx--side-nav__item bx--side-nav__item--icon">
|
||||
<button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
|
||||
<div class="bx--side-nav__icon">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
|
||||
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
|
||||
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
|
||||
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="bx--side-nav__submenu-title">Category title</span>
|
||||
<div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
|
||||
<svg
|
||||
focusable="false"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true"
|
||||
style="will-change: transform;">
|
||||
<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<ul class="bx--side-nav__menu" role="menu">
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__menu-item" role="none">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="bx--side-nav__item">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link">
|
||||
<div class="bx--side-nav__icon bx--side-nav__icon--small">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
|
||||
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
|
||||
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
|
||||
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bx--side-nav__item">
|
||||
<a href="javascript:void(0)" class="bx--side-nav__link">
|
||||
<div class="bx--side-nav__icon bx--side-nav__icon--small">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
|
||||
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
|
||||
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
|
||||
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="bx--side-nav__link-text">Link</span>
|
||||
</a>
|
||||
</li>
|
||||
<script>
|
||||
export let href = undefined;
|
||||
export let text = undefined;
|
||||
export let subMenu = undefined;
|
||||
export let icon = undefined;
|
||||
export let expanded = false;
|
||||
|
||||
import { cx } from '../../../lib';
|
||||
import { onDestroy } from 'svelte';
|
||||
import Icon from '../../Icon/Icon.svelte';
|
||||
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
|
||||
import isNavItemSelectedStore from './isNavItemSelectedStore';
|
||||
import UIShellSideNavSubMenu from './UIShellSideNavSubMenu.svelte';
|
||||
|
||||
let isSelected = undefined;
|
||||
|
||||
const unsubscribe = isNavItemSelectedStore.subscribe(values => {
|
||||
values.forEach(item => {
|
||||
if (item.id === text) {
|
||||
isSelected = item.isSelected;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
let iconProps = {
|
||||
class: undefined,
|
||||
skeleton: false,
|
||||
render: ChevronDown16,
|
||||
title: 'Open Menu',
|
||||
tabIndex: 0,
|
||||
focusable: false,
|
||||
style: undefined
|
||||
};
|
||||
|
||||
onDestroy(() => {
|
||||
unsubscribe();
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<li class={cx('--side-nav__item')}>
|
||||
<a
|
||||
{href}
|
||||
class={cx('--side-nav__link', isSelected && '--side-nav__link--current')}
|
||||
aria-current={isSelected ? 'page' : ''}
|
||||
on:click={() => isNavItemSelectedStore.setSelected(text)}>
|
||||
<div class={cx('--side-nav__icon', '--side-nav__icon--small')}>
|
||||
{#if icon}
|
||||
<Icon {...icon[0]} />
|
||||
{/if}
|
||||
</div>
|
||||
<span class={cx('--side-nav__link-text')}>{text}</span>
|
||||
</a>
|
||||
</li>
|
||||
{:else}
|
||||
<li class={cx('--side-nav__item', '--side-nav__item--icon')}>
|
||||
<button
|
||||
aria-haspopup="true"
|
||||
aria-expanded={expanded}
|
||||
class={cx('--side-nav__submenu')}
|
||||
type="button"
|
||||
on:click={() => {
|
||||
expanded = !expanded;
|
||||
}}>
|
||||
<div class={cx('--side-nav__icon')}>
|
||||
<Icon {...icon[0]} />
|
||||
</div>
|
||||
<span class={cx('--side-nav__submenu-title')}>{text}</span>
|
||||
<div class={cx('--side-nav__icon', '--side-nav__icon--small', '--side-nav__submenu-chevron')}>
|
||||
{#if icon}
|
||||
<Icon {...iconProps} />
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
<ul class={cx('--side-nav__menu')} role="menu">
|
||||
{#each subMenu as menuItem}
|
||||
<UIShellSideNavSubMenu {...menuItem} />
|
||||
{/each}
|
||||
</ul>
|
||||
</li>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<script>
|
||||
export let href = undefined;
|
||||
export let text = undefined;
|
||||
|
||||
import { cx } from '../../../lib';
|
||||
import { onDestroy } from 'svelte';
|
||||
import isNavItemSelectedStore from './isNavItemSelectedStore';
|
||||
|
||||
let isSelected = undefined;
|
||||
|
||||
const unsubscribe = isNavItemSelectedStore.subscribe(values => {
|
||||
values.forEach(item => {
|
||||
if (item.id === text) {
|
||||
isSelected = item.isSelected;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
unsubscribe();
|
||||
});
|
||||
</script>
|
||||
|
||||
<li class={cx('--side-nav__menu-item')} role="none">
|
||||
<a
|
||||
{href}
|
||||
class={cx('--side-nav__link')}
|
||||
role="menuitem"
|
||||
aria-current={isSelected ? 'page' : ''}
|
||||
on:click={() => isNavItemSelectedStore.setSelected(text)}>
|
||||
<span class={cx('--side-nav__link-text')}>{text}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import { writable } from 'svelte/store';
|
||||
|
||||
const isSelectedStore = writable([undefined]);
|
||||
|
||||
const store = {
|
||||
subscribe: isSelectedStore.subscribe,
|
||||
setStoreValues: arrayOfObjs => {
|
||||
let storeNewData = [];
|
||||
arrayOfObjs.forEach(element => {
|
||||
let newItem = {};
|
||||
if (element.href) {
|
||||
newItem = {
|
||||
id: element.text,
|
||||
isSelected: false
|
||||
};
|
||||
|
||||
storeNewData.push(newItem);
|
||||
} else {
|
||||
element.subMenu.forEach(subelement => {
|
||||
newItem = {
|
||||
id: subelement.text,
|
||||
isSelected: false
|
||||
};
|
||||
|
||||
storeNewData.push(newItem);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
isSelectedStore.set(storeNewData);
|
||||
},
|
||||
setSelected: id => {
|
||||
isSelectedStore.update(values => {
|
||||
const newValues = values.map(item => {
|
||||
if (item.id === id) {
|
||||
item.isSelected = true;
|
||||
return item;
|
||||
} else {
|
||||
item.isSelected = false;
|
||||
return item;
|
||||
}
|
||||
});
|
||||
|
||||
return newValues;
|
||||
});
|
||||
},
|
||||
deselectAll: () => {
|
||||
isSelectedStore.update(values => {
|
||||
values.forEach(item => {
|
||||
item.isSelected = false;
|
||||
return item;
|
||||
});
|
||||
});
|
||||
},
|
||||
clear: () => {
|
||||
isSelectedStore.set(undefined);
|
||||
}
|
||||
};
|
||||
|
||||
export default store;
|
||||
Loading…
Add table
Add a link
Reference in a new issue