"charts"
Bootstrap 4.1.1 Snippet by nileshkardate

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<aside class="sidebar position-fixed top-0 left-0 overflow-auto h-100 float-left" id="show-side-navigation1">
<i class="uil-bars close-aside d-md-none d-lg-none" data-close="show-side-navigation1"></i>
<div class="sidebar-header d-flex justify-content-center align-items-center px-3 py-4">
<img
class="rounded-pill img-fluid"
width="65"
src="https://uniim1.shutterfly.com/ng/services/mediarender/THISLIFE/021036514417/media/23148907008/medium/1501685726/enhance"
alt="">
<div class="ms-2">
<h5 class="fs-6 mb-0">
<a class="text-decoration-none" href="#">Jone Doe</a>
</h5>
<p class="mt-1 mb-0">Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="search position-relative text-center px-4 py-3 mt-2">
<input type="text" class="form-control w-100 border-0 bg-transparent" placeholder="Search here">
<i class="fa fa-search position-absolute d-block fs-6"></i>
</div>
<ul class="categories list-unstyled">
<li class="has-dropdown">
<i class="uil-estate fa-fw"></i><a href="#"> Dashboard</a>
<ul class="sidebar-dropdown list-unstyled">
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">ipsum dolor</a></li>
<li><a href="#">dolor ipsum</a></li>
<li><a href="#">amet consectetur</a></li>
<li><a href="#">ipsum dolor sit</a></li>
</ul>
</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet';
:root {
--dk-gray-100: #F3F4F6;
--dk-gray-200: #E5E7EB;
--dk-gray-300: #D1D5DB;
--dk-gray-400: #9CA3AF;
--dk-gray-500: #6B7280;
--dk-gray-600: #4B5563;
--dk-gray-700: #374151;
--dk-gray-800: #1F2937;
--dk-gray-900: #111827;
--dk-dark-bg: #313348;
--dk-darker-bg: #2a2b3d;
--navbar-bg-color: #6f6486;
--sidebar-bg-color: #252636;
--sidebar-width: 250px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--dk-darker-bg);
font-size: .925rem;
}
#wrapper {
margin-left: var(--sidebar-width);
transition: all .3s ease-in-out;
}
#wrapper.fullwidth {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// Other important pens.
// Map: https://codepen.io/themustafaomar/pen/ZEGJeZq
// Navbar: https://codepen.io/themustafaomar/pen/VKbQyZ
'use strict'
function $(selector) {
return document.querySelector(selector)
}
function find(el, selector) {
let finded
return (finded = el.querySelector(selector)) ? finded : null
}
function siblings(el) {
const siblings = []
for (let sibling of el.parentNode.children) {
if (sibling !== el) {
siblings.push(sibling)
}
}
return siblings
}
const showAsideBtn = $('.show-side-btn')
const sidebar = $('.sidebar')
const wrapper = $('#wrapper')
showAsideBtn.addEventListener('click', function () {
$(`#${this.dataset.show}`).classList.toggle('show-sidebar')
wrapper.classList.toggle('fullwidth')
})
if (window.innerWidth < 767) {
sidebar.classList.add('show-sidebar');
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Angular

Questions / Comments: