Bootstrap Sidebars:

Bootstrap Sidebar with Slide-in Effect

Have you ever thought to yourself what would be a nice little feature to add to your website design to make it shine more? Well, we will have you know that a sidebar is a great component for your website since it is both useful and creative and makes your website seem unique. So, if you want your website to stand out more among the other sites, then why not start with a simple code for Bootstrap animated sidebar.

How is this Bootstrap sidebar so special and how does it make my website look better, you might ask. Well, let’s imagine your website without such feature. You will have all your content spread across your site and the users will have a hard time trying to navigate your website and find the right web page they are after. This will affect your traffic hugely as people won’t stand around too long if they get frustrated. They prefer to enter the site and spend as little time as possible to find their answer.

Due to this fact, using a simple animated sidebar could have such a big affect on your site traffic. This beautiful slide-in sidebar is fully animated. Furthermore, the colour of your sidebar changes by doing different actions. For instance, when you hover your mouse pointer over an option on the sidebar, the colour will change to Rose and when you click on an option, it will turn into a nice shade of blue. If you wish to use this spectacular minimized sidebar, why now scroll down a bit and use the code for free.

Bootstrap Sidebar

Bootstrap Animated Sidebar

Animated Sidebar

Minimized Sidebar

Slide-in Sidebar

<!-- This script got from frontendfreecode.com -->
<header class="l-header">
    <div class="l-header__inner clearfix">
        <div class="c-header-icon js-hamburger">
            <div class="hamburger-toggle"><span class="bar-top"></span>
            <span class="bar-mid"></span><span class="bar-bot"></span>
            </div>
        </div>
        <div class="c-header-icon has-dropdown">
            <span class="c-badge c-badge--header-icon animated shake">87</span><i class="fa fa-bell"></i>
            <div class="c-dropdown c-dropdown--notifications">
                <div class="c-dropdown__header"></div>
                <div class="c-dropdown__content"></div>
            </div>
        </div>
        <div class="c-search">
            <input class="c-search__input u-input" placeholder="Search..." type="text" />
        </div>
        <div class="header-icons-group">
            <div class="c-header-icon basket"><span class="c-badge c-badge--header-icon animated shake">12</span>
            <i class="fa fa-shopping-basket"></i></div>
            <div class="c-header-icon logout"><i class="fa fa-power-off"></i></div>
        </div>
    </div>
</header>
<div class="l-sidebar">
    <div class="logo">
        <div class="logo__txt">D</div>
    </div>
    <div class="l-sidebar__content">
        <nav class="c-menu js-menu">
            <ul class="u-list">
                <li class="c-menu__item is-active" data-toggle="tooltip" title="Flights">
                    <div class="c-menu__item__inner">
                        <i class="fa fa-plane"></i>
                        <div class="c-menu-item__title"><span>Flights</span></div>
                    </div>
                </li>
                <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Modules">
                    <div class="c-menu__item__inner">
                        <i class="fa fa-puzzle-piece"></i>
                        <div class="c-menu-item__title"><span>Modules</span></div>
                        <div class="c-menu-item__expand js-expand-submenu"><i class="fa fa-angle-down"></i></div>
                    </div>
                    <ul class="c-menu__submenu u-list">
                        <li>Payments</li>
                        <li>Maps</li>
                        <li>Notifications</li>
                    </ul>
                </li>
                <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Statistics">
                    <div class="c-menu__item__inner">
                        <i class="fa fa-bar-chart"></i>
                        <div class="c-menu-item__title"><span>Statistics</span></div>
                    </div>
                </li>
                <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Gifts">
                    <div class="c-menu__item__inner">
                        <i class="fa fa-gift"></i>
                        <div class="c-menu-item__title"><span>Gifts</span></div>
                    </div>
                </li>
                <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Settings">
                    <div class="c-menu__item__inner">
                        <i class="fa fa-cogs"></i>
                        <div class="c-menu-item__title"><span>Settings</span></div>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</div>
<main class="l-main">
    <div class="content-wrapper content-wrapper--with-bg">
        <h1 class="page-title">Dashboard</h1>
        <div class="page-content">Content goes here</div>
    </div>
</main><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext");
html, body {
    height: 100%;
    width: 100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    background-color: #ececec;
    color: #102c58;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
::-webkit-input-placeholder {
    color: #c3c3c3;
}
h1 {
    font-size: 24px;
}
h2 {
    font-size: 20px;
}
h3 {
    font-size: 18px;
}
.u-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.u-input {
    outline: 0;
    border: 1px solid #d0d0d0;
    padding: 5px 10px;
    height: 35px;
    font-size: 12px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-clip: padding-box;
}
.c-badge {
    font-size: 10px;
    font-weight: 700;
    min-width: 17px;
    padding: 5px 4px;
    border-radius: 100px;
    display: block;
    line-height: 0.7;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #f91605;
}
.c-badge--header-icon {
    position: absolute;
    bottom: -9px;
}
.tooltip {
    width: 120px;
}
.tooltip-inner {
    padding: 8px 10px;
    color: #fff;
    text-align: center;
    background-color: #051835;
    font-size: 12px;
    border-radius: 3px;
}
.tooltip-arrow {
    border-right-color: #051835 !important;
}
.hamburger-toggle {
    position: relative;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    order: 1;
}
.hamburger-toggle [class*='bar-'] {
    display: block;
    background: #102c58;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .2s ease all;
    transition: .2s ease all;
    border-radius: 2px;
    height: 2px;
    width: 24px;
    margin-bottom: 4px;
}
.hamburger-toggle [class*='bar-']:nth-child(2) {
    width: 18px;
}
.hamburger-toggle [class*='bar-']:last-child {
    margin-bottom: 0;
    width: 12px;
}
.hamburger-toggle.is-opened {
    left: 3px;
}
.hamburger-toggle.is-opened [class*='bar-'] {
    background: #102c58;
}
.hamburger-toggle.is-opened .bar-top {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 15% 15%;
    transform-origin: 15% 15%;
}
.hamburger-toggle.is-opened .bar-mid {
    opacity: 0;
}
.hamburger-toggle.is-opened .bar-bot {
    -webkit-transform: rotate(45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 15% 95%;
    transform-origin: 15% 95%;
    width: 24px;
}
.hamburger-toggle:focus {
    outline-width: 0;
}
.hamburger-toggle:hover [class*='bar-'] {
    background: #f5642d;
}
.header-icons-group {
    display: flex;
    order: 3;
    margin-left: auto;
    height: 100%;
    border-left: 1px solid #cccccc;
}
.header-icons-group .c-header-icon:last-child {
    border-right: 0;
}
.c-header-icon {
    position: relative;
    display: flex;
    float: left;
    width: 70px;
    height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    border-right: 1px solid #cccccc;
}
.c-header-icon i {
    font-size: 18px;
    line-height: 40px;
}
.c-header-icon--in-circle {
    border: 1px solid #d0d0d0;
    border-radius: 100%;
}
.c-header-icon:hover i {
    color: #f5642d;
}
.l-header {
    padding-left: 70px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    background: #ffffff;
    -webkit-transition: padding 0.5s ease-in-out;
    -moz-transition: padding 0.5s ease-in-out;
    -ms-transition: padding 0.5s ease-in-out;
    -o-transition: padding 0.5s ease-in-out;
    transition: padding 0.5s ease-in-out;
}
.l-header__inner {
    height: 100%;
    width: 100%;
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: stretch;
    border-bottom: 1px solid;
    border-color: #cccccc;
}
.sidebar-is-expanded .l-header {
    padding-left: 220px;
}
.c-search {
    display: flex;
    height: 100%;
    width: 350px;
}
.c-search__input {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: 0;
    flex-basis: 100%;
    height: 100%;
    border: 0;
    font-size: 14px;
    padding: 0 20px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.c-dropdown {
    opacity: 0;
    text-align: left;
    position: absolute;
    flex-direction: column;
    display: none;
    width: 300px;
    top: 30px;
    right: -40px;
    background-color: #fff;
    overflow: hidden;
    min-height: 300px;
    border: 1px solid #d0d0d0;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-clip: padding-box;
    -webkit-box-shadow: 0px 5px 14px -1px #cecece;
    -moz-box-shadow: 0px 5px 14px -1px #cecece;
    box-shadow: 0px 5px 14px -1px #cecece;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.l-sidebar {
    width: 70px;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    bottom: 0;
    background: #102c58;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -ms-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}
.l-sidebar .logo {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #051835;
}
.l-sidebar .logo .logo__txt {
    font-size: 26px;
    line-height: 1;
    color: #fff;
    text-align: center;
    font-weight: 700;
}
.l-sidebar__content {
    height: 100%;
    position: relative;
}
.sidebar-is-expanded .l-sidebar {
    width: 220px;
}
.c-menu > ul {
    display: flex;
    flex-direction: column;
}
.c-menu > ul .c-menu__item {
    color: #fff;
    max-width: 100%;
    overflow: hidden;
}
.c-menu > ul .c-menu__item__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 60px;
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.c-menu > ul .c-menu__item__inner:before {
    position: absolute;
    content: " ";
    height: 0;
    width: 2px;
    left: 0;
    top: 50%;
    margin-top: -18px;
    background-color: #5f9cfd;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner {
    border-left-color: #5f9cfd;
    background-color: #1e3e6f;
}
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner i {
    color: #5f9cfd;
}
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner .c-menu-item__title span {
    color: #5f9cfd;
}
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner:before {
    height: 36px;
    opacity: 1;
}
.c-menu > ul .c-menu__item:not(.is-active):hover .c-menu__item__inner {
    background-color: #f5642d;
    border-left-color: #f5642d;
}
.c-menu > ul .c-menu__item i {
    flex: 0 0 70px;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.c-menu > ul .c-menu__item .c-menu-item__expand {
    position: relative;
    left: 100px;
    padding-right: 20px;
    margin-left: auto;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__expand {
    left: 0px;
}
.c-menu > ul .c-menu__item .c-menu-item__title {
    flex-basis: 100%;
    padding-right: 10px;
    position: relative;
    left: 220px;
    opacity: 0;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
}
.c-menu > ul .c-menu__item .c-menu-item__title span {
    font-weight: 400;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__title {
    left: 0px;
    opacity: 1;
}
.c-menu > ul .c-menu__item .c-menu__submenu {
    background-color: #051835;
    padding: 15px;
    font-size: 12px;
    display: none;
}
.c-menu > ul .c-menu__item .c-menu__submenu li {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid;
    border-color: #072048;
    color: #5f9cfd;
}
.c-menu > ul .c-menu__item .c-menu__submenu li:last-child {
    margin: 0;
    padding: 0;
    border: 0;
}
main.l-main {
    width: 100%;
    height: 100%;
    padding: 70px 0 0 70px;
    -webkit-transition: padding 0.5s ease-in-out;
    -moz-transition: padding 0.5s ease-in-out;
    -ms-transition: padding 0.5s ease-in-out;
    -o-transition: padding 0.5s ease-in-out;
    transition: padding 0.5s ease-in-out;
}
main.l-main .content-wrapper {
    padding: 25px;
    height: 100%;
}
main.l-main .content-wrapper .page-content {
    border-top: 1px solid #d0d0d0;
    padding-top: 25px;
}
main.l-main .content-wrapper--with-bg .page-content {
    background: #fff;
    border-radius: 3px;
    border: 1px solid #d0d0d0;
    padding: 25px;
}
main.l-main .page-title {
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 25px;
}
.sidebar-is-expanded main.l-main {
    padding-left: 220px;
}

"use strict";
var Dashboard = function () {
    var global = {
        tooltipOptions: {
            placement: "right"
        },
        menuClass: ".c-menu"
    };
    var menuChangeActive = function menuChangeActive(el) {
        var hasSubmenu = $(el).hasClass("has-submenu");
        $(global.menuClass + " .is-active").removeClass("is-active");
        $(el).addClass("is-active");

        // if (hasSubmenu) {
        // 	$(el).find("ul").slideDown();
        // }
    };
    var sidebarChangeWidth = function sidebarChangeWidth() {
        var $menuItemsTitle = $("li .menu-item__title");

        $("body").toggleClass("sidebar-is-reduced sidebar-is-expanded");
        $(".hamburger-toggle").toggleClass("is-opened");

        if ($("body").hasClass("sidebar-is-expanded")) {
            $('[data-toggle="tooltip"]').tooltip("destroy");
        } else {
            $('[data-toggle="tooltip"]').tooltip(global.tooltipOptions);
        }
    };
    return {
        init: function init() {
            $(".js-hamburger").on("click", sidebarChangeWidth);

            $(".js-menu li").on("click", function (e) {
                menuChangeActive(e.currentTarget);
            });

            $('[data-toggle="tooltip"]').tooltip(global.tooltipOptions);
        }
    };
}();
Dashboard.init();
//# sourceURL=pen.js

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://use.fontawesome.com/2188c74ac9.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://use.fontawesome.com/2188c74ac9.js'></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext");
html, body {
    height: 100%;
    width: 100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    background-color: #ececec;
    color: #102c58;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
::-webkit-input-placeholder {
    color: #c3c3c3;
}
h1 {
    font-size: 24px;
}
h2 {
    font-size: 20px;
}
h3 {
    font-size: 18px;
}
.u-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.u-input {
    outline: 0;
    border: 1px solid #d0d0d0;
    padding: 5px 10px;
    height: 35px;
    font-size: 12px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-clip: padding-box;
}
.c-badge {
    font-size: 10px;
    font-weight: 700;
    min-width: 17px;
    padding: 5px 4px;
    border-radius: 100px;
    display: block;
    line-height: 0.7;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #f91605;
}
.c-badge--header-icon {
    position: absolute;
    bottom: -9px;
}
.tooltip {
    width: 120px;
}
.tooltip-inner {
    padding: 8px 10px;
    color: #fff;
    text-align: center;
    background-color: #051835;
    font-size: 12px;
    border-radius: 3px;
}
.tooltip-arrow {
    border-right-color: #051835 !important;
}
.hamburger-toggle {
    position: relative;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    order: 1;
}
.hamburger-toggle [class*='bar-'] {
    display: block;
    background: #102c58;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .2s ease all;
    transition: .2s ease all;
    border-radius: 2px;
    height: 2px;
    width: 24px;
    margin-bottom: 4px;
}
.hamburger-toggle [class*='bar-']:nth-child(2) {
    width: 18px;
}
.hamburger-toggle [class*='bar-']:last-child {
    margin-bottom: 0;
    width: 12px;
}
.hamburger-toggle.is-opened {
    left: 3px;
}
.hamburger-toggle.is-opened [class*='bar-'] {
    background: #102c58;
}
.hamburger-toggle.is-opened .bar-top {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 15% 15%;
    transform-origin: 15% 15%;
}
.hamburger-toggle.is-opened .bar-mid {
    opacity: 0;
}
.hamburger-toggle.is-opened .bar-bot {
    -webkit-transform: rotate(45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 15% 95%;
    transform-origin: 15% 95%;
    width: 24px;
}
.hamburger-toggle:focus {
    outline-width: 0;
}
.hamburger-toggle:hover [class*='bar-'] {
    background: #f5642d;
}
.header-icons-group {
    display: flex;
    order: 3;
    margin-left: auto;
    height: 100%;
    border-left: 1px solid #cccccc;
}
.header-icons-group .c-header-icon:last-child {
    border-right: 0;
}
.c-header-icon {
    position: relative;
    display: flex;
    float: left;
    width: 70px;
    height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    border-right: 1px solid #cccccc;
}
.c-header-icon i {
    font-size: 18px;
    line-height: 40px;
}
.c-header-icon--in-circle {
    border: 1px solid #d0d0d0;
    border-radius: 100%;
}
.c-header-icon:hover i {
    color: #f5642d;
}
.l-header {
    padding-left: 70px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    background: #ffffff;
    -webkit-transition: padding 0.5s ease-in-out;
    -moz-transition: padding 0.5s ease-in-out;
    -ms-transition: padding 0.5s ease-in-out;
    -o-transition: padding 0.5s ease-in-out;
    transition: padding 0.5s ease-in-out;
}
.l-header__inner {
    height: 100%;
    width: 100%;
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: stretch;
    border-bottom: 1px solid;
    border-color: #cccccc;
}
.sidebar-is-expanded .l-header {
    padding-left: 220px;
}
.c-search {
    display: flex;
    height: 100%;
    width: 350px;
}
.c-search__input {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: 0;
    flex-basis: 100%;
    height: 100%;
    border: 0;
    font-size: 14px;
    padding: 0 20px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.c-dropdown {
    opacity: 0;
    text-align: left;
    position: absolute;
    flex-direction: column;
    display: none;
    width: 300px;
    top: 30px;
    right: -40px;
    background-color: #fff;
    overflow: hidden;
    min-height: 300px;
    border: 1px solid #d0d0d0;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-clip: padding-box;
    -webkit-box-shadow: 0px 5px 14px -1px #cecece;
    -moz-box-shadow: 0px 5px 14px -1px #cecece;
    box-shadow: 0px 5px 14px -1px #cecece;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.l-sidebar {
    width: 70px;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    bottom: 0;
    background: #102c58;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -ms-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}
.l-sidebar .logo {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #051835;
}
.l-sidebar .logo .logo__txt {
    font-size: 26px;
    line-height: 1;
    color: #fff;
    text-align: center;
    font-weight: 700;
}
.l-sidebar__content {
    height: 100%;
    position: relative;
}
.sidebar-is-expanded .l-sidebar {
    width: 220px;
}
.c-menu > ul {
    display: flex;
    flex-direction: column;
}
.c-menu > ul .c-menu__item {
    color: #fff;
    max-width: 100%;
    overflow: hidden;
}
.c-menu > ul .c-menu__item__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 60px;
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.c-menu > ul .c-menu__item__inner:before {
    position: absolute;
    content: " ";
    height: 0;
    width: 2px;
    left: 0;
    top: 50%;
    margin-top: -18px;
    background-color: #5f9cfd;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner {
    border-left-color: #5f9cfd;
    background-color: #1e3e6f;
}
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner i {
    color: #5f9cfd;
}
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner .c-menu-item__title span {
    color: #5f9cfd;
}
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner:before {
    height: 36px;
    opacity: 1;
}
.c-menu > ul .c-menu__item:not(.is-active):hover .c-menu__item__inner {
    background-color: #f5642d;
    border-left-color: #f5642d;
}
.c-menu > ul .c-menu__item i {
    flex: 0 0 70px;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.c-menu > ul .c-menu__item .c-menu-item__expand {
    position: relative;
    left: 100px;
    padding-right: 20px;
    margin-left: auto;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__expand {
    left: 0px;
}
.c-menu > ul .c-menu__item .c-menu-item__title {
    flex-basis: 100%;
    padding-right: 10px;
    position: relative;
    left: 220px;
    opacity: 0;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
}
.c-menu > ul .c-menu__item .c-menu-item__title span {
    font-weight: 400;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__title {
    left: 0px;
    opacity: 1;
}
.c-menu > ul .c-menu__item .c-menu__submenu {
    background-color: #051835;
    padding: 15px;
    font-size: 12px;
    display: none;
}
.c-menu > ul .c-menu__item .c-menu__submenu li {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid;
    border-color: #072048;
    color: #5f9cfd;
}
.c-menu > ul .c-menu__item .c-menu__submenu li:last-child {
    margin: 0;
    padding: 0;
    border: 0;
}
main.l-main {
    width: 100%;
    height: 100%;
    padding: 70px 0 0 70px;
    -webkit-transition: padding 0.5s ease-in-out;
    -moz-transition: padding 0.5s ease-in-out;
    -ms-transition: padding 0.5s ease-in-out;
    -o-transition: padding 0.5s ease-in-out;
    transition: padding 0.5s ease-in-out;
}
main.l-main .content-wrapper {
    padding: 25px;
    height: 100%;
}
main.l-main .content-wrapper .page-content {
    border-top: 1px solid #d0d0d0;
    padding-top: 25px;
}
main.l-main .content-wrapper--with-bg .page-content {
    background: #fff;
    border-radius: 3px;
    border: 1px solid #d0d0d0;
    padding: 25px;
}
main.l-main .page-title {
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 25px;
}
.sidebar-is-expanded main.l-main {
    padding-left: 220px;
}
</style>

</head>
<body>
<header class="l-header">
    <div class="l-header__inner clearfix">
        <div class="c-header-icon js-hamburger">
            <div class="hamburger-toggle"><span class="bar-top"></span>
            <span class="bar-mid"></span><span class="bar-bot"></span>
            </div>
        </div>
        <div class="c-header-icon has-dropdown">
            <span class="c-badge c-badge--header-icon animated shake">87</span><i class="fa fa-bell"></i>
            <div class="c-dropdown c-dropdown--notifications">
                <div class="c-dropdown__header"></div>
                <div class="c-dropdown__content"></div>
            </div>
        </div>
        <div class="c-search">
            <input class="c-search__input u-input" placeholder="Search..." type="text" />
        </div>
        <div class="header-icons-group">
            <div class="c-header-icon basket"><span class="c-badge c-badge--header-icon animated shake">12</span>
            <i class="fa fa-shopping-basket"></i></div>
            <div class="c-header-icon logout"><i class="fa fa-power-off"></i></div>
        </div>
    </div>
</header>
<div class="l-sidebar">
    <div class="logo">
        <div class="logo__txt">D</div>
    </div>
    <div class="l-sidebar__content">
        <nav class="c-menu js-menu">
            <ul class="u-list">
                <li class="c-menu__item is-active" data-toggle="tooltip" title="Flights">
                    <div class="c-menu__item__inner">
                        <i class="fa fa-plane"></i>
                        <div class="c-menu-item__title"><span>Flights</span></div>
                    </div>
                </li>
                <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Modules">
                    <div class="c-menu__item__inner">
                        <i class="fa fa-puzzle-piece"></i>
                        <div class="c-menu-item__title"><span>Modules</span></div>
                        <div class="c-menu-item__expand js-expand-submenu"><i class="fa fa-angle-down"></i></div>
                    </div>
                    <ul class="c-menu__submenu u-list">
                        <li>Payments</li>
                        <li>Maps</li>
                        <li>Notifications</li>
                    </ul>
                </li>
                <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Statistics">
                    <div class="c-menu__item__inner">
                        <i class="fa fa-bar-chart"></i>
                        <div class="c-menu-item__title"><span>Statistics</span></div>
                    </div>
                </li>
                <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Gifts">
                    <div class="c-menu__item__inner">
                        <i class="fa fa-gift"></i>
                        <div class="c-menu-item__title"><span>Gifts</span></div>
                    </div>
                </li>
                <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Settings">
                    <div class="c-menu__item__inner">
                        <i class="fa fa-cogs"></i>
                        <div class="c-menu-item__title"><span>Settings</span></div>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</div>
<main class="l-main">
    <div class="content-wrapper content-wrapper--with-bg">
        <h1 class="page-title">Dashboard</h1>
        <div class="page-content">Content goes here</div>
    </div>
</main><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
"use strict";
var Dashboard = function () {
    var global = {
        tooltipOptions: {
            placement: "right"
        },
        menuClass: ".c-menu"
    };
    var menuChangeActive = function menuChangeActive(el) {
        var hasSubmenu = $(el).hasClass("has-submenu");
        $(global.menuClass + " .is-active").removeClass("is-active");
        $(el).addClass("is-active");

        // if (hasSubmenu) {
        // 	$(el).find("ul").slideDown();
        // }
    };
    var sidebarChangeWidth = function sidebarChangeWidth() {
        var $menuItemsTitle = $("li .menu-item__title");

        $("body").toggleClass("sidebar-is-reduced sidebar-is-expanded");
        $(".hamburger-toggle").toggleClass("is-opened");

        if ($("body").hasClass("sidebar-is-expanded")) {
            $('[data-toggle="tooltip"]').tooltip("destroy");
        } else {
            $('[data-toggle="tooltip"]').tooltip(global.tooltipOptions);
        }
    };
    return {
        init: function init() {
            $(".js-hamburger").on("click", sidebarChangeWidth);

            $(".js-menu li").on("click", function (e) {
                menuChangeActive(e.currentTarget);
            });

            $('[data-toggle="tooltip"]').tooltip(global.tooltipOptions);
        }
    };
}();
Dashboard.init();
//# sourceURL=pen.js
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars