diff --git a/src/components/Layout/ActivityBar/ActivityBar.tsx b/src/components/Layout/ActivityBar/ActivityBar.tsx index a4c5e2fa..27e937bb 100644 --- a/src/components/Layout/ActivityBar/ActivityBar.tsx +++ b/src/components/Layout/ActivityBar/ActivityBar.tsx @@ -1,29 +1,26 @@ import { css } from '@emotion/react' -import { Box, Flex, Grid, Text } from '@radix-ui/themes' -import { useMatch } from 'react-router-dom' +import { + Box, + DropdownMenu, + Flex, + Grid, + IconButton, + Text, +} from '@radix-ui/themes' +import { Link, useMatch } from 'react-router-dom' import K6Logo from '@/assets/logo.svg' import { getRoutePath } from '@/routeMap' import { ThemeSwitcher } from '@/components/ThemeSwitcher' import { VersionLabel } from './VersionLabel' -import { - GeneratorIcon, - HomeIcon, - RecorderIcon, - ValidatorIcon, -} from '@/components/icons' +import { HomeIcon } from '@/components/icons' import { useCreateGenerator } from '@/hooks/useCreateGenerator' import { NavIconButton } from './NavIconButton' +import { PlusIcon } from '@/components/icons/PlusIcon' export function ActivityBar() { const createNewGenerator = useCreateGenerator() const homeMatch = useMatch(getRoutePath('home')) - const recorderMatch = useMatch(getRoutePath('recorder')) - const validatorMatch = useMatch(getRoutePath('validator')) - const generatorMatch = useMatch({ - path: getRoutePath('generator'), - end: false, - }) return ( @@ -53,24 +50,26 @@ export function ActivityBar() { tooltip="Home" active={Boolean(homeMatch)} /> - } - tooltip="Test recorder" - active={Boolean(recorderMatch)} - /> - } - tooltip="New test generator" - active={Boolean(generatorMatch)} - /> - } - tooltip="Test validator" - active={Boolean(validatorMatch)} - /> + + + + + + + + + + Record flow + + + + Generate test + + + Validate script + + + diff --git a/src/components/icons/PlusIcon.tsx b/src/components/icons/PlusIcon.tsx new file mode 100644 index 00000000..c92f9cbd --- /dev/null +++ b/src/components/icons/PlusIcon.tsx @@ -0,0 +1,28 @@ +import { forwardRef, SVGAttributes } from 'react' + +export const PlusIcon = forwardRef>( + function PlusIcon({ color = 'currentColor', ...props }, ref) { + return ( + + + + + ) + } +)