useScreenType replaced with useMobile; hide breadcrumbs on mobile

src/components/App/index.tsx

@@ -10,6 +10,7 @@ import { Breadcrumbs } from '../Breadcrumbs'
 import { IBreadcumbsPart } from 'src/types'
 import { useRouter } from 'next/router'
 import { route } from 'next/dist/next-server/server/router'
+import { useMobile } from 'src/hooks/useMobile'
 
 const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigation), {
     ssr: false,
@@ -23,6 +24,7 @@ export interface IAppProps {
 }
 
 export const App: React.FC<IAppProps> = props => {
+    const hideBreadcrumbs = useMobile()
     const router = useRouter()
     const wide = props.wide ?? false
     const blockStyle = {
@@ -35,8 +37,8 @@ export const App: React.FC<IAppProps> = props => {
                 header={(
                     <header>
                         <Navigation />
-                        {!props.breadcrumbs ? null : (
-                            <Block direction={'vertical'} style={blockStyle}>
+                        {hideBreadcrumbs || !props.breadcrumbs ? null : (
+                            <Block direction={'horizontal'} style={blockStyle}>
                                 <Content wide={wide}>
                                     <Breadcrumbs
                                         items={props.breadcrumbs}

src/components/Navigation/index.tsx

@@ -1,5 +1,5 @@
 import { MenuToggle } from '../MenuToggle'
-import { useScreenType } from 'src/hooks/useScreenType'
+import { useMobile } from 'src/hooks/useMobile'
 import { Menu } from '../Menu'
 import { Overlay } from '../Overlay'
 import { useState, useCallback, useContext } from 'react'
@@ -10,7 +10,7 @@ export interface INavigationProps {
 }
 
 export const Navigation: React.FC<INavigationProps> = props => {
-    const isMobile = useScreenType(['phone', 'tablet'])
+    const collapseMenu = useMobile()
     const [open, setOpen] = useState(false)
     const onClick = useCallback(
         () => {
@@ -34,7 +34,7 @@ export const Navigation: React.FC<INavigationProps> = props => {
                 }
             `}</style>
 
-            {isMobile ? (
+            {collapseMenu ? (
                 <MenuToggle
                     open={open}
                     position={'right'}

src/hooks/useMobile.ts

@@ -0,0 +1,5 @@
+import useMedia from 'use-media'
+
+export function useMobile(): boolean {
+    return useMedia('(max-width: 31.25em)', false)
+}

src/hooks/useScreenType.ts

@@ -1,15 +0,0 @@
-import * as React from 'react'
-import useMedia from 'use-media'
-
-export type Type = 'phone' | 'tablet' | 'laptop' | 'desktop'
-
-export function useScreenType(types: Type[]): boolean {
-    const isPhone = useMedia('(max-width: 31.25em)')
-    const [match, setMatch] = React.useState(false)
-
-    React.useEffect(() => {
-        setMatch(isPhone && types.includes('phone'))
-    }, [isPhone])
-
-    return match
-}