Почему моя навигационная панель "несуществующая" для других моих компонентов?

Question

Я только что создал приложение для реагирования. Первым делом я хотел создать панель навигации для левой стороны, которая будет доступна на каждой странице. Пока все хорошо, он работает хорошо, моя проблема возникает, когда я начал создавать свою первую страницу: она продолжает вырезаться под моей навигационной панелью, и я ничего не делаю, чтобы вытащить ее из-под панели, это сводит меня с ума. Вот текущее состояние кода ...

Приложение. 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>
    );
}
}

Стилизованная панель навигации

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;
`;

Навитем

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>
    );
}
}

Стилизованная навигационная панель

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;
    }
}
`;

Домашняя страница

class HomePage extends Component {

render() {
    return (
        <StyledHomePage>
            {"Hi {user}!hhhhhhhhhhhhhhhhhhhhhh"}
        </StyledHomePage>
    );
}
}

Стилизованная домашняя страница

const StyledHomePage = styled.div`
display: "flex",
margin: "5rem 5rem 0 5rem"
`;

Answer 1

Проблема возникает, когда вы даете postion: fixed своему NavBar, вместо этого вы должны создать плавный дизайн и удалить фиксированное положение. Дайте мне знать, если вам понадобится дополнительная помощь.