// 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 />} />