// components/nav/Sidebar.js
// even though it's called sidebar, it will sit on top, just below main nav
// feel free to put it on side
import { NavLink } from "react-router-dom";
export default function Sidebar() {
return (
<ul className="nav nav-tabs">
<li className="nav-item">
<NavLink className="nav-link" to="/dashboard">
Dashboard
</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/ad/create">
Create Ad
</NavLink>
</li>
</ul>
);
}
Now import in Dashboard
import Sidebar from "../../components/nav/Sidebar";
export default function Dashboard() {
return (
<div className="contaienr-fluid">
<Sidebar />
<div className="container mt-2">
<h2>User Dashboard</h2>
</div>
</div>
);
}
Import in Ad create page
// pages/user/ad/AdCreate.js
import Sidebar from "../../components/nav/Sidebar";
export default function AdCreate() {
return (
<div className="contaienr-fluid">
<Sidebar />
<div className="container mt-2">
<h2>Ad Create Page</h2>
</div>
</div>
);
}
// App.js
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/ad/create" element={<AdCreate />} />