riseup-squad23/src/layouts/vertical-navbar.jsx
2025-08-31 16:05:46 -03:00

204 lines
7.8 KiB
JavaScript

<>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
{"{"}
{"{"} title {"}"}
{"}"} - {"{"}
{"{"} web_title {"}"}
{"}"}
</title>
{"{"}% block stylesfirst %{"}"}
{"{"}% endblock %{"}"}
<link rel="stylesheet" href="assets/scss/app.scss" />
<link rel="stylesheet" href="assets/scss/themes/dark/app-dark.scss" />
{"{"}% block styles %{"}"}
{"{"}% endblock %{"}"}
<link
rel="shortcut icon"
href="assets/static/images/logo/favicon.svg"
type="image/x-icon"
/>
<link
rel="shortcut icon"
href="assets/static/images/logo/favicon.png"
type="image/png"
/>
<div id="app">
<div id="sidebar">
{"{"}% include "src/layouts/sidebar.html" %{"}"}
</div>
<div id="main" className="layout-navbar navbar-fixed">
<header>
<nav className="navbar navbar-expand navbar-light navbar-top">
<div className="container-fluid">
<a href="#" className="burger-btn d-block">
<i className="bi bi-justify fs-3" />
</a>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div
className="collapse navbar-collapse"
id="navbarSupportedContent"
>
<ul className="navbar-nav ms-auto mb-lg-0">
<li className="nav-item dropdown me-1">
<a
className="nav-link active dropdown-toggle text-gray-600"
href="#"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className="bi bi-envelope bi-sub fs-4" />
</a>
<ul
className="dropdown-menu dropdown-menu-lg-end"
aria-labelledby="dropdownMenuButton"
>
<li>
<h6 className="dropdown-header">Mail</h6>
</li>
<li>
<a className="dropdown-item" href="#">
No new mail
</a>
</li>
</ul>
</li>
<li className="nav-item dropdown me-3">
<a
className="nav-link active dropdown-toggle text-gray-600"
href="#"
data-bs-toggle="dropdown"
data-bs-display="static"
aria-expanded="false"
>
<i className="bi bi-bell bi-sub fs-4" />
<span className="badge badge-notification bg-danger">
7
</span>
</a>
<ul
className="dropdown-menu dropdown-center dropdown-menu-sm-end notification-dropdown"
aria-labelledby="dropdownMenuButton"
>
<li className="dropdown-header">
<h6>Notifications</h6>
</li>
<li className="dropdown-item notification-item">
<a className="d-flex align-items-center" href="#">
<div className="notification-icon bg-primary">
<i className="bi bi-cart-check" />
</div>
<div className="notification-text ms-4">
<p className="notification-title font-bold">
Successfully check out
</p>
<p className="notification-subtitle font-thin text-sm">
Order ID #256
</p>
</div>
</a>
</li>
<li className="dropdown-item notification-item">
<a className="d-flex align-items-center" href="#">
<div className="notification-icon bg-success">
<i className="bi bi-file-earmark-check" />
</div>
<div className="notification-text ms-4">
<p className="notification-title font-bold">
Homework submitted
</p>
<p className="notification-subtitle font-thin text-sm">
Algebra math homework
</p>
</div>
</a>
</li>
<li>
<p className="text-center py-2 mb-0">
<a href="#">See all notification</a>
</p>
</li>
</ul>
</li>
</ul>
<div className="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-expanded="false">
<div className="user-menu d-flex">
<div className="user-name text-end me-3">
<h6 className="mb-0 text-gray-600">John Ducky</h6>
<p className="mb-0 text-sm text-gray-600">
Administrator
</p>
</div>
<div className="user-img d-flex align-items-center">
<div className="avatar avatar-md">
<img src="assets/static/images/faces/1.jpg" />
</div>
</div>
</div>
</a>
<ul
className="dropdown-menu dropdown-menu-end"
aria-labelledby="dropdownMenuButton"
style={{ minWidth: "11rem" }}
>
<li>
<h6 className="dropdown-header">Hello, John!</h6>
</li>
<li>
<a className="dropdown-item" href="#">
<i className="icon-mid bi bi-person me-2" /> My Profile
</a>
</li>
<li>
<a className="dropdown-item" href="#">
<i className="icon-mid bi bi-gear me-2" />
Settings
</a>
</li>
<li>
<a className="dropdown-item" href="#">
<i className="icon-mid bi bi-wallet me-2" />
Wallet
</a>
</li>
<li>
<hr className="dropdown-divider" />
</li>
<li>
<a className="dropdown-item" href="#">
<i className="icon-mid bi bi-box-arrow-left me-2" />{" "}
Logout
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<div id="main-content">
{"{"}% block content %{"}"}
{"{"}% endblock %{"}"}
</div>
{"{"}% include '../partials/footer.html' %{"}"}
</div>
</div>
{"{"}% if isDev %{"}"}
{"{"}% else %{"}"}
{"{"}% endif %{"}"}
{"{"}% block js %{"}"}
{"{"}% endblock %{"}"}
</>