diff --git a/src/components/ui-shell/_platform-header.scss b/src/components/ui-shell/_platform-header.scss index 07d64c81e956..342f0a2820b1 100644 --- a/src/components/ui-shell/_platform-header.scss +++ b/src/components/ui-shell/_platform-header.scss @@ -28,10 +28,13 @@ background-color: $shell-ui-02; } + .#{$prefix}--platform-header__action--active, + .#{$prefix}--platform-header__action--active:hover, .#{$prefix}--platform-header__action:active { background-color: $shell-brand-01; } + .#{$prefix}--platform-header__action--active, .#{$prefix}--platform-header__action:focus { border-color: $shell-brand-01; outline: none; diff --git a/src/components/ui-shell/_platform-nav.scss b/src/components/ui-shell/_platform-nav.scss new file mode 100644 index 000000000000..3f8bca669cd8 --- /dev/null +++ b/src/components/ui-shell/_platform-nav.scss @@ -0,0 +1,146 @@ +@import '../../globals/scss/colors'; +@import '../../globals/scss/css--helpers'; +@import '../../globals/scss/helper-mixins'; +@import '../../globals/scss/vars'; +@import 'functions'; + +@mixin platform-nav { + //---------------------------------------------------------------------------- + // Platform Navigation + //---------------------------------------------------------------------------- + .#{$prefix}--platform__nav { + position: absolute; + top: get-fixed-size(6); + bottom: 0; + left: 0; + background-color: $ibm-colors__gray--90; + width: get-fixed-size(32); + z-index: 1000; + box-shadow: 0 get-fixed-size(1) get-fixed-size(2) 0 rgba(0, 0, 0, 0.25); + color: $ibm-colors__gray--10; + } + + .#{$prefix}--platform__nav svg { + fill: $ibm-colors__gray--10; + } + + //---------------------------------------------------------------------------- + // Platform Nav Section + //---------------------------------------------------------------------------- + .#{$prefix}--platform__nav-section:not(:last-child)::after { + display: block; + content: ''; + height: 1px; + background-color: $ibm-colors__gray--80; + margin: 0 get-fixed-size(2); + } + + //---------------------------------------------------------------------------- + // Platform Nav Item + //---------------------------------------------------------------------------- + .#{$prefix}--platform__nav-item { + display: flex; + align-items: center; + } + + //---------------------------------------------------------------------------- + // Platform Nav Link + //---------------------------------------------------------------------------- + a.#{$prefix}--platform__nav-link { + display: flex; + align-items: center; + color: $ibm-colors__gray--10; + text-decoration: none; + font-size: rem(14px); + font-weight: 400; + width: 100%; + } + + a.#{$prefix}--platform__nav-link:hover { + background-color: $ibm-colors__gray--80; + color: $ibm-colors__gray--10; + } + + a.#{$prefix}--platform__nav-link:focus { + outline: get-fixed-size(0.5) solid $ibm-colors__blue--60; + outline-offset: get-fixed-size(-0.5); + } + + //---------------------------------------------------------------------------- + // Platform Nav Category + //---------------------------------------------------------------------------- + .#{$prefix}--platform__category { + width: 100%; + } + + .#{$prefix}--platform__category-toggle { + @include button-reset($width: true); + + display: flex; + align-items: center; + } + + .#{$prefix}--platform__category-toggle:hover { + background-color: $ibm-colors__gray--80; + } + + .#{$prefix}--platform__category-toggle:focus { + outline: get-fixed-size(0.5) solid $ibm-colors__blue--60; + outline-offset: get-fixed-size(-0.5); + } + + .#{$prefix}--platform__category-title { + display: flex; + align-items: center; + justify-content: space-between; + padding-right: get-fixed-size(2); + width: 100%; + color: $ibm-colors__gray--10; + font-size: rem(14px); + font-weight: 400; + } + + .#{$prefix}--platform__category-items { + display: none; + visibility: hidden; + } + + .#{$prefix}--platform__category-item > a.#{$prefix}--platform__nav-link { + display: flex; + align-items: center; + min-height: get-fixed-size(5); + padding-left: get-fixed-size(7); + } + + .#{$prefix}--platform__category--expanded .#{$prefix}--platform__category-title { + font-weight: 600; + } + + .#{$prefix}--platform__category--expanded .#{$prefix}--platform__category-title > svg { + transform: rotate(180deg); + } + + .#{$prefix}--platform__category--expanded .#{$prefix}--platform__category-items { + display: block; + visibility: inherit; + } + + //---------------------------------------------------------------------------- + // Platform Nav Icon + //---------------------------------------------------------------------------- + .#{$prefix}--platform__nav-icon { + display: flex; + align-items: center; + justify-content: center; + width: get-fixed-size(6); + min-width: get-fixed-size(6); + height: get-fixed-size(5); + margin-right: get-fixed-size(1); + } +} + +@include exports('platform-nav') { + @if feature-flag-enabled('ui-shell') { + @include platform-nav; + } +} diff --git a/src/components/ui-shell/_ui-shell.scss b/src/components/ui-shell/_ui-shell.scss index 2d01c49c22ad..a887f91c0ff2 100644 --- a/src/components/ui-shell/_ui-shell.scss +++ b/src/components/ui-shell/_ui-shell.scss @@ -3,3 +3,4 @@ @import 'functions'; @import 'platform-header'; @import 'platform-side-nav'; +@import 'platform-nav'; diff --git a/src/components/ui-shell/platform-header.hbs b/src/components/ui-shell/platform-header.hbs index 7351e4566a07..4450de90887e 100644 --- a/src/components/ui-shell/platform-header.hbs +++ b/src/components/ui-shell/platform-header.hbs @@ -1,8 +1,11 @@
+ {{#if nav.state.expanded}} + {{header.name}} diff --git a/src/components/ui-shell/platform-nav.hbs b/src/components/ui-shell/platform-nav.hbs new file mode 100644 index 000000000000..e76f0d978e49 --- /dev/null +++ b/src/components/ui-shell/platform-nav.hbs @@ -0,0 +1,55 @@ +{{#if nav.state.expanded}} +
+ {{#each nav.sections}} +
+ +
+ {{/each}} +
+{{/if}} diff --git a/src/components/ui-shell/ui-shell.config.js b/src/components/ui-shell/ui-shell.config.js index 5ae3fb7e4a61..22b6a7e47b58 100644 --- a/src/components/ui-shell/ui-shell.config.js +++ b/src/components/ui-shell/ui-shell.config.js @@ -36,19 +36,6 @@ const header = { ], }; -function createSidebarLinks(count, activeIndex) { - return Array.from({ length: count }, (_, i) => { - const link = { - title: 'L3 link', - href: '/component/ui-shell--default', - }; - if (i === activeIndex) { - link.active = true; - } - return link; - }); -} - const sidenav = { state: { expanded: false, @@ -73,6 +60,65 @@ const sidenav = { ], }; +const nav = { + state: { + expanded: false, + }, + sections: [ + { + items: [ + { + type: 'link', + title: 'L1 link', + href: '/component/ui-shell--platform-navigation-expanded', + }, + { + type: 'link', + title: 'L1 link', + href: '/component/ui-shell--platform-navigation-expanded', + }, + ], + }, + { + items: [ + { + type: 'link', + title: 'L1 link', + href: '/component/ui-shell--platform-navigation-expanded', + }, + { + type: 'link', + title: 'L1 link', + href: '/component/ui-shell--platform-navigation-expanded', + }, + { + type: 'link', + title: 'L1 link', + href: '/component/ui-shell--platform-navigation-expanded', + }, + { + type: 'category', + title: 'L1 category', + links: [ + { + title: 'L2 link', + href: '/component/ui-shell--platform-navigation-expanded', + }, + { + title: 'L2 link', + href: '/component/ui-shell--platform-navigation-expanded', + }, + { + title: 'L2 link', + href: '/component/ui-shell--platform-navigation-expanded', + }, + ], + }, + ], + }, + ], +}; + module.exports = { preview: 'ui-shell-preview', meta: { @@ -80,11 +126,12 @@ module.exports = { }, context: { header, + nav, sidenav, }, variants: [ { - name: 'expanded', + name: 'Side-nav expanded', context: { sidenav: { state: { @@ -93,5 +140,39 @@ module.exports = { }, }, }, + { + name: 'Platform nav expanded', + context: { + nav: { + state: { + expanded: true, + }, + }, + }, + }, + { + name: 'Platform nav category expanded', + context: { + nav: { + state: { + expanded: true, + category: true, + }, + }, + }, + }, ], }; + +function createSidebarLinks(count, activeIndex) { + return Array.from({ length: count }, (_, i) => { + const link = { + title: 'L3 link', + href: '/component/ui-shell--default', + }; + if (i === activeIndex) { + link.active = true; + } + return link; + }); +} diff --git a/src/components/ui-shell/ui-shell.hbs b/src/components/ui-shell/ui-shell.hbs index ff866aa0c1fa..fc4eff7357e7 100644 --- a/src/components/ui-shell/ui-shell.hbs +++ b/src/components/ui-shell/ui-shell.hbs @@ -1,2 +1,3 @@ {{> platform-header }} {{> platform-side-nav }} +{{> platform-nav }}