Skip to content
This repository was archived by the owner on Sep 20, 2025. It is now read-only.

Commit 66a5b2f

Browse files
kkamarakkamara
committed
Abstract out header component and rename sidebar component
1 parent aa4d193 commit 66a5b2f

File tree

4 files changed

+348
-341
lines changed

4 files changed

+348
-341
lines changed

‎frontend/src/AdminDashboardRoute.jsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import React from "react"
22
import { Outlet } from "react-router"
3+
import Sidebar from "./components/layouts/adminDashboard/Sidebar"
34
import Header from "./components/layouts/adminDashboard/Header"
45
import Footer from "./components/layouts/adminDashboard/Footer"
56

67
const AdminDashboardRoute = () => (
78
<>
89
<div id="wrapper">
9-
<Header />
10+
<Sidebar />
1011
<div id="content-wrapper" className="d-flex flex-column">
11-
<Outlet />
12+
<div id="content">
13+
<Header/>
14+
<Outlet />
15+
</div>
1216
<Footer />
1317
</div>
1418
</div>

‎frontend/src/components/layouts/adminDashboard/Header.jsx‎

Lines changed: 265 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,278 @@
1-
import React from "react"
1+
import React from 'react'
22

3-
function Header() {
3+
export default function Header() {
44
return (
5-
<ul
6-
className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
7-
id="accordionSidebar"
8-
>
9-
<a
10-
className="sidebar-brand d-flex align-items-center justify-content-center"
11-
href="index.html"
5+
<nav className="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
6+
<button
7+
id="sidebarToggleTop"
8+
className="btn btn-link d-md-none rounded-circle mr-3"
129
>
13-
<div className="sidebar-brand-icon rotate-n-15">
14-
<i className="fas fa-laugh-wink"></i>
15-
</div>
16-
<div className="sidebar-brand-text mx-3">
17-
Admin
10+
<i className="fa fa-bars"></i>
11+
</button>
12+
13+
<form className="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
14+
<div className="input-group">
15+
<input
16+
type="text"
17+
className="form-control bg-light border-0 small"
18+
placeholder="Search for..."
19+
aria-label="Search"
20+
aria-describedby="basic-addon2"
21+
/>
22+
<div className="input-group-append">
23+
<button className="btn btn-primary" type="button">
24+
<i className="fas fa-search fa-sm"></i>
25+
</button>
26+
</div>
1827
</div>
19-
</a>
28+
</form>
2029

21-
<hr className="sidebar-divider my-0" />
30+
<ul className="navbar-nav ml-auto">
31+
<li className="nav-item dropdown no-arrow d-sm-none">
32+
<a
33+
className="nav-link dropdown-toggle"
34+
href="#"
35+
id="searchDropdown"
36+
role="button"
37+
data-toggle="dropdown"
38+
aria-haspopup="true"
39+
aria-expanded="false"
40+
>
41+
<i className="fas fa-search fa-fw"></i>
42+
</a>
43+
<div
44+
className="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
45+
aria-labelledby="searchDropdown"
46+
>
47+
<form className="form-inline mr-auto w-100 navbar-search">
48+
<div className="input-group">
49+
<input
50+
type="text"
51+
className="form-control bg-light border-0 small"
52+
placeholder="Search for..."
53+
aria-label="Search"
54+
aria-describedby="basic-addon2"
55+
/>
56+
<div className="input-group-append">
57+
<button className="btn btn-primary" type="button">
58+
<i className="fas fa-search fa-sm"></i>
59+
</button>
60+
</div>
61+
</div>
62+
</form>
63+
</div>
64+
</li>
2265

23-
<li className="nav-item active">
24-
<a className="nav-link" href="/admin">
25-
<i className="fas fa-fw fa-tachometer-alt"></i>
26-
<span>Dashboard</span>
27-
</a>
28-
</li>
66+
<li className="nav-item dropdown no-arrow mx-1">
67+
<a
68+
className="nav-link dropdown-toggle"
69+
href="#"
70+
id="alertsDropdown"
71+
role="button"
72+
data-toggle="dropdown"
73+
aria-haspopup="true"
74+
aria-expanded="false"
75+
>
76+
<i className="fas fa-bell fa-fw"></i>
77+
<span className="badge badge-danger badge-counter">3+</span>
78+
</a>
79+
<div
80+
className="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
81+
aria-labelledby="alertsDropdown"
82+
>
83+
<h6 className="dropdown-header">Alerts Center</h6>
84+
<a className="dropdown-item d-flex align-items-center" href="#">
85+
<div className="mr-3">
86+
<div className="icon-circle bg-primary">
87+
<i className="fas fa-file-alt text-white"></i>
88+
</div>
89+
</div>
90+
<div>
91+
<div className="small text-gray-500">December 12, 2019</div>
92+
<span className="font-weight-bold">
93+
A new monthly report is ready to download!
94+
</span>
95+
</div>
96+
</a>
97+
<a className="dropdown-item d-flex align-items-center" href="#">
98+
<div className="mr-3">
99+
<div className="icon-circle bg-success">
100+
<i className="fas fa-donate text-white"></i>
101+
</div>
102+
</div>
103+
<div>
104+
<div className="small text-gray-500">December 7, 2019</div>
105+
$290.29 has been deposited into your account!
106+
</div>
107+
</a>
108+
<a className="dropdown-item d-flex align-items-center" href="#">
109+
<div className="mr-3">
110+
<div className="icon-circle bg-warning">
111+
<i className="fas fa-exclamation-triangle text-white"></i>
112+
</div>
113+
</div>
114+
<div>
115+
<div className="small text-gray-500">December 2, 2019</div>
116+
Spending Alert: We've noticed unusually high spending for your
117+
account.
118+
</div>
119+
</a>
120+
<a
121+
className="dropdown-item text-center small text-gray-500"
122+
href="#"
123+
>
124+
Show All Alerts
125+
</a>
126+
</div>
127+
</li>
29128

30-
<hr className="sidebar-divider" />
129+
<li className="nav-item dropdown no-arrow mx-1">
130+
<a
131+
className="nav-link dropdown-toggle"
132+
href="#"
133+
id="messagesDropdown"
134+
role="button"
135+
data-toggle="dropdown"
136+
aria-haspopup="true"
137+
aria-expanded="false"
138+
>
139+
<i className="fas fa-envelope fa-fw"></i>
140+
<span className="badge badge-danger badge-counter">7</span>
141+
</a>
142+
<div
143+
className="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
144+
aria-labelledby="messagesDropdown"
145+
>
146+
<h6 className="dropdown-header">Message Center</h6>
147+
<a className="dropdown-item d-flex align-items-center" href="#">
148+
<div className="dropdown-list-image mr-3">
149+
<img
150+
className="rounded-circle"
151+
src="/img/undraw_profile_1.svg"
152+
alt="..."
153+
/>
154+
<div className="status-indicator bg-success"></div>
155+
</div>
156+
<div className="font-weight-bold">
157+
<div className="text-truncate">
158+
Hi there! I am wondering if you can help me with a problem
159+
I've been having.
160+
</div>
161+
<div className="small text-gray-500">Emily Fowler · 58m</div>
162+
</div>
163+
</a>
164+
<a className="dropdown-item d-flex align-items-center" href="#">
165+
<div className="dropdown-list-image mr-3">
166+
<img
167+
className="rounded-circle"
168+
src="/img/undraw_profile_2.svg"
169+
alt="..."
170+
/>
171+
<div className="status-indicator"></div>
172+
</div>
173+
<div>
174+
<div className="text-truncate">
175+
I have the photos that you ordered last month, how would you
176+
like them sent to you?
177+
</div>
178+
<div className="small text-gray-500">Jae Chun · 1d</div>
179+
</div>
180+
</a>
181+
<a className="dropdown-item d-flex align-items-center" href="#">
182+
<div className="dropdown-list-image mr-3">
183+
<img
184+
className="rounded-circle"
185+
src="/img/undraw_profile_3.svg"
186+
alt="..."
187+
/>
188+
<div className="status-indicator bg-warning"></div>
189+
</div>
190+
<div>
191+
<div className="text-truncate">
192+
Last month's report looks great, I am very happy with the
193+
progress so far, keep up the good work!
194+
</div>
195+
<div className="small text-gray-500">Morgan Alvarez · 2d</div>
196+
</div>
197+
</a>
198+
<a className="dropdown-item d-flex align-items-center" href="#">
199+
<div className="dropdown-list-image mr-3">
200+
<img
201+
className="rounded-circle"
202+
src="https://source.unsplash.com/Mv9hjnEUHR4/60x60"
203+
alt="..."
204+
/>
205+
<div className="status-indicator bg-success"></div>
206+
</div>
207+
<div>
208+
<div className="text-truncate">
209+
Am I a good boy? The reason I ask is because someone told me
210+
that people say this to all dogs, even if they aren't
211+
good...
212+
</div>
213+
<div className="small text-gray-500">
214+
Chicken the Dog · 2w
215+
</div>
216+
</div>
217+
</a>
218+
<a
219+
className="dropdown-item text-center small text-gray-500"
220+
href="#"
221+
>
222+
Read More Messages
223+
</a>
224+
</div>
225+
</li>
31226

32-
<div className="sidebar-heading">Addons</div>
227+
<div className="topbar-divider d-none d-sm-block"></div>
33228

34-
<li className="nav-item">
35-
<a
36-
className="nav-link collapsed"
37-
href="#"
38-
data-toggle="collapse"
39-
data-target="#collapsePages"
40-
aria-expanded="true"
41-
aria-controls="collapsePages"
42-
>
43-
<i className="fas fa-fw fa-folder"></i>
44-
<span>Pages</span>
45-
</a>
46-
<div
47-
id="collapsePages"
48-
className="collapse"
49-
aria-labelledby="headingPages"
50-
data-parent="#accordionSidebar"
51-
>
52-
<div className="bg-white py-2 collapse-inner rounded">
53-
<h6 className="collapse-header">Example Header:</h6>
54-
<a className="collapse-item" href="/admin">
55-
Example Screen
229+
<li className="nav-item dropdown no-arrow">
230+
<a
231+
className="nav-link dropdown-toggle"
232+
href="#"
233+
id="userDropdown"
234+
role="button"
235+
data-toggle="dropdown"
236+
aria-haspopup="true"
237+
aria-expanded="false"
238+
>
239+
<span className="mr-2 d-none d-lg-inline text-gray-600 small">
240+
Douglas McGee
241+
</span>
242+
<img
243+
className="img-profile rounded-circle"
244+
src="/img/undraw_profile.svg"
245+
/>
246+
</a>
247+
<div
248+
className="dropdown-menu dropdown-menu-right shadow animated--grow-in"
249+
aria-labelledby="userDropdown"
250+
>
251+
<a className="dropdown-item" href="#">
252+
<i className="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
253+
Profile
254+
</a>
255+
<a className="dropdown-item" href="#">
256+
<i className="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
257+
Settings
258+
</a>
259+
<a className="dropdown-item" href="#">
260+
<i className="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
261+
Activity Log
262+
</a>
263+
<div className="dropdown-divider"></div>
264+
<a
265+
className="dropdown-item"
266+
href="#"
267+
data-toggle="modal"
268+
data-target="#logoutModal"
269+
>
270+
<i className="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
271+
Logout
56272
</a>
57273
</div>
58-
</div>
59-
</li>
60-
</ul>
274+
</li>
275+
</ul>
276+
</nav>
61277
)
62278
}
63-
64-
export default Header

0 commit comments

Comments
 (0)