Hide progress bar

Author: Yadro

package.json

@@ -248,6 +248,7 @@
     "moment": "2.29.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-hook-media-query": "^1.0.5",
     "react-jss": "^10.6.0",
     "react-router-dom": "^5.2.0",
     "regenerator-runtime": "^0.13.5",

src/components/Header/Header.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Layout } from 'antd';
 import { observer } from 'mobx-react';
+import useMediaQuery from 'react-hook-media-query';
 
 import HeaderLink from '../HeaderLink/HeaderLink';
 import Profile from '../Profile/Profile';
@@ -10,7 +11,10 @@ import ProgressBar from '../ProgressBar/ProgressBar';
 
 const { Header: HeaderBase } = Layout;
 
+const query = '(min-width: 950px)';
 function Header() {
+  const isBigScreen = useMediaQuery(query);
+
   return (
     <HeaderBase>
       <HeaderLink>
@@ -22,9 +26,7 @@ function Header() {
       <HeaderLink>
         <Link to="/dashboard">Dashboard</Link>
       </HeaderLink>
-      <span className="flex-1">
-        <ProgressBar />
-      </span>
+      <span className="flex-1">{isBigScreen && <ProgressBar />}</span>
       <TaskControl />
       <Profile />
     </HeaderBase>

src/types/Types.d.ts

@@ -3,3 +3,9 @@ declare module 'universal-analytics' {
 
   export default ua;
 }
+
+declare module 'react-hook-media-query' {
+  const useMediaQuery: (query: string) => boolean;
+
+  export default useMediaQuery;
+}

yarn.lock

@@ -10168,6 +10168,11 @@ react-dom@^17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
+react-hook-media-query@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/react-hook-media-query/-/react-hook-media-query-1.0.5.tgz#e5d8282c5cd5b54f7b72923f6b05c92ab3e74ba8"
+  integrity sha512-3Sj6ChZQC/13/8w3Endyp+4erVnVgFWRnA8J8COKrx1JBC0/T2Uwt6c5Bo5lGFGQGSicTXwSxOKEy7+vKjLqFw==
+
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"