diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx
index a9fe78ce07..a398f4c537 100644
--- a/frontend/src/container/SideNav/index.tsx
+++ b/frontend/src/container/SideNav/index.tsx
@@ -1,5 +1,5 @@
import { CheckCircleTwoTone, WarningOutlined } from '@ant-design/icons';
-import { Menu, Typography } from 'antd';
+import { Menu, Space, Typography } from 'antd';
import getLocalStorageKey from 'api/browser/localstorage/get';
import { IS_SIDEBAR_COLLAPSED } from 'constants/app';
import ROUTES from 'constants/routes';
@@ -19,6 +19,7 @@ import {
Sider,
SlackButton,
SlackMenuItemContainer,
+ Tags,
VersionContainer,
} from './styles';
@@ -96,13 +97,21 @@ function SideNav(): JSX.Element {
selectedKeys={[pathname]}
mode="inline"
>
- {menus.map(({ to, Icon, name }) => (
+ {menus.map(({ to, Icon, name, tags }) => (
}
onClick={(): void => onClickHandler(to)}
>
- {name}
+
+ {name}
+ {tags &&
+ tags.map((e) => (
+
+ {e}
+
+ ))}
+
))}
{sidebar.map((props, index) => (
diff --git a/frontend/src/container/SideNav/menuItems.ts b/frontend/src/container/SideNav/menuItems.ts
index 3b6a186b8d..921cef71d5 100644
--- a/frontend/src/container/SideNav/menuItems.ts
+++ b/frontend/src/container/SideNav/menuItems.ts
@@ -41,6 +41,7 @@ const menus: SidebarMenu[] = [
to: ROUTES.SERVICE_MAP,
name: 'Service Map',
Icon: DeploymentUnitOutlined,
+ tags: ['Beta'],
},
{
Icon: LineChartOutlined,
@@ -63,6 +64,7 @@ interface SidebarMenu {
to: string;
name: string;
Icon: typeof ApiOutlined;
+ tags?: string[];
}
export default menus;
diff --git a/frontend/src/container/SideNav/styles.ts b/frontend/src/container/SideNav/styles.ts
index 3d72951c99..ae0ed0898b 100644
--- a/frontend/src/container/SideNav/styles.ts
+++ b/frontend/src/container/SideNav/styles.ts
@@ -1,4 +1,4 @@
-import { Layout, Typography } from 'antd';
+import { Layout, Tag, Typography } from 'antd';
import { StyledCSS } from 'container/GantChart/Trace/styles';
import styled, { css } from 'styled-components';
@@ -75,3 +75,11 @@ export const VersionContainer = styled.div`
display: flex;
}
`;
+
+export const Tags = styled(Tag)`
+ &&& {
+ position: absolute;
+ top: 0;
+ border-radius: 0.5rem;
+ }
+`;