diff --git a/src/assets/icons/new-label.svg b/src/assets/icons/new-label.svg new file mode 100644 index 000000000000..0b09ef325008 --- /dev/null +++ b/src/assets/icons/new-label.svg @@ -0,0 +1,3 @@ + diff --git a/src/components/Menu/Menu.scss b/src/components/Menu/Menu.scss index 7cc57f4e147b..00ba469de2fa 100644 --- a/src/components/Menu/Menu.scss +++ b/src/components/Menu/Menu.scss @@ -294,6 +294,18 @@ $border-color: rgba(255, 255, 255, 0.2); } } + &__new-label { + [dir='ltr'] & { + margin-left: -4px; + } + + [dir='rtl'] & { + margin-right: -4px; + } + + color: var(--g-color-text-brand); + } + &__link-icon { align-self: baseline; margin-top: 4px; diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 3722d7a13356..b36a5636779c 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -8,8 +8,9 @@ import nextI18nextConfig from '../../../next-i18next.config'; import linkArrowIcon from '../../assets/icons/link-arrow.svg'; import menuCloseIcon from '../../assets/icons/menu-close.svg'; import menuOpenIcon from '../../assets/icons/menu-open.svg'; +import newLabelIcon from '../../assets/icons/new-label.svg'; import soonLabelIcon from '../../assets/icons/soon-label.svg'; -import {menu} from '../../content/menu'; +import {MenuItem, menu} from '../../content/menu'; import {socialLinks} from '../../content/social-links'; import {EnvironmentContext} from '../../contexts'; import {block} from '../../utils'; @@ -31,6 +32,32 @@ export const Menu: React.FC = () => { const {isRtl} = React.useContext(EnvironmentContext); + const renderItem = (item: MenuItem) => { + if (item.isComingSoon) { + return ( +