From 471d8f47146c3460d3ed125905374a79e8ddd436 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Sun, 23 Feb 2020 05:49:52 +0300
Subject: [PATCH] useScreenType replaced with useMobile; hide breadcrumbs on
 mobile

---
 src/components/App/index.tsx        |  6 ++++--
 src/components/Navigation/index.tsx |  6 +++---
 src/hooks/useMobile.ts              |  5 +++++
 src/hooks/useScreenType.ts          | 15 ---------------
 4 files changed, 12 insertions(+), 20 deletions(-)
 create mode 100644 src/hooks/useMobile.ts
 delete mode 100644 src/hooks/useScreenType.ts

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 2ca49e69..cb13d895 100644
--- a/src/components/App/index.tsx
+++ b/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}
diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx
index 25780b76..4985b75c 100644
--- a/src/components/Navigation/index.tsx
+++ b/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'}
diff --git a/src/hooks/useMobile.ts b/src/hooks/useMobile.ts
new file mode 100644
index 00000000..f4dba4a7
--- /dev/null
+++ b/src/hooks/useMobile.ts
@@ -0,0 +1,5 @@
+import useMedia from 'use-media'
+
+export function useMobile(): boolean {
+    return useMedia('(max-width: 31.25em)', false)
+}
diff --git a/src/hooks/useScreenType.ts b/src/hooks/useScreenType.ts
deleted file mode 100644
index 33743ed7..00000000
--- a/src/hooks/useScreenType.ts
+++ /dev/null
@@ -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
-}