Tabs Are Now Responsive

src/components/Dashboard/HomePage/NavBar.tsx

 import React, { FC } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Tabs, Tab } from '@material-ui/core';
+import { Tabs, Tab, Grid, Hidden } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
 import ImportContactsIcon from '@material-ui/icons/ImportContacts';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
@@ -28,6 +28,21 @@ const useStyles = makeStyles(() => ({
   rightAlign: {
     marginLeft: 'auto',
   },
+  tabsSmall: {
+    color: 'white',
+    paddingLeft: '1.2em',
+    paddingRight: '1em',
+    paddingTop: '0.9em',
+    paddingBottom: '2em',
+    width: '100%',
+  },
+  tabIconSmall: {
+    fontSize: '2.4em',
+  },
+  tabPanSmall: {
+    paddingLeft: '2em',
+    paddingRight: '2em',
+  },
 }));
 
 export const NavBar: FC = () => {
@@ -45,32 +60,65 @@ export const NavBar: FC = () => {
   };
 
   return (
-    <Tabs
-      variant="scrollable"
-      scrollButtons="on"
-      onChange={handleChange}
-      value={value}
-      className={classes.tabs}
-      TabIndicatorProps={{ style: { display: 'none' } }}
-    >
-      <Tab
-        label="HomePage"
-        value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
-        icon={<HomeIcon className={classes.tabIcon} />}
-        className={classes.tabPan}
-      />
-      <Tab
-        label="Reservation"
-        value={`${AuthRoutes.dashboard}${AuthRoutes.reservation}`}
-        icon={<ImportContactsIcon className={classes.tabIcon} />}
-        className={`${classes.tabPan} ${classes.rightAlign}`}
-      />
-      <Tab
-        label="Profile"
-        value={`${AuthRoutes.dashboard}${AuthRoutes.profile}`}
-        className={classes.tabPan}
-        icon={<AccountCircleIcon className={classes.tabIcon} />}
-      />
-    </Tabs>
+    <div>
+      <Hidden smDown>
+        <Tabs
+          onChange={handleChange}
+          value={value}
+          className={classes.tabs}
+          TabIndicatorProps={{ style: { display: 'none' } }}
+        >
+          <Tab
+            label="HomePage"
+            value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
+            icon={<HomeIcon className={classes.tabIcon} />}
+            className={classes.tabPan}
+          />
+
+          <Tab
+            label="Reservation"
+            value={`${AuthRoutes.dashboard}${AuthRoutes.reservation}`}
+            icon={<ImportContactsIcon className={classes.tabIcon} />}
+            className={`${classes.tabPan} ${classes.rightAlign}`}
+          />
+          <Tab
+            label="Profile"
+            value={`${AuthRoutes.dashboard}${AuthRoutes.profile}`}
+            className={classes.tabPan}
+            icon={<AccountCircleIcon className={classes.tabIcon} />}
+          />
+        </Tabs>
+      </Hidden>
+
+      <Hidden mdUp>
+        <Tabs
+          onChange={handleChange}
+          value={value}
+          className={classes.tabsSmall}
+          TabIndicatorProps={{ style: { display: 'none' } }}
+          centered
+        >
+          <Tab
+            label=""
+            value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
+            icon={<HomeIcon className={classes.tabIconSmall} />}
+            className={classes.tabPanSmall}
+          />
+
+          <Tab
+            label=""
+            value={`${AuthRoutes.dashboard}${AuthRoutes.reservation}`}
+            icon={<ImportContactsIcon className={classes.tabIconSmall} />}
+            className={classes.tabPanSmall}
+          />
+          <Tab
+            label=""
+            value={`${AuthRoutes.dashboard}${AuthRoutes.profile}`}
+            icon={<AccountCircleIcon className={classes.tabIconSmall} />}
+            className={classes.tabPanSmall}
+          />
+        </Tabs>
+      </Hidden>
+    </div>
   );
 };