I am building a react app that renders 2 layouts, a layout without the sidebar nav and topbar when you are not logged in, and then a different layout that does render the topbar and sidebar nav when you are logged in (through a context).
The issue that I am facing is that when logged in, the topbar and sidebar nav render as separate components and any other component that I wish to display ends up all the way at the bottom - see these images for context Pic1 Pic 2
As you can see, everything renders top down ("Dashboard" is an example of a component that I would like rendered next to and below the sidebar and topbar. What I would like to do is render the topbar and sidebar as a single component, and then render any other page components in that large white space. Perhaps there is a way to combine the two bars into a single layout?
I will share some code below...
Topbar.jsx
import "startbootstrap-sb-admin-2-master/css/sb-admin-2.min.css";
import { useAuth } from "../../hooks/auth";
export const TopBar = () => {
const user = useAuth().user;
const { logout } = useAuth();
const handleSubmit = async (e) => {
e.preventDefault();
logout();
};
return (
<div id="content-wrapper" className="d-flex flex-column">
<div id="content">
<div className="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<button
id="sidebarToggleTop"
className="btn btn-link d-md-none rounded-circle mr-3"
>
<i className="fa fa-bars"></i>
</button>
<form className="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div className="input-group">
<input
type="text"
className="form-control bg-light border-0 small"
placeholder="Search for..."
aria-label="Search"
aria-describedby="basic-addon2"
/>
<div className="input-group-append">
<button className="btn btn-primary" type="button">
<i className="fa-solid fa-magnifying-glass"></i>
</button>
</div>
</div>
</form>
<ul className="navbar-nav ml-auto">
<li className="nav-item dropdown no-arrow mx-1">
<div
className="nav-link dropdown-toggle"
href="#"
id="alertsDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i className="fas fa-bell fa-fw"></i>
<span className="badge badge-danger badge-counter">3+</span>
</div>
</li>
<div className="topbar-divider d-none d-sm-block" />
<li className="nav-item dropdown no-arrow">
<div
className="nav-link"
id="userDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<text className="mr-2 d-none d-lg-inline text-gray-600 small">
Hi, {user}!
</text>
<i className="fa-solid fa-user"></i>
</div>
</li>
<li className="nav-item dropdown no-arrow">
<div
className="nav-link"
id="userDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<button
className="btn btn-secondary btn-circle"
type="button"
onClick={handleSubmit}
>
<i className="fa-solid fa-arrow-right-from-bracket"></i>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
);
};
Navbar.jsx (sidebar)
import "startbootstrap-sb-admin-2-master/css/sb-admin-2.min.css";
import { useAuth } from "../../hooks/auth";
export const Navbar = () => {
return (
<div id="wrapper">
<ul
className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
id="accordionSidebar"
>
<hr className="sidebar-divider my-0" />
<li className="nav-item active">
<a className="nav-link" href="index.html">
<i className="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<hr className="sidebar-divider" />
<div className="sidebar-heading">Interface</div>
<li className="nav-item">
<a
className="nav-link collapsed"
href="#"
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="true"
aria-controls="collapseTwo"
>
<i className="fas fa-fw fa-cog"></i>
<span>Components</span>
</a>
<div
id="collapseTwo"
className="collapse"
aria-labelledby="headingTwo"
data-parent="#accordionSidebar"
>
<div className="bg-white py-2 collapse-inner rounded">
<h6 className="collapse-header">Custom Components:</h6>
<a className="collapse-item" href="buttons.html">
Buttons
</a>
<a className="collapse-item" href="cards.html">
Cards
</a>
</div>
</div>
</li>
<li className="nav-item">
<a
className="nav-link collapsed"
href="#"
data-toggle="collapse"
data-target="#collapseUtilities"
aria-expanded="true"
aria-controls="collapseUtilities"
>
<i className="fas fa-fw fa-wrench"></i>
<span>Utilities</span>
</a>
<div
id="collapseUtilities"
className="collapse"
aria-labelledby="headingUtilities"
data-parent="#accordionSidebar"
>
<div className="bg-white py-2 collapse-inner rounded">
<h6 className="collapse-header">Custom Utilities:</h6>
<a className="collapse-item" href="utilities-color.html">
Colors
</a>
<a className="collapse-item" href="utilities-border.html">
Borders
</a>
<a className="collapse-item" href="utilities-animation.html">
Animations
</a>
<a className="collapse-item" href="utilities-other.html">
Other
</a>
</div>
</div>
</li>
<hr className="sidebar-divider" />
<div className="sidebar-heading">Addons</div>
<li className="nav-item">
<a
className="nav-link collapsed"
href="#"
data-toggle="collapse"
data-target="#collapsePages"
aria-expanded="true"
aria-controls="collapsePages"
>
<i className="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div
id="collapsePages"
className="collapse"
aria-labelledby="headingPages"
data-parent="#accordionSidebar"
>
<div className="bg-white py-2 collapse-inner rounded">
<h6 className="collapse-header">Login Screens:</h6>
<a className="collapse-item" href="login.html">
Login
</a>
<a className="collapse-item" href="register.html">
Register
</a>
<a className="collapse-item" href="forgot-password.html">
Forgot Password
</a>
<div className="collapse-divider"></div>
<h6 className="collapse-header">Other Pages:</h6>
<a className="collapse-item" href="404.html">
404 Page
</a>
<a className="collapse-item" href="blank.html">
Blank Page
</a>
</div>
</div>
</li>
<li className="nav-item">
<a className="nav-link" href="charts.html">
<i className="fas fa-fw fa-chart-area"></i>
<span>Charts</span>
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="tables.html">
<i className="fas fa-fw fa-table"></i>
<span>Tables</span>
</a>
</li>
<hr className="sidebar-divider d-none d-md-block" />
<div className="text-center d-none d-md-inline">
<button className="rounded-circle border-0" id="sidebarToggle" />
</div>
</ul>
</div>
);
};
ProtectedLayout.jsx (layout rendered when logged in)
import { Outlet } from "react-router";
import { Navbar } from "../components/common/Navbar";
import { TopBar } from "../components/common/Topbar";
export const ProtectedLayout = () => {
return (
<>
<div>
<TopBar />
<Navbar />
</div>
<Outlet />
</>
);
};
App.js (routing)
import React from "react";
import { Route, Routes } from "react-router-dom";
import { LoginLayout } from "./layout/LoginLayout";
import { ProtectedLayout } from "./layout/ProtectedLayout";
import { ProtectRoutes } from "./hooks/protectedRoute";
import { Login } from "./pages/LoginPage";
import { Dashboard } from "./pages/DashboardPage";
import { Hi } from "./pages/HiPage";
import { About } from "./pages/AboutPage";
export default function App() {
return (
<Routes>
<Route element={<LoginLayout />}>
<Route path="/" element={<Login />} />
</Route>
<Route path="/auth" element={<ProtectRoutes />}>
<Route
path="/auth/dashboard"
element={
<>
<ProtectedLayout />
<Dashboard />
</>
}
/>
<Route
path="/auth/hi"
element={
<>
<ProtectedLayout />
<Hi />
</>
}
/>
<Route
path="/auth/about"
element={
<>
<ProtectedLayout />
<About />
</>
}
/>
</Route>
</Routes>
);
}
Also, if you have any suggestions on bettering the routing I would be incredibly grateful.
Please let me know if you need any other code.