diff --git a/app/hooks/useMobile.js b/app/hooks/useMobile.js new file mode 100644 index 000000000..c143439c0 --- /dev/null +++ b/app/hooks/useMobile.js @@ -0,0 +1,8 @@ +// @flow +import { useTheme } from "styled-components"; +import useMediaQuery from "hooks/useMediaQuery"; + +export default function useMobile(): boolean { + const theme = useTheme(); + return useMediaQuery(`(max-width: ${theme.breakpoints.tablet}px)`); +} diff --git a/app/scenes/Document/components/Header.js b/app/scenes/Document/components/Header.js index 4b7ec95d3..9a621d716 100644 --- a/app/scenes/Document/components/Header.js +++ b/app/scenes/Document/components/Header.js @@ -22,6 +22,7 @@ import Fade from "components/Fade"; import Header from "components/Header"; import Modal from "components/Modal"; import Tooltip from "components/Tooltip"; +import useMobile from "hooks/useMobile"; import useStores from "hooks/useStores"; import DocumentMenu from "menus/DocumentMenu"; import NewChildDocumentMenu from "menus/NewChildDocumentMenu"; @@ -61,6 +62,7 @@ function DocumentHeader({ }: Props) { const { t } = useTranslation(); const { auth, ui, shares, policies } = useStores(); + const isMobile = useMobile(); const [showShareModal, setShowShareModal] = React.useState(false); const handleSave = React.useCallback(() => { @@ -182,7 +184,7 @@ function DocumentHeader({ )} - {!isEditing && canShareDocument && ( + {!isEditing && canShareDocument && (!isMobile || !isTemplate) && ( )} {canEdit && editAction} - {canEdit && can.createChildDocument && ( + {canEdit && can.createChildDocument && !isMobile && (