Homepage content overlapping sidebar

Question

Screenshot is below of what is currently happening

As you can see, the homepage is currently overlapping underneath the sidebar, with the homepage content partially hidden. I would like the homepage content to be to the right of sidebar, and neither overlap, as I plan for a data table to exist to the right of the sidebar.

How can I achieve this state?

home

import React, { Component } from "react";
import Sidebar from "./Sidebar.js";

export default class Home extends Component {
    render() {
        return (
          <div style={{ display: "flex" }}>
            <Sidebar />
            <h1>Right of sidebar page </h1>
          </div>
        );
      }
    }

sidebar

import React, { Component } from "react";
import { useEffect, useRef, useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import Logo from '../Logo.svg'

import '../sidebar.css';
 
    const sidebarNavItems = [
       {
            display: 'Home',
            to: '/'
        
        },
        {
            display: 'Blog',
            to: 'Blog/'
        }
    ]

    const Sidebar = () => {
        const [activeIndex, setActiveIndex] = useState(0);
        const [stepHeight, setStepHeight] = useState(0);
        const sidebarRef = useRef();
        const indicatorRef = useRef();
        const location = useLocation();
    
        useEffect(() => {
            setTimeout(() => {
                const sidebarItem = sidebarRef.current.querySelector('.sidebar__menu__item');
                indicatorRef.current.style.height = `${sidebarItem.clientHeight}px`;
                setStepHeight(sidebarItem.clientHeight);
            }, 50);
        }, []);

         // change active index
    useEffect(() => {
        const curPath = window.location.pathname.split('/')[1];
        const activeItem = sidebarNavItems.findIndex(item => item.section === curPath);
        setActiveIndex(curPath.length === 0 ? 0 : activeItem);
    }, [location]);
    

    return (
      <div className='sidebar'>
      <div className="sidebar__logo">
      <div><img src = {Logo} alt='Logo'className='Logo' /></div>
      </div>
      <div ref={sidebarRef} className="sidebar__menu">
          <div
              ref={indicatorRef}
              className="sidebar__menu__indicator"
              style={{
                  transform: `translateX(-50%) translateY(${activeIndex * stepHeight}px)`
              }}
          ></div>
          {
              sidebarNavItems.map((item, index) => (
                  <Link to={item.to} key={index}>
                      <div className={`sidebar__menu__item ${activeIndex === index ? 'active' : ''}`}>
                          <div className="sidebar__menu__item__icon">
                              {item.icon}
                          </div>
                          <div className="sidebar__menu__item__text">
                              {item.display}
                          </div>
                      </div>
                  </Link>
              ))
          }
      </div>
  </div>);
};

Answer 1

Try making your home like this

import React, { Component } from "react";
import Sidebar from "./Sidebar.js";

export default class Home extends Component {
    render() {
        return (
          <div style={{ display: "flex" }}>
            <div className="left"   >
               <Sidebar />
            </div>
            <div  className="right">
                 <h1>Right of sidebar page </h1>
            </div>
            
          </div>
        );
      }
    }

Adjust a bit of styling , hope this solves your issue .