Dashboard Starter Template With jQuery And Bootstrap
| File Size: | 241 KB |
|---|---|
| Views Total: | 1603 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A minimal clean dashboard starter template with a flexible & collapsible side navigation that can be used to create a professional admin panel in your next web project.
How to use it:
1. Load the required jQuery library and Bootstrap 4 framework in the document.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/bootstrap.min.js"></script>
2. Load the core stylesheet style.css for the dashboard template.
<link rel="stylesheet" href="style.css" />
3. Load the stylesheet colors.css to override the default Bootstrap styles. OPTIONAL.
<link rel="stylesheet" href="colors.css" />
4. Load the Material Design Iconic Fonts for the dashboard template. OPTIONAL.
<link rel="stylesheet" href="colors.css" />
5. The example HTML structure for the dashboard template.
<!-- Page wrapper -->
<div class="d-flex flex-column flex-grow-1 overflow-hidden bg-light txt-dark page-wrapper">
<!-- Navbar wrapper -->
<div class="d-flex flex-row flex-shrink-0" role="navigation">
<!-- Navbar-->
<nav class="d-flex flex-row flex-grow-1 navbar sticky-top navbar-light bg-white p-0">
<div id="sidebarToggle" class="animated-burger-menu open mx-3">
<span class="bg-dark-secondary"></span>
<span class="bg-dark-secondary"></span>
<span class="bg-dark-secondary"></span>
<span class="bg-dark-secondary"></span>
</div>
<!-- Brand -->
<div id="brand" class="d-flex flex-column flex-grow-1 brand-content px-2">
<a id="navbar-brand" class="navbar-brand d-flex align-items-center p-0 m-0" href="#">
<img src="img/logo anker.jpg" class="navbar-image py-2" alt="" loading="lazy">
<span class="ml-3 font-weight-bold txt-primary">Seacrew</span>
</a>
</div>
<div class="d-flex flex-column flex-grow-0 dropdown h-100 mr-2">
<a class="btn btn-clean txt-dark dropdown-toggle d-flex align-items-center h-100" href="#" role="button"
id="profileDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="https://colorlib.com/polygon/gentelella/images/img.jpg" width="30" height="30" alt=""
class="rounded-circle">
<span class="pl-2 pr-2">John Doe</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="profileDropdownMenu">
<a class="dropdown-item" href="#"><i class="zmdi zmdi-account pr-2"></i>Profile</a>
<a class="dropdown-item" href="#"><i class="zmdi zmdi-close-circle pr-2"></i>Logout</a>
</div>
</div>
</nav>
</div>
<!-- Content wrapper -->
<div class="d-flex flex-row flex-grow-1 overflow-hidden">
<!-- Sidebar container-->
<aside id="sidebar-container" class="d-flex flex-column bg-light-secondary sidebar-container">
<!-- Sidebar content -->
<div id="sidebar" class="d-flex flex-column flex-grow-1 sidebar-content expanded">
<!-- Sidebar header -->
<div class="d-flex flex-shrink-0 collapsible-section py-1 sidebar-header">
<div class="d-flex flex-row flex-grow-1 align-items-center overflow-hidden">
<span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon">
<i class="zmdi zmdi-boat zmdi-hc-2x"></i>
</span>
<span class="flex-grow-1 expanded-only font-weight-bold">Company</span>
</div>
<!-- Dropright button -->
<div id="sidebarAdd" class="d-flex flex-column flex-shrink-0 position-relative btn-group dropright">
<a href="" class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span
class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center txt-dark sidebar-icon">
<i class="zmdi zmdi-plus zmdi-hc-2x"></i>
</span>
</a>
<div class="dropdown-menu position-absolute">
<a class="dropdown-item" href="#">Add something</a>
</div>
</div>
</div>
<!-- Seperator -->
<div class="separator flex-row flex-shrink-0"></div>
<!-- Sidebar middle section -->
<!-- Dashboard, New Applicants, Crew Data, Crew on board, Planning, Companies -->
<!-- Codes(Generic, Ranks), Users(Users, Groups), Triggers(Qualifications per rank) -->
<!-- Authorization(Employees, Vessels), Reports(Nationalities, Ranks, Age categories) -->
<div class="d-flex flex-column flex-grow-1 sidebar-middle py-2">
<div class="d-flex flex-column flex-shrink-0 position-relative">
<a href="#"
class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item active">
<span
class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-primary">
<i class="zmdi zmdi-view-dashboard zmdi-hc-2x"></i>
</span>
<span class="flex-grow-1 expanded-only">Dashboard</span>
</a>
</div>
<div class="d-flex flex-column flex-shrink-0 position-relative">
<a href="#"
class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item">
<span
class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-success">
<i class="zmdi zmdi-globe zmdi-hc-2x"></i>
</span>
<span class="flex-grow-1 expanded-only">Globe</span>
</a>
</div>
<div class="d-flex flex-column flex-shrink-0 position-relative">
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false"
class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item dropdown-toggle">
<span
class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-danger">
<i class="zmdi zmdi-google-pages zmdi-hc-2x"></i>
</span>
<span class="flex-grow-1 expanded-only">Pages</span>
</a>
<ul class="collapse list-unstyled sidebar-sub-items m-0" id="pageSubmenu">
<li>
<a href="#"
class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item">
<span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon">
<i class="zmdi zmdi-collection-item"></i>
</span>
<span class="flex-grow-1 expanded-only">Page 1</span>
</a>
</li>
<li>
<a href="#"
class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item">
<span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon">
<i class="zmdi zmdi-collection-item"></i>
</span>
<span class="flex-grow-1 expanded-only">Page 2</span>
</a>
</li>
</ul>
</div>
<div class="d-flex flex-column flex-shrink-0 position-relative">
<a href="#"
class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item">
<span
class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-info">
<i class="zmdi zmdi-assignment-check zmdi-hc-2x"></i>
</span>
<span class="flex-grow-1 expanded-only">Tasks</span>
</a>
</div>
<div class="d-flex flex-column flex-shrink-0 position-relative">
<a href="#"
class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item">
<span
class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-warning">
<i class="zmdi zmdi-fire zmdi-hc-2x"></i>
</span>
<span class="flex-grow-1 expanded-only">Fire</span>
</a>
</div>
<!-- Dropright button -->
<div class="d-flex flex-column flex-shrink-0 position-relative btn-group dropright">
<a href=""
class="d-flex flex-row flex-grow-1 align-items-center position-relative pl-0 txt-dark sidebar-item dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span
class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center txt-dark sidebar-icon">
<i class="zmdi zmdi-chart zmdi-hc-2x"></i>
</span>
<span class="flex-grow-1 expanded-only">Chart</span>
</a>
<div class="dropdown-menu position-absolute">
<a class="dropdown-item" href="#">Chart</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated chart</a>
</div>
</div>
</div>
<!-- Seperator -->
<div class="separator flex-row flex-shrink-0"></div>
<!-- Sidebar bottom section -->
<div class="d-flex flex-shrink-0 collapsible-section py-2">
<a href="#"
class="d-flex flex-row flex-grow-1 align-items-center overflow-hidden position-relative txt-dark sidebar-item">
<span>
<i
class="zmdi zmdi-settings zmdi-hc-2x d-flex flex-row align-items-center justify-content-center flex-shrink-0 sidebar-icon"></i>
</span>
<span class="expanded-only">Settings</span>
</a>
<div id="sidebarCollapse"
class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon py-2">
<i class="zmdi zmdi-chevron-left zmdi-hc-2x"></i>
</div>
</div>
</div>
</aside>
<!-- Main container-->
<main id="main-container" class="d-flex flex-column flex-grow-1 overflow-hidden main-container">
<!-- Main content -->
<div class="d-flex flex-column flex-grow-1 main-content">
<!-- Main header -->
<div class="d-flex flex-shrink-0 main-header">
<div class="container-fluid pt-5">
<div class="row">
<div class="col-12">
<h2>Dashboard</h2>
</div>
</div>
</div>
</div>
<!-- Main middle section -->
<div class="d-flex flex-column flex-grow-1 main-middle">
<div class="container-fluid pt-3">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 py-3">
<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">2 days ago</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 py-3">
<div class="mat-card bg-white">
<div class="d-flex flex-row align-items-center">
<div class="d-flex flex-column flex-grow-1 justify-content-center">
<h3 class="txt-dark">225,000</h3>
<span>New users.</span>
</div>
<div class="d-flex flex-column justify-content-center">
<i class="zmdi zmdi-account-add zmdi-hc-4x card-icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
6. The necessary JavaScript (jQuery script) to activate the sidebar nav.
// Define variables
var sidebarCollapse = $("#sidebarCollapse");
var sidebarToggle = $("#sidebarToggle");
var sidebarContent = $("#sidebar");
var sidebarContainer = $("#sidebar-container");
var mainContainer = $("#main-container");
var mql = window.matchMedia("(max-width: 768px)");
// init screen
responsive(mql);
// Add media listener
mql.addEventListener("change", responsive);
// sidebarCollapse event listener
sidebarCollapse.on("click", () => {
sidebarContent.toggleClass("expanded");
sidebarCollapse.toggleClass("rotated-icon");
});
// sidebarToggle event listener
sidebarToggle.on("click", () => {
var sidebarContainerMargin = parseInt(sidebarContainer.css("marginLeft").replace('px', ''));
(sidebarContainerMargin == 0) ? closeSidebar() : openSidebar();
});
// Opens sidebar
function openSidebar() {
sidebarContainer.css('margin-left', 0);
mainContainer.css('left', '48px');
sidebarToggle.addClass('open');
}
// Closes sidebar
function closeSidebar() {
sidebarContainer.css('margin-left', - sidebarContainer.width());
mainContainer.css('left', 0);
sidebarToggle.removeClass('open');
}
// Sets correct styling based on screen width
function responsive(mql) {
if (mql.matches) { // Small screen
addInlineStyling();
closeSidebar();
} else { // Large screen
removeInlineStyling();
openSidebar();
}
}
// Adds styling for main container
function addInlineStyling() {
mainContainer.css('position', 'absolute');
mainContainer.css('bottom', 0);
mainContainer.css('right', 0);
mainContainer.css('top', '48px');
if (sidebarContainer.css('margin-left') == '0px') {
mainContainer.css('left', '48px');
}
else {
mainContainer.css('left', '0px');
}
}
// Removes styling for main
function removeInlineStyling() {
mainContainer.removeAttr("style");
sidebarContainer.removeAttr("style");
}
This awesome jQuery plugin is developed by patricknnn. For more Advanced Usages, please check the demo page or visit the official website.
