Bootstrap 4 Admin Dashboard Template

Bootstrap 4 Admin Dashboard Template

Live Preview

HTML

<nav
     class="navbar navbar-expand-lg navbar-dark bg-mattBlackLight fixed-top"
   >
     <button class="navbar-toggler sideMenuToggler" type="button">
       <span class="navbar-toggler-icon"></span>
     </button>

     <a class="navbar-brand" href="#">FrontEndFunn</a>
     <button
       class="navbar-toggler"
       type="button"
       data-toggle="collapse"
       data-target="#navbarSupportedContent"
       aria-controls="navbarSupportedContent"
       aria-expanded="false"
       aria-label="Toggle navigation"
     >
       <span class="navbar-toggler-icon"></span>
     </button>

     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item dropdown">
           <a
             class="nav-link dropdown-toggle p-0"
             href="#"
             id="navbarDropdown"
             role="button"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false"
           >
             <i class="material-icons icon">
               person
             </i>
             <span class="text">Account</span>
           </a>
           <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
             <a class="dropdown-item" href="#">Action</a>
             <a class="dropdown-item" href="#">Another action</a>
             <div class="dropdown-divider"></div>
             <a class="dropdown-item" href="#">Something else here</a>
           </div>
         </li>
       </ul>
     </div>
   </nav>
   <div class="wrapper d-flex">
     <div class="sideMenu bg-mattBlackLight">
       <div class="sidebar">
         <ul class="navbar-nav">
           <li class="nav-item">
             <a href="#" class="nav-link px-2">
               <i class="material-icons icon">
                 dashboard
               </i>
               <span class="text">Dashboard</span>
             </a>
           </li>
           <li class="nav-item">
             <a href="#" class="nav-link px-2">
               <i class="material-icons icon">
                 person
               </i>
               <span class="text">User Profile</span>
             </a>
           </li>
           <li class="nav-item">
             <a href="#" class="nav-link px-2">
               <i class="material-icons icon"> insert_chart </i
               ><span class="text">Charts</span></a
             >
           </li>
           <li class="nav-item">
             <a href="#" class="nav-link px-2">
               <i class="material-icons icon">
                 settings
               </i>
               <span class="text">Settings</span>
             </a>
           </li>
           <li class="nav-item">
             <a href="#" class="nav-link px-2">
               <i class="material-icons icon">
                 pages
               </i>
               <span class="text">Pages</span>
             </a>
           </li>
           <li class="nav-item">
             <a href="#" class="nav-link px-2">
               <i class="material-icons icon">
                 computer
               </i>
               <span class="text">Demo</span>
             </a>
           </li>
           <li class="nav-item">
             <a href="#" class="nav-link px-2 sideMenuToggler">
               <i class="material-icons icon expandView ">
                 view_list
               </i>
               <span class="text">Resize</span>
             </a>
           </li>
         </ul>
       </div>
     </div>
     <div class="content">
       
       <main>
         <div class="container-fluid">
           <div class="alert alert-success my-5">
            <strong class="d-flex justify-content-center text-center"> A like is always appreciated</strong>
           </div>
           <div class="row">
             <div class="col-md-4 my-3">
               <div class="bg-mattBlackLight px-3 py-3">
                 <h4 class="mb-2">New Clients</h4>
                 <div class="progress" style="height: 16px;">
                   <div
                     class="progress-bar bg-warning text-mattBlackDark"
                     role="progressbar"
                     style="width: 25%;"
                     aria-valuenow="25"
                     aria-valuemin="0"
                     aria-valuemax="100"
                   >
                     25
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-md-4 my-3">
               <div class="bg-mattBlackLight px-3 py-3">
                 <h4 class="mb-2">New Projects</h4>
                 <div class="progress" style="height: 16px;">
                   <div
                     class="progress-bar bg-info text-mattBlackDark"
                     role="progressbar"
                     style="width: 50%;"
                     aria-valuenow="25"
                     aria-valuemin="0"
                     aria-valuemax="100"
                   >
                     50
                   </div>
                 </div>
               </div>
             </div>
             <div class="col-md-4 my-3">
               <div class="bg-mattBlackLight p-3">
                 <h4 class="mb-2">Completed</h4>
                 <div class="progress" style="height: 16px;">
                   <div
                     class="progress-bar bg-success"
                     role="progressbar"
                     style="width: 80%;"
                     aria-valuenow="25"
                     aria-valuemin="0"
                     aria-valuemax="100"
                   >
                     80
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <div class="row">
             <div class="col-md-6">
               <div class="bg-mattBlackLight my-2 p-3">
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                 Ratione libero totam rerum eos nam ab perspiciatis voluptatum
                 in. Quidem natus autem quae. Velit accusamus sit, perspiciatis
                 sunt earum tempora veniam.
               </div>
             </div>
             <div class="col-md-6">
               <div class="bg-mattBlackLight my-2 p-3">
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                 Ratione libero totam rerum eos nam ab perspiciatis voluptatum
                 in. Quidem natus autem quae. Velit accusamus sit, perspiciatis
                 sunt earum tempora veniam.
               </div>
             </div>
           </div>
         </div>
       </main>
     </div>
   </div>

 

 

SCSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Courgette');
@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}
$easeTime: 0.25s;
$margin-top: 56px;
$colors: (
  "mattBlackLight": "#303337",
  "mattBlackDark": "#212121",
  "mattGray": "#878d8d",
  "mattRed": "#ec6271"
);

@each $colorName, $colorValue in $colors {
  .bg-#{$colorName} {
    background-color: #{$colorValue};
  }
  .text-#{$colorName} {
    color: #{$colorValue};
  }
}
*{
  font-family: 'Poppins', sans-serif;
}
body {
  height: 1000px;
  @extend .bg-mattBlackDark;
  @extend .text-mattGray;
}
.wrapper {
  margin-top: rem($margin-top);
  .sideMenu {
    position: fixed;
    top: 0;
    bottom: 0;
    margin: rem($margin-top) auto auto;
    left: 0;
    width: rem(200px);
    transition: all ease $easeTime;
    transform: translateX(-100%);
    z-index: 2000;
  }
  .content {
    width: 100%;
    margin-left: rem(0px);
    transition: all ease $easeTime;
  }
  &.active {
    .sideMenu {
      transform: translateX(0);
    }
  }
}

.nav-link {
  align-items: center;
  display: block;
  white-space: nowrap;
  .icon {
    margin-right: rem(4px);
    font-size: rem(30px);
    vertical-align: middle;
    @extend .text-mattGray;
    height: rem(32px);
    width: rem(32px);
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    font-size: rem(14px);
    @extend .text-mattGray;
  }
  &:hover,
  &.active {
    @extend .bg-mattBlackDark;
    .icon,
    .text {
      @extend .text-mattRed;
    }
  }
}

@media (min-width: 992px) {
  .wrapper {
    .sideMenu {
      transform: translateX(0);
    }
    .content {
      margin-left: rem(200px);
    }
    &.active {
      .sideMenu {
        width: rem(80px);
        .nav-link {
          text-align: center;
          .icon {
            margin-right: 0;
          }
          .text {
            display: none;
          }
        }
      }
      .content {
        margin-left: rem(80px);
      }
    }
  }
}

 

CSS

@import url("https://fonts.googleapis.com/css?family=Poppins:400,600,700");
@import url("https://fonts.googleapis.com/css?family=Courgette");
.bg-mattBlackLight {
  background-color: #303337;
}

.text-mattBlackLight {
  color: #303337;
}

.bg-mattBlackDark, .nav-link:hover, .nav-link.active, body {
  background-color: #212121;
}

.text-mattBlackDark {
  color: #212121;
}

.bg-mattGray {
  background-color: #878d8d;
}

.text-mattGray, .nav-link .text, .nav-link .icon, body {
  color: #878d8d;
}

.bg-mattRed {
  background-color: #ec6271;
}

.text-mattRed, .nav-link:hover .icon,
.nav-link:hover .text, .nav-link.active .icon,
.nav-link.active .text {
  color: #ec6271;
}

* {
  font-family: "Poppins", sans-serif;
}

body {
  height: 1000px;
}

.wrapper {
  margin-top: 3.5rem;
}
.wrapper .sideMenu {
  position: fixed;
  top: 0;
  bottom: 0;
  margin: 3.5rem auto auto;
  left: 0;
  width: 12.5rem;
  transition: all ease 0.25s;
  transform: translateX(-100%);
  z-index: 2000;
}
.wrapper .content {
  width: 100%;
  margin-left: 0rem;
  transition: all ease 0.25s;
}
.wrapper.active .sideMenu {
  transform: translateX(0);
}

.nav-link {
  align-items: center;
  display: block;
  white-space: nowrap;
}
.nav-link .icon {
  margin-right: 0.25rem;
  font-size: 1.875rem;
  vertical-align: middle;
  height: 2rem;
  width: 2rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.nav-link .text {
  font-size: 0.875rem;
}
@media (min-width: 992px) {
  .wrapper .sideMenu {
    transform: translateX(0);
  }
  .wrapper .content {
    margin-left: 12.5rem;
  }
  .wrapper.active .sideMenu {
    width: 5rem;
  }
  .wrapper.active .sideMenu .nav-link {
    text-align: center;
  }
  .wrapper.active .sideMenu .nav-link .icon {
    margin-right: 0;
  }
  .wrapper.active .sideMenu .nav-link .text {
    display: none;
  }
  .wrapper.active .content {
    margin-left: 5rem;
  }
}

 

JAVASCRIPT

$(document).ready(function(){
$(".sideMenuToggler").on("click", function() {
    $(".wrapper").toggleClass("active");
  });


    var adjustSidebar = function() {
    $(".sidebar").slimScroll({
      height: document.documentElement.clientHeight - $(".navbar").outerHeight()
    });
  };

  adjustSidebar();
  $(window).resize(function() {
    adjustSidebar();
  });

});

 

Add a Comment

Your email address will not be published. Required fields are marked *