React sidebar took full width - css

Question

so I'm trying to create a dashboard page which will show sidebar after user login, But I don't know why my sidebar is taking full width that make my Dashboard component on Routes drop into bottom.
This is the image link of the sidebar https://imgur.com/a/UnSPyaA
My code on App.js :
import Login from './Component/Login';
import Register from './Component/Register.jsx'
import Home from './Component/Home'
import {
BrowserRouter as Router,
Routes,
Route,
} from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route exact path="/" element={<Login/>}/>
<Route path="/register" element={<Register/>}/>
<Route path="/dashboard" element={<Home/>}/>
</Routes>
</Router>
</div>
);
}
export default App;
my code for Home.js:
import React from "react";
import Sidebar from './Sidebar'
import Dashboard from "./Dashboard";
import {Routes, Route} from 'react-router-dom'
import './Home.css'
function Home() {
return (
<>
<Sidebar/>
<Routes>
<Route index element={<Dashboard/>}/>
</Routes>
</>
);
}
export default Home;
The Dashboard Component is just 80 of Lorem text.
This is the code in Sidebar.js and Sidebar.css
import React from 'react'
import './Sidebar.css'
import {Link} from 'react-router-dom'
function Sidebar() {
return (
<div>
<nav className="sidebar">
<Link to="/dashboard">DashBoard</Link>
</nav>
</div>
)
}
export default Sidebar
the Sidebar.css :
.sidebar{
display:flex;
width:200px;
border: 2px solid black;
height:100vh;
background-color:#FFD302;
}
I don't know if this the problem with the CSS or the Router dom. Thanks for the help.

Answer 1

The Home component controls the layout of the HTML/JSX it is rendering. I suggest using a grid layout with 2 columns, one for the sidebar and the other for the descendent routes.
Example:
.home {
display: grid;
grid-template-columns: 1fr 1fr;
}
...
function Home() {
return (
<div className="home"> // <-- parent element
<Sidebar />
<Routes>
<Route index element={<Dashboard />} />
</Routes>
</div>
);
}

Answer 2

try to write your css in sperate file and then attach it by importing i think that is a right way to do work.