diff --git a/src/components/UIShell/UIShell.Story.svelte b/src/components/UIShell/UIShell.Story.svelte index 8b02d707..aca6ff90 100644 --- a/src/components/UIShell/UIShell.Story.svelte +++ b/src/components/UIShell/UIShell.Story.svelte @@ -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 = [ { @@ -78,7 +83,7 @@ skeleton: false, render: SettingsAdjust20, title: 'Settings', - tabIndex: 0, + tabindex: '0', focusable: false, style: undefined } @@ -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); diff --git a/src/components/UIShell/UIShell.svelte b/src/components/UIShell/UIShell.svelte index a1277911..670286cc 100644 --- a/src/components/UIShell/UIShell.svelte +++ b/src/components/UIShell/UIShell.svelte @@ -15,11 +15,26 @@ import UIShellSideNavItem from './UIShellSideNav/UIShellSideNavItem.svelte'; import HamburgerMenu from './UIShellSideNav/HamburgerMenu.svelte'; + let isSideNavOpen = undefined; + let winWidth = window.innerWidth; + + window.addEventListener('resize', () => { + winWidth = window.innerWidth; + + if (winWidth >= 1056) { + isSideNavOpen = true; + } else { + isSideNavOpen = false; + } + }); + $: ariaLabel = company + (uiShellAriaLabel || $$props['aria-label'] || platformName); diff --git a/src/components/UIShell/UIShellRightPanel/ActionSearch.svelte b/src/components/UIShell/UIShellRightPanel/ActionSearch.svelte index 37050c40..f7f77b65 100644 --- a/src/components/UIShell/UIShellRightPanel/ActionSearch.svelte +++ b/src/components/UIShell/UIShellRightPanel/ActionSearch.svelte @@ -10,8 +10,8 @@ import searchStore from '../searchStore'; import ActionSearchResult from './ActionSearchResult.svelte'; - let searchTabIndex = 0; - let closeTabIndex = -1; + let searchTabIndex = '0'; + let closeTabIndex = '-1'; let inputSearchField = undefined; const dispatch = createEventDispatcher(); @@ -46,11 +46,11 @@ } $: if (searchIsActive) { - searchTabIndex = -1; - closeTabIndex = 0; + searchTabIndex = '-1'; + closeTabIndex = '0'; } else { - searchTabIndex = 0; - closeTabIndex = -1; + searchTabIndex = '0'; + closeTabIndex = '-1'; } $: showResults = $searchStore ? true : false; diff --git a/src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte b/src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte index 678b1445..678ba350 100644 --- a/src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte +++ b/src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte @@ -1,29 +1,32 @@ diff --git a/src/components/UIShell/UIShellSideNav/UIShellSideNavItem.svelte b/src/components/UIShell/UIShellSideNav/UIShellSideNavItem.svelte index 29a1acdc..9d1cdbc5 100644 --- a/src/components/UIShell/UIShellSideNav/UIShellSideNavItem.svelte +++ b/src/components/UIShell/UIShellSideNav/UIShellSideNavItem.svelte @@ -1,185 +1,81 @@ -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - -
    - -
    - Link -     -
    • -
  • - -
    - -
    - Link -     -
    • + + +{#if href} +
  • + isNavItemSelectedStore.setSelected(text)}> +
    + {#if icon} + + {/if} +
    + {text} +     +
    • +{:else} +
  • + + +
    • +{/if} diff --git a/src/components/UIShell/UIShellSideNav/UIShellSideNavSubMenu.svelte b/src/components/UIShell/UIShellSideNav/UIShellSideNavSubMenu.svelte new file mode 100644 index 00000000..125ac56e --- /dev/null +++ b/src/components/UIShell/UIShellSideNav/UIShellSideNavSubMenu.svelte @@ -0,0 +1,33 @@ + + +
  • + isNavItemSelectedStore.setSelected(text)}> + {text} + +
    • diff --git a/src/components/UIShell/UIShellSideNav/UIShellSideNavWrapper.svelte b/src/components/UIShell/UIShellSideNav/UIShellSideNavWrapper.svelte index bac554d6..b62be452 100644 --- a/src/components/UIShell/UIShellSideNav/UIShellSideNavWrapper.svelte +++ b/src/components/UIShell/UIShellSideNav/UIShellSideNavWrapper.svelte @@ -1,29 +1,26 @@ -