diff --git a/src/components/ToolHeader.tsx b/src/components/ToolHeader.tsx index 47292f8..01275c4 100644 --- a/src/components/ToolHeader.tsx +++ b/src/components/ToolHeader.tsx @@ -10,6 +10,7 @@ import { useEffect, useState } from 'react'; import { isBookmarked, toggleBookmarked } from '@utils/bookmark'; import IconButton from '@mui/material/IconButton'; import { useTranslation } from 'react-i18next'; +import useMediaQuery from '@mui/material/useMediaQuery'; const StyledButton = styled(Button)(({ theme }) => ({ backgroundColor: 'white', @@ -30,6 +31,8 @@ interface ToolHeaderProps { function ToolLinks() { const { t } = useTranslation(); const [examplesVisible, setExamplesVisible] = useState(false); + const theme = useTheme(); + const isMd = useMediaQuery(theme.breakpoints.down('md')); useEffect(() => { const timeout = setTimeout(() => { @@ -50,16 +53,18 @@ function ToolLinks() { } return ( - - scrollToElement('tool')} - > - Use This Tool - - + {isMd && ( + + scrollToElement('tool')} + > + Use This Tool + + + )} {examplesVisible && (