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

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.