dashboard-skeleton-compostrap
Version:
Simple and fast dashboard skeleton on Bootstrap
253 lines (206 loc) • 8.43 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="node_modules/sidebar-skeleton-compostrap/dist/css/sidebar.css">
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">
<link rel="stylesheet" href="node_modules/perfect-scrollbar/css/perfect-scrollbar.css">
<link rel="stylesheet" href="node_modules/sidebar-menu-compostrap/dist/css/sidebar.menu.css">
<link rel="stylesheet" href="dist/css/dashboard.css">
<title>Dashboard</title>
</head>
<body class="bg-light">
<header>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container-fluid">
<!-- title -->
<a class="navbar-brand" href="#"><i class="fa-solid fa-mug-hot px-1 text-purple"></i>
<span class="text-purple fw-semibold">Dashboard</span>
</a>
<!-- sidebar toggle -->
<button class="navbar-toggler btn btn-link border-0" type="button" id="sidebar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar navigation -->
<div class="collapse navbar-collapse">
<!-- breadcrumb -->
<ul class="navbar-nav navbar-nav-breadcrumb">
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Translate</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="d-flex wrapper wrapper-navbar-used wrapper-navbar-fixed">
<nav role="navigation" class="sidebar sidebar-bg-white sidebar-rounded-top-right shadow-sm" id="navigation">
<!-- sidebar -->
<div class="sidebar-menu">
<!-- menu fixed -->
<div class="sidebar-menu-fixed">
<!-- menu scrollbar -->
<div class="scrollbar scrollbar-use-navbar scrollbar-bg-white">
<!-- menu -->
<ul class="list list-unstyled list-bg-white mb-0">
<li class="list-item">
<!-- list title -->
<p class="list-title text-uppercase">User logged</p>
<!-- list items, first level -->
<ul class="list-unstyled">
<li><a href="#" class="list-link link-arrow text-uppercase">
<span class="list-icon"><i class="fa-regular fa-user bell"></i></span>S. Karlos</a>
<!-- list items, second level -->
<ul class="list-unstyled list-hidden">
<li><a href="#" class="list-link">Your profil</a></li>
<li><a href="#" class="list-link">Logout</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- menu -->
<ul class="list list-unstyled list-bg-white list-icon-purple mb-0">
<!-- multi-level dropdown menu -->
<li class="list-item">
<!-- list title -->
<p class="list-title text-uppercase">System</p>
<!-- list items -->
<ul class="list-unstyled">
<li><a href="#" class="list-link link-current"><span class="list-icon"><i class="fa-solid fa-mug-hot bell"></i></span>Dashboard</a></li>
<li><a href="#" class="list-link link-arrow"><span class="list-icon"><i class="fa-solid fa-hammer bell"></i></span>Settings</a>
<!-- list items, second level -->
<ul class="list-unstyled list-hidden">
<li><a href="#" class="list-link">Permissions</a></li>
<li><a href="#" class="list-link link-arrow">Maintenance</a>
<!-- list items, third level -->
<ul class="list-unstyled list-hidden">
<li><a href="#" class="list-link">On</a></li>
<li><a href="#" class="list-link">Off</a></li>
</ul>
</li>
</ul>
</li>
<!-- comments -->
<li><a href="#" class="list-link link-arrow">
<span class="list-icon"><i class="fa-regular fa-comment bell"></i></span>Comments</a>
<!-- list items, second level -->
<ul class="list-unstyled list-hidden">
<li><a href="#" class="list-link">Disable</a></li>
<li><a href="#" class="list-link">Enable</a></li>
</ul>
</li>
<!-- translate -->
<li><a href="#" class="list-link link-arrow link-current">
<span class="list-icon"><i class="fa-solid fa-globe bell"></i></span>Translate</a>
<!-- list items, second level -->
<ul class="list-unstyled list-hidden">
<li><a href="#" class="list-link">Czech</a></li>
<li><a href="#" class="list-link link-current">English</a></li>
<li><a href="#" class="list-link">Germany</a></li>
</ul>
</li>
</ul>
</li>
<!-- multi-level dropdown menu -->
<li class="list-item">
<!-- list title -->
<p class="list-title text-uppercase">Eshop</p>
<!-- list items -->
<ul class="list-unstyled">
<li><a href="#" class="list-link link-arrow">
<span class="list-icon"><i class="fa-solid fa-basket-shopping bell"></i></span>Orders</a>
<!-- list items, second level -->
<ul class="list-unstyled list-hidden">
<li><a href="#" class="list-link">New</a></li>
<li><a href="#" class="list-link">Finished</a></li>
</ul>
</li>
</ul>
</li>
<!-- simple menu -->
<li class="list-item">
<!-- list title -->
<p class="list-title text-uppercase">Notice</p>
<!-- list items -->
<ul class="list-unstyled">
<li>
<a href="#" class="list-link">
<div class="clearfix">
<div class="float-start"><span class="list-icon"><i class="fa-regular fa-bell bell"></i></span>Messages</div>
<div class="float-end">
<span class="badge bg-danger">New</span>
<span class="badge bg-secondary">4</span>
</div>
</div>
</a>
</li>
</ul>
</li>
<!-- simple menu -->
<li class="list-item">
<!-- list title -->
<p class="list-title text-uppercase">Blog</p>
<!-- list items -->
<ul class="list-unstyled">
<li><a href="#" class="list-link"><span class="list-icon"><i class="fa-solid fa-plus bell"></i></span>Add post</a></li>
<li><a href="#" class="list-link"><span class="list-icon"><i class="fa-solid fa-table bell"></i></span>Category</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<!-- content -->
<main role="main">
<!-- full box -->
<div class="content-box mb-3 bg-white shadow-sm">
<h5>Full content</h5>
<p>Here is content this website page.</p>
</div>
<!-- grid -->
<div class="row">
<!-- six box -->
<div class="mb-3 col-xl-6">
<div class="content-box bg-white shadow-sm">
<h5>50% content</h5>
<p>Here is content this website page.</p>
</div>
</div>
<!-- six box -->
<div class="mb-3 col-xl-6">
<div class="content-box bg-white shadow-sm">
<h5>50% content</h5>
<p>Here is content this website page.</p>
</div>
</div>
</div>
</main>
<!-- license rights, do not delete this piece of code -->
<footer class="text-end mt-3 mb-3">
<p class="text-silver">Code licensed
<a href="https://github.com/compostrap/dashboard-skeleton/blob/master/license.md" class="text-muted" target="_blank" rel="license noopener">MIT</a>
</p>
</footer>
</div>
</div>
<!-- javascript library -->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
<script src="node_modules/sidebar-skeleton-compostrap/dist/js/sidebar.js"></script>
<script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.js"></script>
<script src="node_modules/nanobar/nanobar.js"></script>
<script src="node_modules/sidebar-menu-compostrap/dist/js/sidebar.menu.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
new Nanobar().go(100);
new PerfectScrollbar('.scrollbar', {
wheelSpeed: 0.3
});
});
</script>
</body>
</html>