use material-ui media query.

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.3",
     "@storybook/addon-backgrounds": "^6.3.6",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

src/App.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useMediaQuery } from '@material-ui/core';
 
 import Sidebar from './components/Sidebar';
 import AdminScreen from './components/AdminScreen';
@@ -17,6 +18,7 @@ function App() {
     { title: "Settings", icon: 'settings', link: "/"},
   ]
   const [actives, setActives] = useState(Array(menu.length).fill(false));
+  const isMidScreen = useMediaQuery(`(max-width: 920px)`)
 
   let itemList = menu.map((e, i) => ({...e, active: actives[i]}));
 
@@ -34,7 +36,7 @@ function App() {
 
     <div className="row g-0 vh-100">
       <div className="col-2 col-lg-3 h-100">
-        <Sidebar itemList={itemList} onSelect={onSelect}/>
+        <Sidebar itemList={itemList} onSelect={onSelect} simple={isMidScreen}/>
       </div>
 
       <div className="col-10 col-lg-9 h-100">

src/components/Pagenation.js

@@ -44,7 +44,7 @@ function NumPagenation(props) {
 
         {
           nums.map((n) =>
-            <li key={n} className={`page-item d-none d-md-block ${ n === curr ? "active" : ""}`}>
+            <li key={n} className={`page-item ${ n === curr ? "active" : ""}`}>
               <a className="page-link" onClick={() => onIndex(n)}>{n}</a>
             </li>
           )