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 ( +
+
+
{t(item.titleKey)}
+
+ +
+
+
+ ); + } + + return ( + + {t(item.titleKey)} + {item.isNew ? ( +
+ +
+ ) : null} + + ); + }; + return (
@@ -50,27 +77,7 @@ export const Menu: React.FC = () => { ).startsWith(item.url), })} > - {item.isComingSoon ? ( -
-
-
- {t(item.titleKey)} -
-
- -
-
-
- ) : ( - - {t(item.titleKey)} - - )} + {renderItem(item)}
))}
@@ -114,30 +121,7 @@ export const Menu: React.FC = () => {
{menu.map((item) => (
- {item.isComingSoon ? ( -
-
-
- {t(item.titleKey)} -
-
- -
-
-
- ) : ( - - {t(item.titleKey)} - - )} + {renderItem(item)}
))}
diff --git a/src/content/menu.ts b/src/content/menu.ts index cf40a34008ec..2f911aabe0eb 100644 --- a/src/content/menu.ts +++ b/src/content/menu.ts @@ -2,6 +2,7 @@ export type MenuItem = { titleKey: string; url: string; isComingSoon?: boolean; + isNew?: boolean; }; export const menu: MenuItem[] = [ @@ -25,5 +26,6 @@ export const menu: MenuItem[] = [ { titleKey: 'menu_themer', url: '/themer', + isNew: true, }, ];