Add basic bootstrap dashboard with sample data.

This commit is contained in:
2023-05-01 22:15:35 +02:00
parent 58a36d36ec
commit e869615ec7
14 changed files with 282 additions and 33 deletions

View File

@ -0,0 +1,67 @@
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 test-white-50" href="#">AssetFlow</a>
<button
class="navbar-toggler position-absolute d-md-none collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sidebarMenu"
aria-controls="sidebarMenu"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100 bg-secondary" type="text" placeholder="Search" aria-label="Search" />
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#">Sign out</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"> Dashboard </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Orders </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Products </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Customers </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Reports </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Integrations </a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report"> </a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#"> Current month </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Last quarter </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Social engagement </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Year-end sale </a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">

View File

@ -0,0 +1,3 @@
</main>
</div>
</div>

View File

@ -0,0 +1,5 @@
<script src="/static/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AssetFlow - <%= it.title %></title>
<meta name="description" content="A simple HTML5 Template for new projects." />
<meta name="author" content="[Project-Name-Here]" />
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<script src="/static/jquery/dist/jquery.min.js"></script>
<link href="/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link href="css/dashboard.css" rel="stylesheet">
</head>
<body>