mirror of https://github.com/Qiskit/qiskit.org.git
feat(menu): updates to use ui-shell web component (#2784)
* chore: update @qiskit/web-components Node v14.20.0 npm 6.14.17 * feat: update layouts to use ui-shell Updates default and default-max layouts to use ui-shell instead of TheMenu component Removes TheMenu component since no longer used * chore: update @qiskit/web-components to 0.9.0 * refactor: hide account for initial drop The max-width is a little off from the rest of the page content. Including the account icon highlights the issue so removing for initial integration. * feat: add click tracking event * feat: add click tracking to default layout * chore: remove unneeded code - Removes unused menu mixin and unused icons - Scopes SFC styles - Removes unneeded tabindex attribute * chore: update segment data Follows what is defined in as the segment property for the nav links defined in constants/menuLinks.ts Co-authored-by: Eddybrando Vásquez <eddybrando.vasquez@gmail.com>
This commit is contained in:
Yoshie
GitHub
parent
d9939f6a97
commit
78bf55a69f
|
|
@ -1,239 +0,0 @@
|
|||
<template>
|
||||
<section class="mobile-menu">
|
||||
<nav
|
||||
class="mobile-menu__navigation-links"
|
||||
>
|
||||
<template v-for="link in mainLevelLinks">
|
||||
<AppLink
|
||||
v-if="!link.sublinks"
|
||||
:key="link.url"
|
||||
class="mobile-menu__entry"
|
||||
:class="{
|
||||
'mobile-menu__entry_active': isActive(link),
|
||||
'mobile-menu__entry_is-parent': isParent(link)
|
||||
}"
|
||||
v-bind="appLinkFromNavLink(link)"
|
||||
kind="secondary"
|
||||
>
|
||||
<div class="mobile-menu__entry-label">
|
||||
{{ link.label }}
|
||||
</div>
|
||||
</AppLink>
|
||||
<cv-dropdown
|
||||
v-else
|
||||
ref="communityDropdown"
|
||||
:key="link.url"
|
||||
class="mobile-menu__entry"
|
||||
:class="{ 'mobile-menu__entry_active': isCommunityActive() }"
|
||||
placeholder="Community"
|
||||
>
|
||||
<li v-for="sublink in getSubLinks(link)" :key="`sublink:${sublink.url}`">
|
||||
<AppLink
|
||||
class=" mobile-menu__entry mobile-menu__entry_second-level"
|
||||
:class="{ 'mobile-menu__entry_active': isActive(sublink) }"
|
||||
v-bind="appLinkFromNavLink(sublink)"
|
||||
kind="secondary"
|
||||
>
|
||||
<div class="mobile-menu__entry-label">
|
||||
{{ sublink.label }}
|
||||
</div>
|
||||
</AppLink>
|
||||
</li>
|
||||
</cv-dropdown>
|
||||
</template>
|
||||
</nav>
|
||||
<footer class="mobile-menu__footer">
|
||||
<div class="mobile-menu__footer-inner-container">
|
||||
<FooterSection class="mobile-menu__footer-contact" v-bind="stayConnectedElements" icons-only :theme="theme" />
|
||||
</div>
|
||||
<p class="caption mobile-menu__footer-text">
|
||||
©Qiskit | All Rights Reserved
|
||||
</p>
|
||||
</footer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
|
||||
import MenuMixin from '~/mixins/menu'
|
||||
|
||||
import {
|
||||
STAY_CONNECTED_LINKS
|
||||
} from '~/constants/menuLinks'
|
||||
|
||||
@Component
|
||||
export default class MobileMenu extends Mixins(MenuMixin) {
|
||||
@Prop({ type: Boolean, default: false }) isVisible!: boolean
|
||||
|
||||
stayConnectedElements = STAY_CONNECTED_LINKS
|
||||
theme = 'light'
|
||||
|
||||
@Watch('isVisible')
|
||||
openDropdown () {
|
||||
const openDropdown: boolean = this.isCommunityActive()
|
||||
const communityMenu: any = this.$refs.communityDropdown
|
||||
|
||||
communityMenu[0].open = openDropdown
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~carbon-components/scss/globals/scss/typography';
|
||||
|
||||
.mobile-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $background-color-white;
|
||||
overflow-y: auto;
|
||||
justify-content: space-between;
|
||||
|
||||
&__entry-label {
|
||||
@include type-style('body-long-02');
|
||||
}
|
||||
|
||||
&__entry-label,
|
||||
&__footer-inner-container {
|
||||
@include contained();
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__footer-inner-container {
|
||||
margin-bottom: $spacing-05;
|
||||
padding-left: $spacing-05;
|
||||
}
|
||||
|
||||
&__navigation-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: $spacing-07;
|
||||
}
|
||||
|
||||
&__entry {
|
||||
@include type-style('expressive-paragraph-01');
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: $text-color-light;
|
||||
height: 4rem;
|
||||
border-bottom: 1px solid $cool-gray-10;
|
||||
|
||||
&_active:not(&_is-parent),
|
||||
&_active .bx--list-box__label {
|
||||
color: $text-active-color;
|
||||
}
|
||||
|
||||
&_second-level {
|
||||
padding-left: $spacing-05;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
@include mq ($from: medium) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
padding-top: $spacing-05;
|
||||
padding-bottom: $spacing-05 + 2.5rem; // make room for the "cookies preferences" button
|
||||
background-color: $background-color-white;
|
||||
}
|
||||
|
||||
&__footer-text {
|
||||
background-color: $background-color-lighter;
|
||||
padding: $spacing-05 $spacing-07;
|
||||
color: $text-color-lighter;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~carbon-components/scss/globals/scss/typography';
|
||||
|
||||
// component overrides
|
||||
.mobile-menu {
|
||||
& .bx--form-item {
|
||||
margin-right: 0;
|
||||
border-bottom: none;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&__entry {
|
||||
&_active {
|
||||
& .bx--list-box__label,
|
||||
& .bx--dropdown {
|
||||
color: $text-active-color;
|
||||
}
|
||||
|
||||
&.bx--form-item {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bx--dropdown {
|
||||
background-color: $background-color-white;
|
||||
height: 4rem;
|
||||
max-height: initial;
|
||||
border-bottom: 1px solid $cool-gray-10;
|
||||
}
|
||||
|
||||
&__footer-contact {
|
||||
svg {
|
||||
fill: $cool-gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
.bx--list-box__field {
|
||||
padding: 0 $spacing-09 0 $spacing-07;
|
||||
height: 4rem;
|
||||
|
||||
&:hover .bx--list-box__label {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&[aria-expanded="true"] {
|
||||
outline: none;
|
||||
outline-offset: initial;
|
||||
border-bottom: 1px solid $cool-gray-20;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $text-color-light;
|
||||
}
|
||||
|
||||
@include mq($until: medium) {
|
||||
padding: 0 $spacing-09 0 $spacing-05;
|
||||
}
|
||||
}
|
||||
|
||||
.bx--list-box__menu {
|
||||
&:focus {
|
||||
outline: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.bx--list-box--expanded {
|
||||
min-height: 4rem;
|
||||
height: 100%;
|
||||
background-color: $background-color-lighter;
|
||||
|
||||
.bx--list-box__menu {
|
||||
position: relative;
|
||||
max-height: unset;
|
||||
background-color: $background-color-lighter;
|
||||
box-shadow: initial;
|
||||
z-index: initial;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
& .bx--list-box__menu li:not(:last-child) {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,366 +0,0 @@
|
|||
<template>
|
||||
<div class="menu">
|
||||
<section class="menu__mobile" tabindex="-1">
|
||||
<div class="menu__mobile-inner-container">
|
||||
<BasicLink
|
||||
class="
|
||||
menu__entry
|
||||
menu__home-link
|
||||
"
|
||||
kind="secondary"
|
||||
v-bind="homeLink"
|
||||
>
|
||||
<AppLogo
|
||||
class="menu__logo"
|
||||
:class="{ 'menu__logo_active': isActiveHome(homeLink) }"
|
||||
/>
|
||||
</BasicLink>
|
||||
<label
|
||||
class="
|
||||
menu__hamburger-toggle
|
||||
menu__hamburger-toggle_menu-hidden
|
||||
"
|
||||
for="mobile-menu-toggle"
|
||||
>
|
||||
<component :is="isMobileMenuVisible ? 'Close20' : 'Menu20'" />
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
id="mobile-menu-toggle"
|
||||
v-model="isMobileMenuVisible"
|
||||
class="menu__mobile-menu-toggle"
|
||||
type="checkbox"
|
||||
>
|
||||
<MobileMenu
|
||||
class="menu__mobile-menu"
|
||||
:class="{ 'menu__mobile-menu_visible': isMobileMenuVisible }"
|
||||
:is-visible="isMobileMenuVisible"
|
||||
/>
|
||||
</section>
|
||||
<section class="menu__main-level">
|
||||
<nav
|
||||
class="menu__navigation-level"
|
||||
:class="{ 'bx--grid': !oldContainer }"
|
||||
>
|
||||
<BasicLink
|
||||
class="
|
||||
menu__entry
|
||||
menu__home-link
|
||||
"
|
||||
kind="secondary"
|
||||
v-bind="homeLink"
|
||||
>
|
||||
<AppLogo
|
||||
class="menu__logo"
|
||||
:class="{ 'menu__logo_active': isActiveHome(homeLink) }"
|
||||
/>
|
||||
</BasicLink>
|
||||
<template v-for="link in mainLevelLinks">
|
||||
<BasicLink
|
||||
v-if="!link.sublinks"
|
||||
:key="link.url"
|
||||
class="menu__entry"
|
||||
:class="{ 'menu__entry_active': isActive(link) }"
|
||||
v-bind="link"
|
||||
>
|
||||
{{ link.label }}
|
||||
</BasicLink>
|
||||
<cv-dropdown
|
||||
v-else
|
||||
:key="link.url"
|
||||
class="menu__entry"
|
||||
:class="{ 'menu__entry_active': isCommunityActive() }"
|
||||
placeholder="Community"
|
||||
>
|
||||
<li
|
||||
v-for="sublink in link.sublinks"
|
||||
:key="sublink.url"
|
||||
class="bx--dropdown-item"
|
||||
>
|
||||
<BasicLink
|
||||
class="
|
||||
menu__entry
|
||||
menu__entry_second-level
|
||||
"
|
||||
:class="{ 'menu__entry_active': isActive(sublink) }"
|
||||
v-bind="sublink"
|
||||
>
|
||||
{{ sublink.label }}
|
||||
</BasicLink>
|
||||
</li>
|
||||
</cv-dropdown>
|
||||
</template>
|
||||
</nav>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Watch, Component, Mixins, Prop } from 'vue-property-decorator'
|
||||
import MenuMixin from '~/mixins/menu'
|
||||
|
||||
@Component
|
||||
export default class TheMenu extends Mixins(MenuMixin) {
|
||||
@Prop({ type: Boolean, default: false, required: false }) oldContainer!: boolean;
|
||||
|
||||
isMobileMenuVisible: boolean = false
|
||||
|
||||
@Watch('isMobileMenuVisible')
|
||||
toggleScroll () {
|
||||
this.$emit('change-visibility', this.isMobileMenuVisible ? 'shown' : 'hidden')
|
||||
if (this.isMobileMenuVisible) {
|
||||
this.$root.$el.classList.add('no-scroll')
|
||||
} else {
|
||||
this.$root.$el.classList.remove('no-scroll')
|
||||
}
|
||||
}
|
||||
|
||||
@Watch('$route')
|
||||
hideMenu () {
|
||||
this.isMobileMenuVisible = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~carbon-components/scss/globals/scss/typography';
|
||||
|
||||
.menu {
|
||||
&__main-level {
|
||||
--link-color: #{$text-color-light};
|
||||
}
|
||||
|
||||
&__mobile {
|
||||
position: relative;
|
||||
|
||||
@include mq($from: large) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__mobile-menu-toggle {
|
||||
// remove from page flow and hid
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.menu__mobile-menu {
|
||||
position: fixed;
|
||||
top: 3.5rem; // taking into account the height of the top menu
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 150;
|
||||
width: 12rem;
|
||||
box-shadow: 0 .5rem .5rem rgba(0,0,0,.25);
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
&_visible {
|
||||
visibility: visible;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
@include mq($until: medium) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__mobile-inner-container,
|
||||
&__navigation-level {
|
||||
padding-top: $spacing-05;
|
||||
padding-bottom: $spacing-05;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
&_wider {
|
||||
max-width: $max-size;
|
||||
}
|
||||
}
|
||||
|
||||
&__mobile-inner-container {
|
||||
@include contained();
|
||||
}
|
||||
|
||||
&__navigation-level {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
@include mq($until: large) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(.bx--grid) {
|
||||
@include contained();
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
height: 1.5rem;
|
||||
width: auto;
|
||||
color: $text-color-lighter;
|
||||
|
||||
&_active {
|
||||
color: $text-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__entry {
|
||||
@include type-style('body-long-02');
|
||||
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
margin-right: $spacing-09;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// targeting specific links for consistent spacing
|
||||
&:nth-child(3) {
|
||||
margin-right: $spacing-07;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
&_second-level {
|
||||
color: var(--link-color);
|
||||
@include type-style('body-long-02');
|
||||
|
||||
display: block;
|
||||
padding: $spacing-03 $spacing-05;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&_active {
|
||||
color: $text-active-color;
|
||||
|
||||
::v-deep {
|
||||
.bx--list-box__label {
|
||||
color: $link-visited-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__home-link {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__hamburger-toggle {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~carbon-components/scss/globals/scss/typography';
|
||||
// Override component styling to match qiskit design
|
||||
.menu {
|
||||
.bx--form-item {
|
||||
@include mq($from: large) {
|
||||
margin-right: $spacing-07;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bx--dropdown {
|
||||
background: $background-color-white;
|
||||
height: initial;
|
||||
max-height: initial;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.bx--dropdown--open {
|
||||
border-bottom: 1px solid $cool-gray-30;
|
||||
}
|
||||
|
||||
.bx--list-box__menu {
|
||||
background-color: $background-color-white;
|
||||
top: calc(3.25rem + 1px);
|
||||
box-shadow: initial;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bx--dropdown--open,
|
||||
.bx--dropdown--open .bx--list-box__menu {
|
||||
background: $cool-gray-10;
|
||||
}
|
||||
|
||||
.bx--list-box__label {
|
||||
@include type-style('body-long-02');
|
||||
}
|
||||
|
||||
.bx--dropdown--open .bx--list-box__label {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
// Dropdown button
|
||||
.bx--list-box__field {
|
||||
display: flex;
|
||||
height: calc(3.25rem);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover .bx--list-box__label {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.bx--dropdown-item {
|
||||
position: relative;
|
||||
|
||||
// using pseudo element to achieve partial underline
|
||||
&:nth-last-child(n+2)::after {
|
||||
content: '';
|
||||
border-bottom: 1px solid $cool-gray-30;
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $background-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
.bx--list-box__menu-icon {
|
||||
top: initial;
|
||||
|
||||
& > svg {
|
||||
fill: var(--link-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
<template>
|
||||
<!-- tabindex is needed to allow hiding the menu in iOS Safari -->
|
||||
<div tabindex="-1">
|
||||
<header id="navigation">
|
||||
<TheMenu @change-visibility="isMenuShown = $event === 'shown'" />
|
||||
</header>
|
||||
<nuxt />
|
||||
<div>
|
||||
<qiskit-ui-shell variant="hide-account" @on-click="onClick" />
|
||||
<div class="main-container">
|
||||
<nuxt />
|
||||
</div>
|
||||
<PageFooter theme="light" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -12,9 +11,18 @@
|
|||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import { Component } from 'vue-property-decorator'
|
||||
import '@qiskit/web-components/components/ui-shell'
|
||||
|
||||
@Component
|
||||
export default class MaxLayout extends Vue {
|
||||
isMenuShown: boolean = false
|
||||
onClick (e: CustomEvent) {
|
||||
this.$trackClickEvent(`${e.detail?.label?.toLowerCase()}`, 'menu')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-container {
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,9 @@
|
|||
<template>
|
||||
<!-- tabindex is needed to allow hiding the menu in iOS Safari -->
|
||||
<div tabindex="-1">
|
||||
<header id="navigation">
|
||||
<TheMenu
|
||||
old-container
|
||||
@change-visibility="isMenuShown = $event === 'shown'"
|
||||
/>
|
||||
</header>
|
||||
<nuxt />
|
||||
<div>
|
||||
<qiskit-ui-shell variant="hide-account" @on-click="onClick" />
|
||||
<div class="main-container">
|
||||
<nuxt />
|
||||
</div>
|
||||
<PageFooter old-container theme="light" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -15,9 +11,18 @@
|
|||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import { Component } from 'vue-property-decorator'
|
||||
import '@qiskit/web-components/components/ui-shell'
|
||||
|
||||
@Component
|
||||
export default class DefaultLayout extends Vue {
|
||||
isMenuShown: boolean = false
|
||||
onClick (e: CustomEvent) {
|
||||
this.$trackClickEvent(`${e.detail?.label?.toLowerCase()}`, 'menu')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-container {
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
import { Component } from 'vue-property-decorator'
|
||||
|
||||
import {
|
||||
ORDERED_COMMUNITY_SUB_LINKS,
|
||||
HOME_LINK,
|
||||
COMMUNITY_LINK,
|
||||
TUTORIALS_LINK,
|
||||
DOCUMENTATION_LINK,
|
||||
LEARN_LINK,
|
||||
OVERVIEW_LINK,
|
||||
NavLink
|
||||
} from '~/constants/menuLinks'
|
||||
|
||||
@Component
|
||||
export default class Menu extends Vue {
|
||||
homeLink: NavLink = HOME_LINK
|
||||
|
||||
learnMore: Array<NavLink> = [TUTORIALS_LINK, DOCUMENTATION_LINK]
|
||||
|
||||
mainLevelLinks: Array<NavLink> = [
|
||||
OVERVIEW_LINK,
|
||||
LEARN_LINK,
|
||||
{ ...COMMUNITY_LINK, sublinks: ORDERED_COMMUNITY_SUB_LINKS },
|
||||
DOCUMENTATION_LINK
|
||||
]
|
||||
|
||||
communityLink: NavLink = COMMUNITY_LINK
|
||||
|
||||
communitySubLinks: Array<NavLink> = ORDERED_COMMUNITY_SUB_LINKS
|
||||
|
||||
isPathStartingWith (linkPath: string): boolean {
|
||||
return this.$route.path.startsWith(linkPath)
|
||||
}
|
||||
|
||||
isActiveHome (link: NavLink): boolean {
|
||||
return this.$route.path === (link.url)
|
||||
}
|
||||
|
||||
isActive (link: NavLink): boolean {
|
||||
// TODO: Should remove after the new menu (second menu included) is
|
||||
// completely done. #573
|
||||
return this.isPathStartingWith(link.url)
|
||||
}
|
||||
|
||||
isCommunityActive (): boolean {
|
||||
return this.communitySubLinks.some(link => this.isActive(link))
|
||||
}
|
||||
|
||||
getSubLinks (item: NavLink): NavLink[] {
|
||||
return typeof item.sublinks !== 'undefined' ? item.sublinks : []
|
||||
}
|
||||
|
||||
isParent (item: NavLink): boolean {
|
||||
return this.getSubLinks(item).length !== 0
|
||||
}
|
||||
|
||||
appLinkFromNavLink (item: NavLink): any {
|
||||
return {
|
||||
url: item.url,
|
||||
segment: item.segment
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1131,9 +1131,9 @@
|
|||
"integrity": "sha512-kmzN2Zjyp4EmCAlGu561+dJVABH96n5+RnjmsPdv4wrSx+FNyzbxnKYV1x2FYrTxtZ9LB+pd3EofEyVuQM6V0Q=="
|
||||
},
|
||||
"@carbon/icons": {
|
||||
"version": "11.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@carbon/icons/-/icons-11.5.0.tgz",
|
||||
"integrity": "sha512-2k6TGPsqxQunVsWK6b/zWUQ2tjVFBBxCWRI2shJcgu016XsslMWs+zAa0ASZ7MYxOrhgisDmGvXQDVRU7MF68A=="
|
||||
"version": "11.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@carbon/icons/-/icons-11.7.0.tgz",
|
||||
"integrity": "sha512-Q6CPWSI/ypl+thK9Mivsf1/QPUa2sKMXazRe1sIlGwYA+gshWde9GYf7PPCoSOy8Agzw+VRQM8G8yMb1SLx/hg=="
|
||||
},
|
||||
"@carbon/icons-vue": {
|
||||
"version": "10.49.1",
|
||||
|
|
@ -1940,9 +1940,9 @@
|
|||
}
|
||||
},
|
||||
"@lit/reactive-element": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.2.tgz",
|
||||
"integrity": "sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA=="
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.1.tgz",
|
||||
"integrity": "sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw=="
|
||||
},
|
||||
"@lokidb/full-text-search": {
|
||||
"version": "2.1.0",
|
||||
|
|
@ -3004,20 +3004,20 @@
|
|||
"@carbon/type": "^10.30.0",
|
||||
"carbon-web-components": "^1.19.0",
|
||||
"core-js": "^3.6.5",
|
||||
"vue-demi": "^0.12.1"
|
||||
"vue-demi": "^0.13.11"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue-demi": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
|
||||
"integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw=="
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@qiskit/web-components": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@qiskit/web-components/-/web-components-0.4.0.tgz",
|
||||
"integrity": "sha512-jqWv0DIhdtJ3LjX/iBc9FnNR8N1jrCuPSedk9SXi2OLWqwg3LObDz3TYZQMLm+sWWv8a5tPobeHwwog3vvXdMA==",
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@qiskit/web-components/-/web-components-0.9.0.tgz",
|
||||
"integrity": "sha512-uKFFRrpitvHBDrIzz7U3h2Nd1V0r7mh5lJOKJsWxlM17yXKFtWLm22QGBhOBkSiHYHFgUmxDKoOQw2BOJMEAxw==",
|
||||
"requires": {
|
||||
"@carbon/colors": "^10.37.1",
|
||||
"@carbon/icon-helpers": "^10.30.0",
|
||||
|
|
@ -3025,24 +3025,24 @@
|
|||
"@carbon/layout": "^10.37.1",
|
||||
"@carbon/type": "^10.44.0",
|
||||
"carbon-web-components": "^1.21.0",
|
||||
"lit": "^2.2.5",
|
||||
"lit-element": "^3.2.0",
|
||||
"lit-html": "^2.2.5",
|
||||
"lit": "^2.3.1",
|
||||
"lit-element": "^3.2.2",
|
||||
"lit-html": "^2.3.1",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.18.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
|
||||
"integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
|
||||
"version": "7.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
|
||||
"integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"@carbon/icon-helpers": {
|
||||
"version": "10.31.0",
|
||||
"resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.31.0.tgz",
|
||||
"integrity": "sha512-1H7J+mapu1mWS8exIsHuwDMGg0QfCQpz3ho9g/vTGJAhB/s3aPAVBx0yfswB92SLzznriDflSaIHZAi6vshpUg=="
|
||||
"version": "10.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.32.0.tgz",
|
||||
"integrity": "sha512-t5kAnx0STZhUo6F0cLnnecKHYg2I7w84i53XiKZz3FGqiEZLFMpljKnQDe6/I7VNwzgBq0PN1dlDhZ8qqKXj5Q=="
|
||||
},
|
||||
"@carbon/import-once": {
|
||||
"version": "10.7.0",
|
||||
|
|
@ -3055,9 +3055,9 @@
|
|||
"integrity": "sha512-iX8rWc2CkFB7W7wi5NLa3pVRVb/jRI2KrVDna3FO3X3DgNz3zoRCgN+r2c+8FEhpJWeUwds5aDzTWUuTtlOT3w=="
|
||||
},
|
||||
"@carbon/type": {
|
||||
"version": "10.44.0",
|
||||
"resolved": "https://registry.npmjs.org/@carbon/type/-/type-10.44.0.tgz",
|
||||
"integrity": "sha512-sLe4e9gu2QuM8k6PrXWc9xWpH6W9Q/FJ+/IHNFpx+8zBLkBsM6dbf4o76Zw9OcV2HuAA+8K3JOpZJ4r76fw8kg==",
|
||||
"version": "10.45.0",
|
||||
"resolved": "https://registry.npmjs.org/@carbon/type/-/type-10.45.0.tgz",
|
||||
"integrity": "sha512-ObeozCPbGJveztkz30avGoGlNsFsRtQ8RUpOCaCqa7PPN9hXjN2wonlwdOGExSbUqHVHkwONJQlNSwWnJlE9PA==",
|
||||
"requires": {
|
||||
"@carbon/grid": "^10.43.0",
|
||||
"@carbon/import-once": "^10.7.0"
|
||||
|
|
@ -3108,18 +3108,18 @@
|
|||
"integrity": "sha512-3ULSxbXmcMIRzer/2jLNweoqHpwDvsjEawO2FUd9UFR8uPwLM+LruZcPDpuZStcEgbQKhuFOfXo4nYdGladSNw=="
|
||||
},
|
||||
"lit-element": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.0.tgz",
|
||||
"integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz",
|
||||
"integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==",
|
||||
"requires": {
|
||||
"@lit/reactive-element": "^1.3.0",
|
||||
"lit-html": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"lit-html": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.6.tgz",
|
||||
"integrity": "sha512-xOKsPmq/RAKJ6dUeOxhmOYFjcjf0Q7aSdfBJgdJkOfCUnkmmJPxNrlZpRBeVe1Gg50oYWMlgm6ccAE/SpJgSdw==",
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.3.1.tgz",
|
||||
"integrity": "sha512-FyKH6LTW6aBdkfNhNSHyZTnLgJSTe5hMk7HFtc/+DcN1w74C215q8B+Cfxc2OuIEpBNcEKxgF64qL8as30FDHA==",
|
||||
"requires": {
|
||||
"@types/trusted-types": "^2.0.2"
|
||||
}
|
||||
|
|
@ -12339,28 +12339,28 @@
|
|||
}
|
||||
},
|
||||
"lit": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/lit/-/lit-2.2.6.tgz",
|
||||
"integrity": "sha512-K2vkeGABfSJSfkhqHy86ujchJs3NR9nW1bEEiV+bXDkbiQ60Tv5GUausYN2mXigZn8lC1qXuc46ArQRKYmumZw==",
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/lit/-/lit-2.3.1.tgz",
|
||||
"integrity": "sha512-TejktDR4mqG3qB32Y8Lm5Lye3c8SUehqz7qRsxe1PqGYL6me2Ef+jeQAEqh20BnnGncv4Yxy2njEIT0kzK1WCw==",
|
||||
"requires": {
|
||||
"@lit/reactive-element": "^1.3.0",
|
||||
"@lit/reactive-element": "^1.4.0",
|
||||
"lit-element": "^3.2.0",
|
||||
"lit-html": "^2.2.0"
|
||||
"lit-html": "^2.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"lit-element": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.0.tgz",
|
||||
"integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz",
|
||||
"integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==",
|
||||
"requires": {
|
||||
"@lit/reactive-element": "^1.3.0",
|
||||
"lit-html": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"lit-html": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.6.tgz",
|
||||
"integrity": "sha512-xOKsPmq/RAKJ6dUeOxhmOYFjcjf0Q7aSdfBJgdJkOfCUnkmmJPxNrlZpRBeVe1Gg50oYWMlgm6ccAE/SpJgSdw==",
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.3.1.tgz",
|
||||
"integrity": "sha512-FyKH6LTW6aBdkfNhNSHyZTnLgJSTe5hMk7HFtc/+DcN1w74C215q8B+Cfxc2OuIEpBNcEKxgF64qL8as30FDHA==",
|
||||
"requires": {
|
||||
"@types/trusted-types": "^2.0.2"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
"@nuxtjs/axios": "^5.13.6",
|
||||
"@open-wc/webpack-import-meta-loader": "^0.4.7",
|
||||
"@qiskit-community/qiskit-vue": "^3.4.0",
|
||||
"@qiskit/web-components": "^0.4.0",
|
||||
"@qiskit/web-components": "^0.9.0",
|
||||
"@vue/composition-api": "^1.4.9",
|
||||
"airtable": "~0.11.4",
|
||||
"cross-env": "^7.0.3",
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@ import ArrowRight20 from '@carbon/icons-vue/lib/arrow--right/20'
|
|||
import ArrowRight16 from '@carbon/icons-vue/lib/arrow--right/16'
|
||||
import ArrowLeft16 from '@carbon/icons-vue/lib/arrow--left/16'
|
||||
import ArrowDown16 from '@carbon/icons-vue/lib/arrow--down/16'
|
||||
import Menu20 from '@carbon/icons-vue/lib/menu/20'
|
||||
import Close20 from '@carbon/icons-vue/lib/close/20'
|
||||
import LogoTwitter20 from '@carbon/icons-vue/lib/logo--twitter/20'
|
||||
import LogoSlack20 from '@carbon/icons-vue/lib/logo--slack/20'
|
||||
import LogoYouTube20 from '@carbon/icons-vue/lib/logo--youtube/20'
|
||||
|
|
@ -36,8 +34,6 @@ Vue.use(CarbonIconsVue, {
|
|||
ArrowRight16,
|
||||
ArrowLeft16,
|
||||
ArrowDown16,
|
||||
Menu20,
|
||||
Close20,
|
||||
LogoTwitter20,
|
||||
LogoSlack20,
|
||||
LogoYouTube20,
|
||||
|
|
|
|||
Loading…
Reference in New Issue