diff --git a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js index aae281312..cbc89431d 100644 --- a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js +++ b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js @@ -7,6 +7,7 @@ import React, { } from 'react'; import cx from 'classnames'; import useMedia from 'use-media'; +import { Locked16 } from '@carbon/icons-react'; import NavContext from '../../util/context/NavContext'; import { nav, open, divider, link, linkDisabled } from './Switcher.module.scss'; @@ -61,6 +62,7 @@ export const SwitcherDivider = (props) => ( export const SwitcherLink = ({ disabled, children, + isInternal, href: hrefProp, ...rest }) => { @@ -79,6 +81,7 @@ export const SwitcherLink = ({ href={href} {...rest}> {children} + {isInternal && } ); @@ -88,36 +91,43 @@ export const SwitcherLink = ({ // Note: if you change this, update the max-height in the switcher stylesheet const DefaultChildren = () => ( <> - IBM Design + Foundations + + IBM Brand Center + IBM Design Language - IBM Brand Center - - IBM Accessibility - - Design disciplines + Implementation - Product + Carbon Design System - - Digital + + Carbon for IBM.com - Event - Workplace - Design practices + + IBM Event Design + + Practices Enterprise Design Thinking - - IBM Design Research + + IBM Accessibility IBM Design for AI + + IBM Design Research + IBM iX + Community + + IBM Design + ); diff --git a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss index 3f1ac4470..c8ac95c0d 100644 --- a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss +++ b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss @@ -37,11 +37,10 @@ } .divider { - margin: 32px 1rem 0 1rem; + margin: 32px 1rem 8px 1rem; color: $carbon--gray-70; padding-bottom: 4px; border-bottom: 1px solid $carbon--gray-70; - margin-bottom: 8px; } .divider span { @@ -52,7 +51,8 @@ .link { padding: 6px 1rem; @include carbon--type-style('heading-01'); - display: block; + display: flex; + justify-content: space-between; text-decoration: none; color: $carbon--gray-30;