Tab pages being rendered within drawer rather than on main page - reactjs

Question

When clicking on a tab, the elements of the page in question are rendered within the drawer for all the positions except for Appbar which is rendered on top. How do I render it within the main page whereas the main page= 100% window size - (drawer+AppBar).
The element on all 4 pages are just one-word texts like yon the Home page shown below the main code for reference,
main code:
import React, {Fragment} from 'react';
import AppBar from '#material-ui/core/AppBar';
import CssBaseline from '#material-ui/core/CssBaseline';
import Drawer from '#material-ui/core/Drawer';
import Hidden from '#material-ui/core/Hidden';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import { makeStyles, withStyles } from '#material-ui/core/styles';
import SearchBar from '../TopBar/SearchBar'
import Home from '../Screens/Home'
import home from '../home.svg';
import Contact from '../Screens/Contact'
import contact from '../contact.svg';
import Profile from '../Screens/Profile'
import profile from '../profile.svg';
import Settings from '../Screens/Settings'
import settings from '../settings.svg'
import Tabs from "#material-ui/core/Tabs";
import Tab from "#material-ui/core/Tab";
import { Switch, Route, Link, BrowserRouter} from "react-router-dom";
const VerticalTabs = withStyles(theme => ({
flexContainer: {
flexDirection: "column"
},
indicator: {
display: "none"
},
root:{
position:"relative",
left:-70,
top:-40,
},
}))(Tabs);
const MyTab = withStyles(theme => ({
selected: {
color: "white",
borderRight: "none",
},
root: {
//minWidth: 121,
margin:0,
paddingBottom:119
},
'#media screen and (min-width: 600px) and (max-width: 1205px)':{
root: {
minWidth: 100,
}
}
}))(Tab);
const styles = theme => ({
root: {
flexGrow: 1,
marginTop: theme.spacing.unit * 3,
backgroundColor: theme.palette.background.paper,
},
tabRoot: {
minWidth: 10,
},
});
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
},
menuButton:{
visibility: "hidden"
},
appBar: {
marginLeft: 300,
},
drawerPaper: {
width: 100,
background: "#262A2C",
fontSize:65,
height: 2300,
top:-10
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
'#media screen and (min-width: 600px) and (max-width: 1205px)':{
drawerPaper: {
width: 80,
//background: "black"
},
},
'#media (max-width: 600px)':{
drawerPaper: {
width: 300,
//background: "black"
},
appBar: {
},
menuButton:{
visibility: "visible"
},
}
}));
function ResponsiveDrawer() {
const [value, setValue] = React.useState(0);
const classes = useStyles();
const [mobileOpen, setMobileOpen] = React.useState(false);
function handleChange(event, Value) {
setValue(Value);
}
function handleDrawerToggle() {
setMobileOpen(!mobileOpen);
}
const drawer = (
<BrowserRouter>
<Route
path="/"
render={({ location }) => (
<Fragment>
<nav>
<div className= "tabs" style={{ left: 70, position: "relative", marginTop: 40 ,}}>
<VerticalTabs value={location.pathname} variant="fullWidth" onChange={handleChange}
>
<MyTab
component={Link} to="../Screens/Home"
icon ={<img
className= "home"
src={home}
alt="home"
/*Pay FlatIcon or replace by design *//>}
label={<p className="home-Text" >
Home
</p>}
/>
<MyTab
component={Link} to="../Screens/Contact"
icon ={<img
className= "contact"
src={contact}
alt="contact"
/*Pay FlatIcon or replace by design *//>}
label={<p className="contacts-Text" >
Contact
</p>}
/>
<MyTab
component={Link} to="../Screens/Profile"
icon={<img
className= "profile"
src={profile}
alt="profile"
/*Pay FlatIcon or replace by design *//>}
label={<p className= "profile-Text" >
Profile
</p>}
/>
<MyTab
component={Link} to="../Screens/Settings"
icon = {<img
className= "settings"
src={settings}
alt="settings"
/*Pay FlatIcon or replace by design *//>}
label={<p className="hsettings-Text" >
Settings
</p>}
/>
</VerticalTabs>
<Switch>
<Route path="../Screens/Home" component={Home}/>
<Route path="../Screeens/Contact" component={Contact}/>
<Route path="../Screeens/Profile" component={Profile}/>
<Route path="../Screeens/Settings" component={Settings}/>
</Switch>
</div>
</nav>
</Fragment>
)}
/>
</BrowserRouter>
);
return (
<div className="aBar">
<CssBaseline />
<AppBar style={{position:"fixed"}} position="relative" style={{ background: 'transparent', boxShadow: 'none', color: "red"}}>
<Toolbar>
<IconButton
color="inherit"
aria-label="Open drawer"
edge="start"
onClick={handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<SearchBar />
<div className="logo">
<Typography className= "logo-Spec" style={{fontSize:30}}>
Logo
</Typography>
</div>
</Toolbar>
</AppBar>
<nav className={classes.drawer}>
{/* The implementation can be swapped with js to avoid SEO duplication of links. */}
<Hidden smUp implementation="css">
<Drawer
style={{color:"black"}}
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden xsDown implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
</div>
);
}
export default withStyles(styles)(ResponsiveDrawer);
Home.js (same for all four pages link through tabs):
import React, {Component} from 'react';
export default class Home extends Component {
render(){
return (
<div>
<p style={{fontSize:60,position:"relative", left: 0,top:0}}>Home</p>
</div>
);
}
}
App.js:
import React, {Component} from 'react';
import FullMenu from "./Menu/FullMenu"
export default class App extends Component {
render(){
return (
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<div>
<FullMenu/>
</div>
</html>
);
}
}