Why is my navbar "inexistant" for my other components? - reactjs

Question

I just created a react app. First thing first, I wanted to make a navbar for the left side that will be accessible on every page. So far so good, it's working well, my issue arrises when I started to create my first page: it keeps clipping under my navbar, and nothing I do gets it out of under the bar, this is driving me insane. Here's the current state of the code...
App.js
class App extends Component {
render() {
return(
<Router>
<SideNavBar />
<Switch>
<Route exact path={"/"} component={HomePage} />
</Switch>
</Router>
);
}
}
Navbar
class SideNavBar extends Component {
constructor(props) {
super(props);
this.state = {
currentPath: props.location.pathname,
};
}
onClick (path) {
this.setState({ currentPath: path });
}
render() {
const { currentPath } = this.state;
const navItems =
[
{
path: "/",
css: "fas fa-home"
}, {
path: "/user",
css: "fas fa-user"
},
];
return(
<StyledSideNavBar>
{
navItems.map((item, index) => {
return (
<NavItem
item={item}
active={item.path === currentPath}
onClick={this.onClick.bind(this)}
key={index}
/>
);
})
}
</StyledSideNavBar>
);
}
}
Styled Navbar
const StyledSideNavBar = styled.div`
display: flex;
flex-direction: column;
justify-content: flex-start;
position: fixed;
height: 100vh;
width: 5rem;
top: 0;
left: 0;
padding-top: 1.5rem;
background-color: #EEEEEE;
`;
Navitem
class NavItem extends Component {
render() {
const { item, active, onClick } = this.props;
return(
<StyledNavItem active={active}>
<Link to={item.path} className={item.icon} onClick={() => onClick(item.path)} />
</StyledNavItem>
);
}
}
Styled Navitem
const StyledNavItem = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 1.5rem;
a {
font-size: 2.7em;
color: ${(props) => props.active ? "#8394F5" : "black"};
:hover {
opacity: 0.7;
text-decoration: none;
}
}
`;
HomePage
class HomePage extends Component {
render() {
return (
<StyledHomePage>
{"Hi {user}!hhhhhhhhhhhhhhhhhhhhhh"}
</StyledHomePage>
);
}
}
Styled HomePage
const StyledHomePage = styled.div`
display: "flex",
margin: "5rem 5rem 0 5rem"
`;

Answer 1

The problem arises when you give postion: fixed to your NavBar, instead you should create a fluid design and remove fixed position. Let me know if you need more help in it.