feat: menu

src/components/Menu/Menu.tsx

@@ -4,13 +4,14 @@ import {
 	StyledActivateButton, StyledBackground, StyledCloseIcon, StyledCopyright, StyledExtraContent,
 	StyledIcon,
 	StyledMenuContainer,
-	StyledMenuItem,
+	StyledMenuItem, StyledNextIcon,
 	StyledPlainMenuContainer, StyledPlainMenuItem
 } from './styled'
 import { Paths } from 'routes/Paths'
 import { menuConfig } from 'routes/menuConfig'
 import { Text } from '../Typography'
 import { ReactComponent as CloseSvg } from 'icons/close.svg'
+import { ReactComponent as CaretRightSvg } from 'icons/caretRight.svg'
 
 export interface MenuProps {
 	onClose: () => void
@@ -47,6 +48,7 @@ export const Menu: FC<MenuProps> = ({ onLogout, onClose }) => {
 							rel={item.target === '_blank' ? "noopener noreferrer" : undefined}>
 							<StyledIcon component={item.icon} />
 							{item.title}
+							<StyledNextIcon component={CaretRightSvg} />
 						</StyledPlainMenuItem>
 					))}
 					<StyledExtraContent>

src/components/Menu/styled.ts

@@ -105,3 +105,12 @@ export const StyledPlainMenuItem = styled(NavLink)`
     color: ${props => props.theme.brandPrimary};
   }
 `
+
+export const StyledNextIcon = styled(Icon)`
+  width: 9px;
+  height: 14px;
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  transform: translate3d(0, -50%, 0);
+`

src/icons/caretRight.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.05806 0.308058C1.30214 0.0639806 1.69786 0.0639806 1.94194 0.308058L8.19194 6.55806C8.43602 6.80214 8.43602 7.19786 8.19194 7.44194L1.94194 13.6919C1.69786 13.936 1.30214 13.936 1.05806 13.6919C0.813981 13.4479 0.813981 13.0521 1.05806 12.8081L6.86612 7L1.05806 1.19194C0.813981 0.947864 0.813981 0.552136 1.05806 0.308058Z" fill="currentColor"/>
+</svg>