Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <div class="be-wrapper be-offcanvas-menu be-fixed-sidebar">
   <nav class="navbar navbar-expand fixed-top be-top-header">
      <div class="container-fluid">
         <div class="be-navbar-header">
            <a class="nav-link be-toggle-left-sidebar" href="#" id="sidebar_btn">
               <span class="icon zmdi zmdi-menu"></span>
            </a>
            <a class="navbar-brand" href="#"></a>
         </div>
         <div class="be-right-navbar be-right-navbar-flex">
            <div class="search-container">
               <div class="input-group input-group-sm mx-auto">
                  <input class="form-control search-input"
                         type="text" name="search"
                         placeholder="Search" />
                  <span class="input-group-btn">
                     <button class="btn btn-light" type="button"><i class="icon zmdi zmdi-search"></i></button>
                  </span>
               </div>
            </div>
            <ul class="nav navbar-nav float-right be-user-nav">
               <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#">
                     <img src="https://s.cdpn.io/profiles/user/2598789/512.jpg?1542577702">
                     <span class="user-name">Studio KonKon</span>
                  </a>
               </li>
            </ul>
            <ul class="nav navbar-nav float-right be-icons-nav">
               <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="true">
                     <span class="icon zmdi zmdi-comment-video"></span>
                  </a>
                  <ul class="dropdown-menu">video</ul>
               </li>
               <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="true">
                     <span class="icon zmdi zmdi-apps"></span>
                  </a>
                  <ul class="dropdown-menu">apps</ul>
               </li>
               <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="true">
                     <span class="icon zmdi zmdi-comment-text"></span>
                  </a>
                  <ul class="dropdown-menu">comment</ul>
               </li>
               <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="true">
                     <span class="icon zmdi zmdi-notifications"></span>
                  </a>
                  <ul class="dropdown-menu">notifications</ul>
               </li>
            </ul>
         </div>
      </div>
   </nav>
   <div class="be-left-sidebar" id="left_sidebar">
      <div class="left-sidebar-wrapper">
         <div class="left-sidebar-spacer">
            <div class="left-sidebar-scroll">
               <div class="left-sidebar-content">
                  <ul class="sidebar-elements">
                     <li class="active"><a href="#"><i class="icon zmdi zmdi-home"></i><span>Home</span></a></li>
                     <li><a href="#"><i class="icon zmdi zmdi-fire"></i><span>Trending</span></a></li>
                     <li><a href="#"><i class="icon zmdi zmdi-hourglass-alt"></i><span>History</span></a></li>
                     <li><a href="#"><i class="icon zmdi zmdi-label"></i><span>Purchases</span></a></li>
                     <li class="divider">More Features</li>
                     <li class="parent"><a href="#"><i class="icon zmdi zmdi-comments"></i><span>Forum</span></a>
                        <ul class="sub-menu">
                           <li><a href="#">CodePen</a></li>
                           <li><a href="#">Stack Overflow</a></li>
                           <li><a href="#">Google</a></li>
                        </ul>
                     </li>
                     <li class="parent"><a href="#"><i class="icon zmdi zmdi-apps"></i><span>Apps</span></a>
                        <ul class="sub-menu">
                           <li><a href="#">YouTube</a></li>
                           <li><a href="#">Search</a></li>
                           <li><a href="#">Email</a></li>
                           <li><a href="#">News</a></li>
                           <li><a href="#">Diary</a></li>
                           <li><a href="#">More</a></li>
                        </ul>
                     </li>
                     <li><a href="#"><i class="icon zmdi zmdi-notifications"></i><span>Notifications</span></a></li>
                     <li><a href="#"><i class="icon zmdi zmdi-translate"></i><span>Translate</span></a></li>
                     <li class="divider">Settings</li>
                     <li id="debug_only_menuopen" class="parent">
                        <a href="#"><i class="icon zmdi zmdi-settings"></i><span>Settings</span></a>
                        <ul class="sub-menu">
                           <li class="parent"><a href="#">Account</a>
                              <ul class="sub-menu">
                                 <li><a href="#">Profile</a></li>
                                 <li><a href="#">Privacy</a></li>
                                 <li class="parent"><a href="#">Brand</a>
                                    <ul class="sub-menu">
                                       <li><a href="#">Add New</a></li>
                                       <li><a href="#">Deactivate</a></li>
                                    </ul>
                                 </li>
                              </ul>
                           </li>
                           <li><a href="#">Language</a></li>
                           <li><a href="#">Data Usage</a></li>
                        </ul>
                     </li>
                     <li><a href="#"><i class="icon zmdi zmdi-flag"></i><span>Report History</span></a></li>
                     <li><a href="#"><i class="icon zmdi zmdi-help"></i><span>Help</span></a></li>
                     <li><a href="#"><i class="icon zmdi zmdi-comment-alert"></i><span>Send Feedback</span></a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="be-content">
      <div class="container" style="max-width:600px;margin:40px auto;font-size:1.2rem;">
         <h1 style="color:#fe669e;">Theme Notice</h1>
         <br />
         <hr />
         <p><b>Last updated:</b> 25th August 2021</p>
         <p>This pen is a personal project I used for testing while away from home on a smartphone.</p>
         <p>It's a theme I am building for myself, for my own applications and website. A live demo can be seen here at <span style="color:#fe669e;">play.studiokonkon.com</span></p>
         <p>I am currently now upgrading to Bootstrap 5 and removing jQuery. You can see the project at: <span style="color:#fe669e;">https://github.com/StudioKonKon/bootstrap-konkon</span></p>
         <p>As already mentioned, this is a personal project and I cannot guarantee regular updates. Unfortunetly, I don't get paid for this and have other paid work that takes away the time I need. During the pandemic of 2020, I had lots of free time but now, I no longer have that opportunity to work on this everyday.</p>
         <p>As a personal project, I intend to use this as a theme for my own website(s) but it is available for others to use if they wish either for their own content or for educational purposes.</p>
         <p>Preview showcase: <a href="https://codepen.io/StudioKonKon/pen/gORaEEd" target="_blank">https://codepen.io/StudioKonKon/pen/gORaEEd</a></p>
         <p><b>Also, no dark mode!?</b> I'm sorry but I will never be planning support for dark mode. It's not that I hate it but simply that dark mode causes eye strain and it's difficult for me to work with. It only takes up to 3 seconds and I get an instant migraine, blurred vision and feeling sick.</p>
         <p>Light mode has never been an issue and even in the dark, light mode does not burn my eye's as others claim happens to them. I've already seen a doctor and optician and they say it's simply the shape of the eye, how light enters and how the brain processes that light; There's nothing I can do about it except wear darkened glasses that darkens white text on black. Kind of pointless really.</p>
         <p>Unfortunately, dark mode is impossible for me to work on and neither do I need it.</p>
         <hr />
         <p><b>Last updated:</b> 2020</p>
         <p>This pen is a work in progress.</p>
         <p>As I spend a lot of time working and away from home, I've began to use CodePen as a base for coding on my smartphone during work breaks.</p>
         <p>Unfortunately, as a self-employed music teacher, I don't earn much and cannot afford paying for PRO subscriptions. Any code you find here you use freely knowning there will be a lot of bugs or missing features.</p>
         <p>I can't say when it will be complete, however, this pen will be constantly revised and updated until I am satisfied with what I have.</p>
         <p>I've named it "YouTube Style" because that's what it was based off but it'll be a custom or extended version. It may even lose such title as more is added (such as the android app header appears at lower media size). I don't intend to plagiarize it completely as that could end up with something illegal. This Navbar+Sidebar is more unqiue and adds original content.</p>
         <p>The final product will eventually be posted on GitHub as OpenSource.</p>
         <p>Why am I doing this...? There are a few projects I've got on such as a Japanese Learning course I'd like to implement this template in, I think it would be good. Also, I plan to use it on my own website, integrating it as a WordPress Theme for personal use.</p>
         <p>Why is the theme... pink? Ah, well. That just so happens to be the prominant colour of my brand/logo. It can easily be changed in the SASS to the defaults. Long story.</p>
         <p>Anyway, I'll be keeping many other pens to this template/theme as a collection here: <a href="https://codepen.io/collection/AQvoEb/" target="_blank" style="color:#fe669e;">Bootstrap 4.1.3 Studio KonKon Theme Templates (SASS)</a></p>
         <br />
         <p><b>Studio KonKon</b><br /><i>Web Developer & Music Teacher</i><br /><a href="https://studiokonkon.com/" target="_blank" style="color:#fe669e;font-size:1rem;">https://studiokonkon.com/</a></p>
         <br />
         <hr />
         <div class="text-center" style="font-size:0.95rem;">
            <span>Powered by <a href="https://codepen.io/" target="_blank">codepen.io</a></span>
            <br />
            <span>Images hosted by <a href="https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/jt1c11zcpsjpusygprd7" target="_blank">Cloudinary</a></span>
         </div>
      </div>
   </div>
</div>
!

CSS 

              
                /*

Bootstrap requirements. (v4.1.3 SASS)
https://codepen.io/StudioKonKon/pen/EGmWGm

Updated 2020.01.08 @ 07:42:34pm UK
Recent Changes:
• Improved searchbar button icon
• Added scrollbar support (OverlayScrollbars)

TODO:

• Additional testing.
• Improve qaulity of code.
• Animate before navigating?
• Use jQuery scroller, Overlay Scrollbars or PerfectScroller? (See JavaScript pane)

*/

// Updated: 2019.14.03 @ 18:09:27
/** Scrollbar Support (See JavaScript pane) **/
/*
.left-sidebar-scroll
{
	overflow-y: auto !important;
}

.left-sidebar-scroll::-webkit-scrollbar
{
	display: block;
	width: 10px;
	height: 100%;
	transition: background-color .2s linear, opacity .2s linear;
	-webkit-transition: background-color .2s linear, opacity .2s linear;
	background-color: transparent;
}

.left-sidebar-scroll::-webkit-scrollbar-track-piece
{
	background-color: #eee;
}

.left-sidebar-scroll::-webkit-scrollbar-thumb
{
	background-color: #aaa;
	background-clip: padding-box;
	border: solid 2px transparent;
	border-radius: 6px;
}

*/

/**  Bootstrap ENDS  **/
/** Responsive Variables **/

@mixin media_size($device: "")
{
   @if $device == "desktop-min"
   {
      @media #{"(min-width: 1349px)"} { @content; }
   }
   @else if $device == "desktop"
   {
      @include media-breakpoint-up(xl) { @content; }
   }
   @else if $device == "laptop"
   {
      @include media-breakpoint-only(lg) { @content; } // (min-width: 992px) and (max-width: 1199.98px)
   }
   @else if $device == "tablet-only"
   {
      @include media-breakpoint-only(md) { @content; } // (min-width: 768px) and (max-width: 991.98px)
   }
   @else if $device == "tablet"
   {
      @include media-breakpoint-down(md) { @content; } // max-width: 991.98px
   }
   @else if $device == "phone"
   {
      @include media-breakpoint-down(sm) { @content; } // max-width: 767.98px
   }
   @else if $device == "small-phone"
   {
      @include media-breakpoint-down(xs) { @content; } // max-width: 575.98px
   }
   @else if $device == "non-responsive"
   {
      @include media-breakpoint-up(md) { @content; } // min-width: 768px
   }
   @else if $device == "retina"
   {
      //Retina Display
      @media #{"(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"} { @content; }
   }
   @else if $device == "high-dpi"
   {
      @media #{"only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi)"} { @content; }
   }
   @else if $device == "webkit"
   {
      //Google Chrome Query
      @media #{"screen and (-webkit-min-device-pixel-ratio:0)"} { @content; }
   }
   @else if $device == "ie8"
   {
      //IE8 Media Query
      @media #{"\0screen"} { @content; }
   }
   @else if $device == "ie910"
   {
      //IE9 & IE10 Media Query
      @media #{"screen and (min-width:0\\0)"} { @content; }
   }
   @else if $device == "ie10"
   {
      //IE 10+ Media Query
      @media #{"all and (-ms-high-contrast: none), (-ms-high-contrast: active)"} { @content; }
   }
   @else
   {
      @content;
   }
}

@function force-hex($color)
{
   @if type-of($color) == 'color'
   {
      $hex: str-slice(ie-hex-str($color), 4);
      @return unquote("\##{$hex}");
   }

   @return $color;
}


/*------------------------------------------------------------------
[General elements style]
*/

$disable-body-scrollbar: true; // Prevent body scrolling when sidebar is open

$left-sidebar-separators: true; // Without label names
$primary-color: #FE669E;
// Change theme colour
// default colour: lighten(#4285f4, 8%)
// KonKon Theme: #FE669E
// YouTube Theme: lighten(#cc181e, 15%)

// Sidebar Item Hover Styles
$left-sidebar-bg: lighten($primary-color, 28%);
$left-sidebar-hover-color: lighten($primary-color, 14%);
$left-sidebar-level-bg: lighten($primary-color, 28%);
$left-sidebar-level-hover: lighten($primary-color, 24%);
$left-sidebar-level-color: $primary-color;
$left-sidebar-border-color: $left-sidebar-level-hover;

/* Default Theme */

$img-path-logo: "https://res.cloudinary.com/studiokonkon/image/upload/v1543962008/website/konkon-header-300x76-ova.png" !default;

$img-path-logo-white: "https://res.cloudinary.com/studiokonkon/image/upload/v1544030389/website/konkon-header-300x76-ova-pwhite.png" !default;

$logo-width: 102px !default;
$logo-height: 27px !default;
$logo-padding: 20px !default;
$logo-position: center !default;
$logo-size: contain !default;

$body-background: #ffffff !default;
$body-color: #404040 !default;
$text-color: #404040 !default;
$light-color: #ffffff !default;
$dark-color: #3d3c3c !default;
$font-weight-light: 300 !default;
$icons-font: 'Material-Design-Iconic-Font' !default;

$primary-color: #4285f4 !default;
$zindex-fixed: 1030 !default;
$danger-color: #ea4335 !default;
$warning-color: #fbbc05 !default;
$success-color: #34a853 !default;
$zindex-dropdown: 1000 !default;

$icon-default-color: lighten($body-color, 35%) !default;

$dropdown-text-color: lighten($dark-color, 7.2%) !default;
$dropdown-bg: #fff !default;
$dropdown-border: darken($light-color, 11%) !default;
$dropdown-fallback-border: $dropdown-border !default;
$dropdown-divider-bg: #e5e5e5 !default;
$dropdown-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) !default;

$top-header-bg: $light-color !default;
$top-header-phone-bg: $primary-color !default;
$top-header-link-color: darken($light-color, 55%) !default;
$top-header-height: 60px !default;
$top-header-height-phone: 70px !default;
$top-header-navbar-color: lighten($text-color, 10%) !default;
$top-header-navbar-font-size: 14px !default;
$top-header-navbar-padding: 18px !default;
$icons-nav-dropdown-width: 300px !default;
$user-dropdown-width: 220px !default;

$left-sidebar-level-bg: darken($light-color, 3%) !default;
$left-sidebar-bg: #f5f5f5 !default;
$left-sidebar-color: lighten($body-color, 16%) !default;
$left-sidebar-hover-color: $left-sidebar-color !default;
$left-sidebar-width: 230px !default;
$left-sidebar-logo-bg: darken($dark-color, 1.5%) !default;
$left-sidebar-icon-size: 19px !default;
$left-sidebar-main-level-font-size: 1.077rem !default;
$left-sidebar-main-level-padding: 20px !default;
$left-sidebar-main-level-height: 38px !default;
$left-sidebar-sub-level-color: $left-sidebar-color !default;
$left-sidebar-sub-level-bg: darken($left-sidebar-bg, 2.8%) !default;
$left-sidebar-sub-level-font-size: 13px !default;
$left-sidebar-sub-level-padding:	8px 15px 8px 49px !default;
$left-sidebar-separators: false !default;

/* HTML DOM and other main styles */
html
{
   height:100%;
   overflow-x: hidden;
   font-size: small;
   // 13px (most sites compute a font size of 13px including those of Google, YouTube, StackOverflow and many others).
}

body
{
   padding: 0;
   background-color: $body-background;
   height: 100%;
   min-height:100%;
   line-height: 1.42857143;

   .be-alt-bg
   {
      background-color: #e9e9e9;
   }
   
   @if $disable-body-scrollbar != false
   {
      &.open-left-sidebar
      {
         overflow: hidden;
      }
   }
}

a
{
   &:hover,
   &:focus
   {
      text-decoration: none;
      outline: 0;
   }	
}

/* Button styles */
$btn-padding-vertical: 0;
$btn-padding-horizontal: 10px;
$btn-font-size-base: 1rem;
$btn-line-height-base: 28px;
$btn-border-radius-base: 2px;
$btn-box-shadow-base: 0 1px 0 rgba(0, 0, 0, 0.05);

$btn-default-color: $text-color;
$btn-default-bg: #fff;
$btn-default-border: #dbdbdb;

.btn {
   -webkit-box-shadow: $btn-box-shadow-base;
   box-shadow: $btn-box-shadow-base;
   @include button-size(
      $btn-padding-vertical,
      $btn-padding-horizontal,
      $btn-font-size-base,
      $btn-line-height-base,
      $btn-border-radius-base
   );

   &:active,
   &.active {
      -webkit-box-shadow: none;
      box-shadow: none;
   }

   &:active:focus {
      outline: 0;
   }
}

.btn-light {
   color: $btn-default-color;
   background-color: $btn-default-bg;
   border-color: $btn-default-border;

   &:focus,
   &.focus {
      color: $btn-default-color;
      background-color: $btn-default-bg;
      border-color: $btn-default-border;
   }

   &:hover,
   &.hover {
      color: $btn-default-color;
      -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
      background-color: $btn-default-bg;
      border-color: darken($btn-default-border, 13%);
   }

   &.active,
   &:active,
   &:not([disabled]):not(.disabled).active,
   &:not([disabled]):not(.disabled):active,
   .show > &.dropdown-toggle {
      -webkit-box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.06);
      box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.06);
      color: darken($btn-default-color, 10%);
      background-color: darken($btn-default-bg, 11%);
      border-color: darken($btn-default-border, 13%);

      &.focus,
      &:focus,
      &:hover {
         color: darken($btn-default-color, 10%);
         background-color: darken($btn-default-bg, 11%);
         border-color: darken($btn-default-border, 13%);
         -webkit-box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.06);
         box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.06);
      }
   }

   &.active,
   &:active,
   .show > &.dropdown-toggle {
      background-image: none;
   }

   &.disabled,
   &[disabled],
   fieldset[disabled] & {
      color: #404040;

      &,
      &.active,
      &.focus,
      &:active,
      &:focus,
      &:hover {
         color: #404040;
         background-color: $btn-default-bg;
         border-color: $btn-default-border;
         -webkit-box-shadow: none;
         box-shadow: none;

         .icon {
            color: #404040;
         }
      }
   }

   .icon {
      color: lighten($btn-default-color, 14%);
   }

   &:active {
      .icon {
         color: lighten($btn-default-color, 4%);
      }
   }
}



/* Main Wrapper*/
.be-wrapper
{
   min-height: 100%;
   padding-top: $top-header-height + 1px;

   @include media_size("small-phone")
   {
      overflow-x: hidden;
   }
}

@media print
{
   .be-wrapper
   {
      padding-top: 0;
   }
}

/* Navbar Begins*/
.be-top-header
{
   background-color: $top-header-bg;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
   border:	0;
   margin-bottom: 0;
   border-bottom: 1px solid darken($light-color, 10%);
   padding: 0;

   @include media_size("phone")
   {
      border-bottom-width: 0;
      position: relative;
      min-height: 0;
   }

   .container-fluid
   {
      padding: 0;

      @include media_size("phone")
      {
         .be-nosidebar-left &
         {
            display: block;

            .navbar-collapse
            {
               -webkit-box-align: baseline;
               -ms-flex-align: baseline;
               align-items: baseline;

               &.collapse
               {
                  display: none !important;

                  &.show
                  {
                     display: block !important;
                  }
               }
            }
         }
      }
   }


   /*logo and toggle button*/
   .be-navbar-header
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: $left-sidebar-width;

      .be-collapsible-sidebar &
      {
         -webkit-box-pack: justify;
         -ms-flex-pack: justify;
         justify-content: space-between;
      }

      .be-collapsible-sidebar-hide-logo.be-collapsible-sidebar-collapsed &
      {
         width: 60px;
      }

      @include media_size("tablet")
      {
         .be-nosidebar-left &
         {
            width: auto;
         }
      }



      //logo
      .navbar-brand
      {
         line-height: $top-header-height;
         height: $top-header-height;
         width: 100%;
         min-width: 142px;
         background-image: url("#{$img-path-logo}");
         background-repeat: no-repeat;
         background-position: $logo-position;
         background-size: $logo-size;
         padding: 0 $logo-padding;
         margin: 0;
         display: block;

         //Retina logo
         @include media_size("retina")
         {
            background-image: url("#{$img-path-logo-white}");
            background-size: $logo-width $logo-height;
         }

         //Phone style
         @include media_size("phone")
         {
            display: none;
         }


         //Reduce content spacing on tablet res.
         @include media_size("tablet")
         {
            margin-right: 10px;
         }

         //Whitout left sidebar style
         .be-nosidebar-left &
         {
            width: $logo-width + ($logo-padding * 2);
         }

         .be-collapsible-sidebar-hide-logo.be-collapsible-sidebar-collapsed &
         {
            display: none;
         }
      }

      .be-toggle-left-sidebar
      {
         display: inline-block;
         text-align: center;
         line-height: 60px;
         float: right;
         padding: 0 15px;

         .icon
         {
            font-size: 1.615rem;
            color: #5a5a5a;
            line-height: 25px;
            vertical-align: middle;
         }
      }

      .be-collapsible-sidebar-hide-logo.be-collapsible-sidebar-collapsed & .be-toggle-left-sidebar
      {
         padding: 0 21px;
      }

      @include media_size("phone")
      {
         display: none;
      }

      @media print
      {
         &
         {
            display: none;
         }
      }
   }

   //Page title
   .page-title
   {
      font-size: 1.462rem;
      line-height: $top-header-height;
      float: left;
      -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      padding: 0 20px;
      color: #404040;

      .be-nosidebar-left &
      {
         padding-left: 10px;
      }

      @include media_size("phone")
      {
         display: none;
      }
   }

   //Top general navigation
   .navbar-nav
   {
      > li
      {
         > a.nav-link
         {
            line-height: $top-header-height;
            color: $top-header-navbar-color;
            font-size: 14px;
            padding: 0 $top-header-navbar-padding;
            outline: 0;

            &:hover,
            &:focus
            {
               color: $top-header-navbar-color;
            }

            @include media_size("tablet")
            {
               padding: 0 $top-header-navbar-padding + 6px;
            }
         }

         &.show
         {

            > a
            {
               color: $primary-color;

               &:focus,
               &:active,
               &:hover
               {
                  color: $primary-color;
               }
            }
         }

         &.dropdown
         {

            > a
            {

               .mdi-caret-down
               {
                  font-size: 1.769rem;
                  vertical-align: middle;
                  margin-left: 3px;
               }
            }

            .dropdown-menu
            {
               border-radius: 3px;
               margin-top: 12px;
               line-height: 20px;

               > a
               {
                  color: $dropdown-text-color;
                  padding: 10px 20px;
                  min-width: 175px;
                  line-height: 18px;

                  &:hover
                  {
                     background-color: $primary-color;
                     color: $light-color;
                  }

                  &:focus,
                  &:active
                  {
                     background-color: transparent;
                     color: $dropdown-text-color;
                  }
               }

               &:after,
               &:before
               {
                  border-bottom: 8px solid #fff;
                  border-left: 8px solid transparent;
                  border-right: 8px solid transparent;
                  top: -8px;
                  content: "";
                  display: inline-block;
                  left: 42px;
                  margin-left: -6px;
                  position: absolute;
               }

               &:before
               {
                  border-bottom-width: 9px;
                  border-left-width: 9px;
                  border-right-width: 9px;
                  border-bottom-color: $dropdown-border;
                  margin-left: -7px;
                  top: -9px;
               }
            }
         }
      }
   }

   //Default navbar collapse
   .navbar-collapse
   {
      border-width: 0;

      @include media_size("phone")
      {
         border-top: 1px solid $left-sidebar-bg;
         max-height: none;
      }

      .navbar-nav
      {

         @include media_size("phone")
         {
            background-color: lighten($left-sidebar-bg, 2%);
            margin: 0;
            padding: 15px 0;

            .be-nosidebar-left &
            {
               width: 100%;
               -webkit-box-orient: vertical;
               -webkit-box-direction: normal;
               -ms-flex-direction: column;
               flex-direction: column;
            }

            > li
            {
               > a
               {
                  display: block;
                  padding: 0 $left-sidebar-main-level-padding;
                  color: force-hex($left-sidebar-color);
                  font-size: $left-sidebar-main-level-font-size;
                  line-height: $left-sidebar-main-level-height;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;

                  .icon
                  {
                     line-height: $left-sidebar-icon-size - 1px;
                     font-size: $left-sidebar-icon-size;
                     min-width: $left-sidebar-icon-size;
                     margin-right: 9px;
                     text-align: center;
                     vertical-align: middle;
                  }
               }

               &.dropdown
               {

                  .mdi-caret-down
                  {
                     float: right;
                     line-height: $left-sidebar-main-level-height;
                     color: darken($left-sidebar-bg, 19%);
                  }

                  .dropdown-menu
                  {
                     background-color: $left-sidebar-sub-level-bg;
                     padding: 10px 0;
                     border-top: 1px solid darken($left-sidebar-bg, 6%);
                     border-right:0;
                     border-bottom: 1px solid darken($left-sidebar-bg, 6%);
                     border-left: 0;
                     border-radius: 0;

                     .be-nosidebar-left &
                     {
                        position: static;
                        float: none;
                        width: auto;
                        -webkit-box-shadow: none;
                        box-shadow: none;
                     }

                     &:before,
                     &:after
                     {
                        display: none;
                     }

                     > a
                     {
                        color: force-hex($left-sidebar-sub-level-color);
                        padding: $left-sidebar-sub-level-padding;
                        padding-left: 23px;
                     }
                  }
               }
            }
         }
      }
   }

   .search-container
   {
      position: relative;
      -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      display: inline-block;
      height: 60px;
      padding: 12px 20px;

      .input-group
      {
         max-width: 500px;
      }

      @include media_size("phone")
      {
         display: none;
      }

      .btn
      {
         height: 37px;
         font-size: 1.423rem;
         padding: 4px 24px;
         border-radius: 0;
      }
   }

   .search-input
   {
      border-width: 1px;
      border-right: 0;
      color: #404040;

      @include media_size("phone")
      {
         background-color: #fff;
         color: #404040;
      }

      &:focus
      {
         background-color: #fff;
         color: gray;

         &::-webkit-input-placeholder,
         &:-ms-input-placeholder,
         &::-ms-input-placeholder,
         &::placeholder
         {
            color: #737373;
         }
      }
   }

   //Right navbar
   .be-right-navbar
   {
      padding-right: 20px;
      width: calc(100% - 230px);

      &-flex
      {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
      }

      .be-wrapper.be-nosidebar-left &-flex
      {
         width:calc(100% - 230px);
      }

      .navbar-nav
      {
         background-color: transparent;

         @include media_size("phone")
         {
            > li
            {

               > a.nav-link
               {

                  color: $light-color;

                  &:focus,
                  &:active
                  {
                     color: $light-color;
                  }
               }

               &.show
               {

                  > a.nav-link
                  {
                     color: $light-color;

                     &:focus,
                     &:active,
                     &:hover
                     {
                        color: $light-color;
                     }
                  }
               }
            }
         }
      }		

      @include media_size("phone")
      {
         padding-right: 0;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: justify;
         -ms-flex-pack: justify;
         justify-content: space-between;
         border-bottom: 1px solid $top-header-phone-bg;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         background-color: $top-header-phone-bg;
         z-index: $zindex-fixed;
      }

      .be-collapsible-sidebar-hide-logo.be-collapsible-sidebar-collapsed &
      {
         width: calc(100% - 60px);

         @include media_size("phone")
         {
            width: 100%;
         }
      }

      @include media_size("phone")
      {
         .be-offcanvas-menu  &
         {
            padding-right: 5px;
            position: relative;
         }
      }

      .be-nosidebar-left &
      {
         width: auto;
         -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
         order: 2;

         @include media_size("phone")
         {
            width: 100%;
         }
      }
   }

   .be-toggle-top-header-menu
   {	
      display: none;
      background-color: $light-color;
      padding: 16px 10px;
      color: $text-color;
      font-weight: $font-weight-light;
      font-size: 1.077rem;
      border-bottom: 1px solid $left-sidebar-bg;

      &:before
      {
         content: '\f2f8';
         float: right;
         font-family: $icons-font;
         font-size: 2.077rem;
         line-height: 22px;
         color: darken($left-sidebar-bg, 19%);
      }

      &.collapsed
      {
         border-bottom: 1px solid darken($left-sidebar-bg, 7%);
         -webkit-transition: border-bottom-color 0.4s ease;
         transition: border-bottom-color 0.4s ease;

         &:before
         {
            content: '\f2f2';
         }
      }

      @include media_size("phone")
      {
         display: block;
      }
   }

   .be-offcanvas-menu &
   {
      @include media_size("phone")
      {
         position: fixed;

         .container-fluid
         {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
         }
      }

      .be-navbar-header
      {
         width: $left-sidebar-width;

         @include media_size("phone")
         {
            display: block;
            width: auto;
            background-color: $primary-color;
         }

         .be-toggle-left-sidebar
         {
            padding-left: 25px;

            @include media_size("phone")
            {
               padding-left: 15px;
               padding-right: 13px;
            }

            .icon
            {
               color: #737373;
               font-size: 1.846rem;

               @include media_size("phone")
               {
                  color: #fff;
                  overflow: hidden;
               }
            }
         }
      }

      .navbar-brand
      {
         width: 142px;
      }

      .be-toggle-left-sidebar
      {
         display: inline-block;
         text-align: center;
         line-height: 60px;
         float: left;

         @include media_size("phone")
         {
            line-height: 62px;
            margin-top: -1px;
         }

         .icon
         {
            font-size: 1.615rem;
            color: #5a5a5a;
            line-height: 25px;
            vertical-align: middle;
         }
      }
   }

   @media print
   {
      position: absolute;
   }
}

/* Navbar Icons */
.be-icons-nav
{
   .be-top-header &
   {
      margin-right: 20px;
   }

   @include media_size("non-responsive")
   {
      .be-right-navbar-flex &
      {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 auto;
         flex: 0 0 auto
      }
   }

   @include media_size("tablet")
   {
      .be-top-header &
      {
         margin-right: 10px;
      }
   }

   > li.dropdown
   {
      position: static;

      > a
      {
         position: relative;

         .navbar-expand &
         {
            padding: 0 10px;
         }

         .icon
         {
            font-size:  1.846rem; //24px
            vertical-align: middle;
            color: $icon-default-color;

            &.mdi-comment-more
            {
               font-size: 1.538rem; //20px
               position: relative;
               top: 1px;
            }
         }

         .indicator
         {
            background-color: $primary-color;
            border-radius: 50%;
            display: block;
            height: 6px;
            width: 6px;
            position: absolute;
            top: 18px;
            right: 6px;
         }

         &:after
         {
            display: none;
            font-size: 1.231rem;
            margin-left: 6px;
         }

         @include media_size("phone")
         {
            &:after
            {
               display: inline-block;
            }
         }
      }

      .dropdown-toggle:after
      {
         content: '';
         margin: 0;
         border: 0;
      }

      &.show
      {

         > a:after,
         > a:before
         {
            border-bottom: 8px solid $light-color;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            bottom: -13px;
            content: "";
            display: inline-block;
            left: 50%;
            margin-left: -8px;
            position: absolute;
            z-index: $zindex-dropdown + 1;
         }

         > a:before
         {
            border-bottom-width: 9px;
            border-left-width: 9px;
            border-right-width: 9px;
            border-bottom-color: $dropdown-border;
            margin-left: -9px;
            bottom: -12px;
         }
      }

      .dropdown-menu
      {
         position: absolute;
         left: auto;
         right: 10px;
         width: $icons-nav-dropdown-width;
         border-radius: 3px;
         padding: 0;
         -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.08);
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
         border: 1px solid hsl(0, 0%, 88%);
         -webkit-box-sizing: content-box;
         box-sizing: content-box;

         .be-top-header &
         {
            &:after,
            &:before
            {
               display: none;
            }
         }
      }

      &.show
      {
         > a
         {
            background-color: transparent;

            .icon
            {
               color: $primary-color;

               @include media_size("phone")
               {
                  color: $light-color;
               }
            }
         }
      }

      @include media_size("desktop-min")
      {
         .be-mega-menu &
         {
            position: relative;
         }
      }
   }

   @include media_size("phone")
   {
      float: right;
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;

      .be-top-header &
      {
         margin: 0 5px 0 0;
      }

      > li.dropdown
      {
         display: inline-block;
         margin-left: 3px;

         > a
         {

            .navbar-expand &
            {
               padding: 0 7px;
            }

            .icon
            {
               color: $light-color;
            }

            .indicator
            {
               right: 2px;
               background-color: $light-color;
            }
         }
      }
   }

   @include media_size("small-phone")
   {

      > li.dropdown
      {

         .dropdown-menu
         {
            left: 0;
            right: 0;
            top: $top-header-height;
            width: 100%;
            -webkit-box-shadow: none;
            box-shadow: none;
            border-width: 0;
            border-bottom-width: 1px;

            .be-top-header &
            {
               border-radius: 0;
               margin-top: 1px;
            }
         }

         &.show
         {
            > a
            {

               &:before
               {
                  display: none;
               }

               &:after
               {
                  bottom: -1px;
               }
            }
         }
      }
   }

   @media print
   {
      display: none;
   }
}


/* User Icon */
.be-user-nav
{
   margin-right: 0;

   @include media_size("non-responsive")
   {
      .be-right-navbar-flex &
      {
         -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
         order: 1;
      }
   }

   > li.dropdown
   {
      > a
      {
         font-size: 0;

         .navbar-expand &
         {
            padding-left: 5px;
            padding-right: 5px;

            @include media_size("tablet")
            {
               padding-left: 10px;
            }
         }

         img
         {
            max-width: 32px;
            max-height: 32px;
            border-radius: 50%;
         }

         .user-name
         {
            margin-left: 8px;
            display: none;
            font-size: 1.077rem; //14px
            line-height: 20px;
            vertical-align: middle;
         }

         &:after
         {
            display: none;
            font-size: 1.231rem; //21px
            margin-left: 6px;

            @include media_size("phone")
            {
               display: inline-block;
            }
         }
      }

      .dropdown-menu
      {
         width: $user-dropdown-width;
         padding: 0 0 7px;
         left: -178px;

         @include media_size("tablet")
         {
            left: -173px;
         }

         a
         {
            .be-top-header &
            {

               &:focus,
               &:active
               {
                  background-color: transparent; 
                  color: $dropdown-text-color;
               }

               &:hover
               {
                  background-color: force-hex(darken($light-color, 4%));
                  color: $dropdown-text-color;
               }
            }

            .icon
            {
               vertical-align: middle;
               margin-right: 10px;
            }
         }

         .user-info
         {
            background-color: $primary-color;
            color: $light-color;
            overflow: hidden;
            padding: 20px 15px 14px;
            border-radius: 2px 2px 0 0;
            margin-bottom: 7px;

            .user-name
            {
               display: block;
               font-size: 1.462rem;
               line-height: 22px;
               text-overflow: ellipsis;
               white-space: nowrap;
               overflow: hidden;
            }

            .user-position
            {
               display: block;
               text-overflow: ellipsis;
               white-space: nowrap;
               overflow: hidden;
               padding-left: 13px;
               position: relative;

               &:after
               {
                  content: "";
                  position: absolute;
                  height: 7px;
                  width: 7px;
                  left: 0;
                  top: 5px;
                  border: 1px solid hsl(0, 0%, 94%);
                  border-radius: 50%;
                  background-color: transparent;
                  display: block;
               }

               &.online
               {
                  &:after
                  {
                     background-color: lighten($success-color, 19%);
                     border-color: lighten($success-color, 19%);
                  }
               }

               &.away
               {
                  &:after
                  {
                     background-color: lighten($warning-color, 15%);
                     border-color: lighten($warning-color, 15%);
                  }
               }

               &.busy
               {
                  &:after
                  {
                     background-color: lighten($danger-color, 18%);
                     border-color: lighten($danger-color, 18%);
                  }
               }
            }

            .switch-status
            {
               float: right;
               margin-top: 5px;
            }
         }

         .be-top-header &
         {
            &:after
            {
               left: auto;
               right: 13px;
               border-bottom-color: $primary-color;
            }

            &:before
            {
               display: none;
            }
         }
      }
   }

   @include media_size("phone")
   {
      margin: 0;
      display: inline-block;
      -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      overflow: hidden;

      > li.dropdown
      {
         > a
         {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            height: $top-header-height;
            white-space: nowrap;

            &:after
            {
               color: $light-color;
            }

            img
            {
               -webkit-box-flex: 0;
               -ms-flex: 0 0 auto;
               flex:0 0 auto;
            }

            .user-name
            {
               display: block;
               -webkit-box-flex: 1;
               -ms-flex: 1 1 100%;
               flex: 1 1 100%;
               overflow: hidden;
               text-overflow: ellipsis;
            }
         }

         .dropdown-menu
         {
            -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.08);
            box-shadow: 0 2px 4px rgba(0,0,0,.08);
            background-color: $light-color;
            position: fixed;
            top: $top-header-height;
            left: 0;
            margin-left: 10px;
            margin-right: 10px;
            max-width: $user-dropdown-width;

            .be-top-header &
            {
               &:after
               {
                  right: auto;
                  left: 20px;
               }
            }
         }
      }
   }

   @include media_size("phone")
   {
      .be-offcanvas-menu &
      {
         > li.dropdown
         {
            > a
            {
               padding-left: 0;

               img
               {
                  display: none;
               }

               .user-name
               {
                  margin-left: 0;
               }
            }
         }
      }
   }

   @media print
   {
      display: none;
   }
}

/* Left Sidebar */
.be-left-sidebar
{
   background-color: $left-sidebar-bg;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
   width: $left-sidebar-width;
   left: 0;
   position: absolute;
   border-right: 1px solid darken($left-sidebar-bg, 7%);

   @media print
   {
      display: none;
   }

   @include media_size("phone")
   {
      .be-left-sidebar-disabled &
      {
         display: none;
      }
   }

   .be-collapsible-sidebar-collapsed &
   {
      width: 60px;

      @include media_size("phone")
      {
         width: 100%;
      }


   }

   .left-sidebar-wrapper
   {
      display: table;
      table-layout: fixed;
      width: 100%;
      height: 100%;
   }

   .left-sidebar-spacer
   {
      height: 100%;
      display: table-row;

      @include media_size("non-responsive")
      {
         display: table-row;
      }
   }

   .left-sidebar-scroll
   {
      position: relative;
      height: 100%;
      width: 100%;
      overflow: hidden;
   }

   .left-sidebar-content
   {
      position: relative;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      padding-top: 8px;

      .be-collapsible-sidebar-collapsed &
      {
         padding-top: 20px;
      }
   }

   .left-sidebar-toggle
   {
      display: none;
      background-color: $light-color;
      padding: 16px 10px;
      color: $text-color;
      font-weight: $font-weight-light;
      font-size: 1.077rem;

      &:before
      {
         content: '\f2f2';
         float: right;
         font-family: $icons-font;
         font-size: 2.077rem;
         line-height: 22px;
         color: darken($left-sidebar-bg, 19%);
      }

      &.open
      {
         &:before
         {
            content: '\f2f8';
         }
      }

      @include media_size("phone")
      {
         display: block;
      }
   }

   .sidebar-elements
   {
      margin: 0;
      padding: 0;

      .divider
      {
         @if($left-sidebar-separators)
         {
            font-size: 0;
            padding: 0;
            margin: 0;
            border: 0;
            
            &:before
            {
               content: "";
               display: block;
               padding: 0;
               margin: 8px auto;
               border-bottom: 1px solid #e2e2e2;
               width: $left-sidebar-width - ($left-sidebar-main-level-padding * 2);
               height: auto;
            }
         }
         @else
         {
            padding: 20px $left-sidebar-main-level-padding 0;
            color: force-hex(lighten($left-sidebar-color, 7%));
            line-height: 30px;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.8462rem;

            @include media_size("non-responsive")
            {
               .be-collapsible-sidebar-collapsed &
               {
                  padding: 40px 0 0;
                  height: 0;
                  overflow: hidden;
                  text-indent: -9999px;

                  &:first-child
                  {
                     display: none;
                  }
               }
            }
         }
      }

      > li
      {
         list-style: none;

         > a
         {
            display: block;
            padding: 0 $left-sidebar-main-level-padding;
            color: $left-sidebar-color;
            font-size: $left-sidebar-main-level-font-size;
            line-height: $left-sidebar-main-level-height;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

            .be-collapsible-sidebar-collapsed &
            {
               text-overflow: clip;
            }

            .icon
            {
               line-height: $left-sidebar-icon-size - 1px;
               font-size: $left-sidebar-icon-size;
               min-width: $left-sidebar-icon-size;
               margin-right: 9px;
               text-align: center;
               vertical-align: middle;
            }
            
            > span
            {
               vertical-align: middle;
            }

            @include media_size("non-responsive")
            {
               .be-collapsible-sidebar-collapsed & span
               {
                  display: none;
               }
            }

            &:hover
            {
              background-color: darken($left-sidebar-bg, 2%);
               
               > .icon,
               > span
               {
                  color: darken($left-sidebar-hover-color, 15%);
               }
            }
         }

         > ul
         {
            border-top: 1px solid $left-sidebar-border-color;
            border-bottom: 1px solid $left-sidebar-border-color;
         }

         .be-collapsible-sidebar & > ul
         {
            .nav-items .content > ul
            {
               display: block;
            }
         }

         .be-collapsible-sidebar-collapsed & > ul
         {
            @include media_size("non-responsive")
            {
               border-top-width: 0;
               border-bottom-width: 0;
            }
         }


         ul
         {
            display: none;
            background-color: #eee;
            padding: 10px 0;
            list-style: none;
            line-height: 20px;

            .title
            {
               display: none;
            }

            .be-collapsible-sidebar &
            {
               .content > ul
               {
                  padding-left: 0;
               }
            }

            .be-collapsible-sidebar-collapsed &
            {
               @include media_size("non-responsive")
               {
                  &.visible
                  {
                     display: table;
                     table-layout:fixed;
                     position: fixed;
                     left: 60px;
                     top: 61px;
                     height: 100%;
                     z-index: 1031;
                     padding: 0 0 61px;
                     list-style: none;
                     width: 232px;
                     border-right: 1px solid #e6e6e6;

                     .title
                     {
                        display: block;
                        padding: 30px 25px;
                        font-size: 1.385rem;
                        color: #7b7b7b;
                     }

                     .nav-items
                     {
                        display: table-row;
                        height: 100%;

                        .be-scroller
                        {
                           position: relative;
                           height: 100%;

                           > .content
                           {
                              position: absolute;
                              top: 0;
                              bottom: 0;
                              width: 100%;
                              height: 100%;
                           }
                        }

                        .content
                        {
                           > ul
                           {
                              border-color: transparent;
                              padding: 0;
                           }

                           $BCSC5_la: "";
                           $BCSC5_lp: 15px;

                           @for $i from 0 to 5
                           {
                              $BCSC5_la: " > ul > li" + $BCSC5_la;
                              $BCSC5_lp: $BCSC5_lp + 10;

                              & #{$BCSC5_la} > a
                              {
                                 padding-left: $BCSC5_lp;
                              }
                           }
                        }
                     }
                  }
               }
            }

            li
            {
               > a
               {
                  padding: 8px 15px 8px 49px;
                  color: $left-sidebar-level-color;
                  font-size: 13px;
                  display: block;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;

                  .badge
                  {
                     border-radius: 2px;
                     font-weight: 500;
                     line-height: 9px;
                     font-size: 0.85rem;
                     padding: 4px 7px;
                     margin-left: 4px;
                     margin-top: 1px;
                  }

                  &:hover
                  {
                     background-color: $left-sidebar-level-hover;
                  }
               }

               &.active > a
               {
                  color: $primary-color;
               }

               ul
               {
                  padding-top: 0;
                  padding-bottom: 0;
                  padding-left: 0;
               }

               > ul
               {
                  padding: 5px 0;

                  > li ul
                  {
                     padding: 5px 0;
                  }
               }


               $BCSC5_la: "";
               $BCSC5_lp: 49px;

               @for $i from 0 to 4
               {
                  $BCSC5_la: " > ul > li" + $BCSC5_la;
                  $BCSC5_lp: $BCSC5_lp + 10;

                  & #{$BCSC5_la} > a
                  {
                     padding-left: $BCSC5_lp;
                  }
               }
            }
         }

         //First level active
         &.active
         {
            > a
            {
               padding-left: $left-sidebar-main-level-padding;
               font-weight: 500;
               color: $primary-color;

               > span
               {
                  color: $primary-color;
               }
            }
         }

         &.open,
         &.open > ul .nav-items .content
         {

            > ul
            {
               display: block;
            }
         }

         @include media_size("non-responsive")
         {
            .be-collapsible-sidebar-collapsed &
            {
               &.open
               {
                  > ul
                  {
                     display: none;

                     &.visible
                     {
                        display: table;
                     }
                  }
               }
            }
         }
      }

      li
      {
         &.parent
         {
            > a
            {
               &:before
               {
                  content: '\f2f2';
                  float: right;
                  padding-top: 4px;
                  font-family: $icons-font;
                  font-size: 1.615rem;
               }
               
               &:hover:before
               {
                  color: darken($left-sidebar-bg, 27%);
               }
            }

            @include media_size("non-responsive")
            {
               .be-collapsible-sidebar-collapsed & > a:before
               {
                  display: none;
               }
            }
         }

         &.parent
         {
            &.open
            {
               > a:before
               {
                  content: '\f2f8';
                  color: darken($left-sidebar-bg, 27%);
               }
            }
         }

         &.open
         {
            > ul
            {
               display: block;
            }
         }
      }


      @include media_size("non-responsive")
      {
         .be-collapsible-sidebar-collapsed &
         {
            .sub-menu.visible li.parent > a:before
            {
               display: block;
            }
         }
      }
   }

   &:before
   {
      content: "";
      position: fixed;
      z-index: -1;
      width: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      background-color: inherit;
      border-right: 1px solid darken($left-sidebar-bg, 7%);

      @include media_size("phone")
      {
         display: none;
      }
   }

   @include media_size("phone")
   {
      width: 100%;
      background-color: lighten($left-sidebar-bg, 2%);
      border-bottom: 1px solid darken($left-sidebar-bg, 7%);
      border-right-width: 0;
      position: relative;

      .left-sidebar-wrapper, 
      .left-sidebar-spacer, 
      .left-sidebar-scroll,
      .left-sidebar-content
      {
         display: block;
         position: relative;
         overflow: visible;
      }

      .left-sidebar-spacer
      {
         display: none;
         border-top: 2px solid $left-sidebar-bg;

         &.open
         {
            display: block;
         }
      }

      .left-sidebar-content
      {
         padding-bottom: 20px;
      }

      .sidebar-elements
      {
         > li
         {
            > a
            {
               text-align: left;
               position: relative;
            }

            //Second level style
            > ul
            {
               position: relative;
               height: auto;
               width: 100%;
               left: 0;

               li
               {
                  > a
                  {
                     &:hover
                     {
                        background-color: transparent;
                     }

                     &:active
                     {
                        background-color: darken($left-sidebar-sub-level-bg, 2.5%);
                     }
                  }
               }

               > li.title
               {
                  display: none;
               }

               > li.nav-items
               {
                  display: block;
                  height: auto;

                  > .be-scroller
                  {
                     height: auto;
                     overflow: visible;

                     > .content
                     {
                        padding-top: 0;
                        overflow: visible;
                        position: relative;
                     }
                  }
               }
            }

            &:hover
            {
               background-color: inherit;

               > ul
               {
                  display: none;
               }
            }
         }

         li.open
         {

            > ul
            {
               display: block;
            }
         }
      }
   }

   .be-fixed-sidebar &
   {
      height: 100%;
      margin-top: $top-header-height + 1px;
      padding-bottom: $top-header-height + 1px;
      position: fixed;
      top: 0;
      bottom: 0;
      z-index: $zindex-fixed - 1;

      .left-sidebar-content
      {
         position: absolute;

         @include media_size("phone")
         {
            position: relative;
         }
      }

      @include media_size("phone")
      {
         margin-top: 0;
         position: static;
         height: auto;
         margin-top: 0;
         padding-bottom: 0;
      }

      &:before
      {
         top: $top-header-height;
      }
   }

   .be-offcanvas-menu &
   {
      position: fixed;
      height: 100%;
      top: 0;
      left: -($left-sidebar-width + 10);
      z-index: $zindex-fixed + 1;
      background-color: $light-color;
      -webkit-box-shadow: 0 6px 18px 0 rgba(0,0,0,.18);
      box-shadow: 0 6px 18px 0 rgba(0,0,0,.18);
      border-right-width: 0;

      @include media_size("phone")
      {
         width: 230px;
         left :0;
         -webkit-transform: translate3d(-105%,0,0);
         transform: translate3d(-105%,0,0);
      }

      &:before
      {
         left: -($left-sidebar-width);
         border-right-width: 0;
      }

      @include media_size("phone")
      {
         .left-sidebar-toggle
         {
            display: none;
         }
      }

      .be-toggle-left-sidebar
      {
         display: inline-block;
         text-align: center;
         line-height: 60px;
         float: left;

         .icon
         {
            padding-left: 25px;
            font-size: 1.846rem;
            color: #737373;
            line-height: 25px;
            vertical-align: middle;
         }
      }

      .menu-logo
      {
         height: 60px;
         width: 150px;
         background-image: url("#{$img-path-logo}");
         background-repeat: no-repeat;
         background-position: 20px center;
         display: block;
         float: left;
      }

      .sidebar-elements
      {
         >li ul
         {
            background-color: $left-sidebar-level-bg;
         }
      }
   }

   .be-fixed-sidebar.be-offcanvas-menu &
   {
      margin-top: 61px;
      padding-bottom: 61px;
   }

   .be-animate &
   {
      -webkit-transition: all .35s ease;
      transition: all .35s ease;
   }

   @include media_size("phone")
   {
      .be-offcanvas-menu &
      {
         .left-sidebar-wrapper
         {
            display: table;
         }

         .left-sidebar-spacer
         {
            display: table-row;
            border-top-width: 0;
         }
      }

      .be-fixed-sidebar.be-offcanvas-menu &
      {
         .left-sidebar-content
         {
            position: absolute;
         }
      }
   }

   @include media_size("phone")
   {
      .be-offcanvas-menu &
      {
         .progress-widget
         {
            display: block;
         }

         .be-navbar-header
         {
            display: block;
         }
      }
   }

   .be-offcanvas-menu &
   {
      .be-navbar-header .navbar-brand
      {
         padding-left: 0;
         background-position: 0 center;
      }
   }

   .left-sidebar-top
   {
      border-bottom: 1px solid #ededed;

      &::after
      {
         display: block;
         clear: both;
         content: "";
      }
   }

   @include media_size("non-responsive")
   {
      body.open-left-sidebar &
      {
         left: 0;
      }
   }
}


@include media_size("phone")
{
   body.open-left-sidebar
   {
      .be-wrapper
      {
         overflow: hidden;
      }

      .be-left-sidebar
      {
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
      }
   }
}

.input-search
{
	input
	{
		border: 1px solid #d5d8de;
		border-radius: 0;
		display: block;
		font-size: 1rem;

		&:focus
		{
			background-color: transparent;
		}
	}
   
	.input-group-btn
	{
		position: absolute;
		right: 0;
		display: block;
		width: auto;
		top: 1px;
		right: 1px;
		z-index: 3;
      
      button
		{
			-webkit-box-shadow: none;
			box-shadow: none;
			border: none;
			height: 3.5382rem;
      }
   }
   
   &.input-group-sm
	{
		.input-group-btn
		{
			button
			{
				height: .6205rem;
			}
		}
	}
}

.input-group-sm
{
	> .form-control
	{
		height: 37px;
		font-size: 1rem;
		padding: 4px 12px;
	}
}

/* Overlay Scrollbars */
.os-scrollbar
{
   .os-theme-dark & > .os-scrollbar-track
   {
      > .os-scrollbar-handle
      {
         background-color: rgba(0, 0, 0, .25);
      }
      
      &:hover
      {
         > .os-scrollbar-handle
         {
				background-color: rgba(0, 0, 0, .4);
         }
      }
   }
}
!

JS 

              
                console.clear(); // Clear all CodePen's errors and warnings
/*

Requires:

• jQuery 3.5.1
• Bootstrap v4.1+

Overlay Scrollbars:
https://kingsora.github.io/OverlayScrollbars/#!overview


TODO:

• fix left-sidebar srolling when overflowing. Avoid default scrollbar style.
• Dim screen when opening sidebar?
• Add extra brand logo and menu icon on open?
• Add footer to left sidebar.
• Support a right sidebar?
• Sidebar animation, history/navigation fix.
• Use hardware acceleration for animated sidebar?
• Partial icon view for sidebar collapse?

*/

var body = $(document.body),
    open_left_sidebar = "open-left-sidebar",
    sidebar_btn = $("#sidebar_btn"),
    left_sidebar = $("#left_sidebar"),
    anchors = $(".sidebar-elements li a", left_sidebar),
    wrapper = $(".be-wrapper"),
    menu_speed = 200;

// Only for debugging (stop page navigating away)
$(
   ".be-wrapper > .navbar a, \
   .be-wrapper > .be-left-sidebar a"
).attr("href", "#"+Math.random());

// Updated: 2018.12
// By default both '.be-animate' and '.be-offcanvas-menu'
// should be placed in the body tag.
// Using '.open-left-sidebar' to open the sidebar.
$(document.body)
   .addClass("be-animate be-offcanvas-menu open-left-sidebar");

// Updated: 2019.03.11 @ 17:49:23
// Only for debugging (extending menus and testing scrollbar)
$("#debug_only_menuopen")
   .addClass("open")
   .find(".sub-menu > .parent")
      .addClass("open");



// Updated: 2019.14.03 @ 18:09:27
/** Scrollbar Support (Change with what ever scollbar plugin you need) **/
var scrollbar = OverlayScrollbars(
   $(".left-sidebar-scroll")[0],
   {
      scrollbars: {
         autoHide: "leave",
         autoHideDelay: 100
      }
   }
);

// Updated: 2019.01.12 @ 18:39:59
function toggle_sidebar() {
   body.toggleClass(open_left_sidebar);
}

sidebar_btn.on(
   "click",
   debounce(toggle_sidebar, 200, true)
);

// Updated: 2020.01.08 @ 19:42:34
/** Operate submenus **/
anchors.on("click", function(event){
   var $el = $(this),
       $li = $el.parent(),
       $subMenu = $el.next(),
       $open = $li.siblings(".open");
   
   //console.log($subMenu);
   //$el.parents().eq(1).hasClass("sidebar-elements");
   
   if($li.hasClass("open")) {
      slideUp($subMenu, event);
   } else {
      slideDown($el, event);
   }
   
   if($el.next().is("ul")) {
      event.stopPropagation();
      event.preventDefault();
   }
});

function isCollapsibleSidebarCollapsed()
{
   return wrapper.hasClass("be-collapsible-sidebar-collapsed");
}

function slideUp($subMenu, event) {
   var target = $(event.currentTarget),
       parent = $($subMenu).parent(),
       item = $("li.open", parent),
       isRoot = !target.closest(left_sidebar).length,
       speed = menu_speed,
       hasElements = target.parents()
                      .eq(1)
                      .hasClass("sidebar-elements");
   
   //console.log(event);
   
   
   if(
      !$.isSm() &&
      isCollapsibleSidebarCollapsed() &&
      (hasElements || isRoot)
   ) {
      parent.removeClass("open");
      $subMenu.removeClass("visible");
      item.removeClass("open").removeAttr("style");
   } else {
      $subMenu.slideUp({
         duration: speed,
         complete: function() {
            parent.removeClass("open");
            $(this).removeAttr("style");
            item.removeClass("open").removeAttr("style");
         }
      });
   }
}

function slideDown($this, event) {
   var $el = $($this),
       parent = $el.parent(),
       next = $($el).next(),
       speed = menu_speed,
       hasElements = $(event.currentTarget)
                      .parents()
                      .eq(1)
                      .hasClass("sidebar-elements"),
       siblingsOpen = parent.siblings(".open");
   
   //console.log("$this: ", $this);
   //console.log("slideDown: ", $(event.currentTarget));
   
   if(siblingsOpen) {
      slideUp(
         $("> ul", siblingsOpen),
         event
      );
   }
   
   if(
      !$.isSm() &&
      isCollapsibleSidebarCollapsed() &&
      hasElements
   ) {
      parent.addClass("open");
      next.addClass("visible");
   } else {
      next.slideDown({
         duration: speed,
         complete: function() {
            parent.addClass("open");
            $(this).removeAttr("style");
         }
      });
   }
}

// Updated: 2019.01.02 @ 12:00:00
/** AUTO close with user clicks or taps away from sidebar **/
$(document.body).on(
   "mousedown touchstart",
   function(event) {
      if(
         !$(event.target).closest(left_sidebar).length &&
         !$(event.target).closest(sidebar_btn).length &&
         body.hasClass(open_left_sidebar)
      ) {
         body.removeClass(open_left_sidebar);
      }
   }
);

// Updated: 2019.01.03 @ 13:03:58
/***************************/
/** Bootstrap Breakpoints **/
/***************************/
(function(e){e.isBreakpoint=function(t){var o,i,a;switch(t){case"xs":a="d-none d-sm-block";break;case"sm":a="d-none d-md-block";break;case"md":a="d-none d-lg-block";break;case"lg":a="d-none d-xl-block";break;case"xl":a="d-none"}return i=(o=e("<div/>",{class:a}).appendTo("body")).is(":hidden"),o.remove(),i},e.extend(e,{isXs:function(){return e.isBreakpoint("xs")},isSm:function(){return e.isBreakpoint("sm")},isMd:function(){return e.isBreakpoint("md")},isLg:function(){return e.isBreakpoint("lg")},isXl:function(){return e.isBreakpoint("xl")}})})(jQuery);

// Updated: 2019.01.12 @ 18:36:59
/***************************/
/** Underscore.js debounce function **/
/***************************/
function debounce(a,b,c){var d,e,f,g,h;var l=function(){return new Date().getTime();};var i=function(){var j=l()-g;if(j<b&&j>=0){d=setTimeout(i,b-j);}else{d=null;if(!c){h=a.apply(f,e);if(!d){f=e=null;}}}};return function(){f=this;e=arguments;g=l();var k=c&&!d;if(!d){d=setTimeout(i,b)};if(k){h=a.apply(f,e);f=e=null;}return h;};};
!
999px

Console