As I work on creating a dashboard page that will display a sidebar after the user logs in, I am facing an issue where the sidebar is taking up the full width of the page, causing my Dashboard component to drop to the bottom.
You can view the image link of the sidebar here
Here is the snippet of code from 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;
And here is 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 contains Lorem text that goes up to 80 characters.
Below is the code for 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
Here's the content of Sidebar.css :
.sidebar{
display:flex;
width:200px;
border: 2px solid black;
height:100vh;
background-color:#FFD302;
}
I'm not certain if the issue lies with the CSS or the Router dom. Any assistance would be greatly appreciated. Thank you!