CMS LEFT PANEL > HOME

by Greggg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit-icons.js"></script>
<div class="pb-sidebar">

  <div class="pb-sidebar-content">

    <div class="pb-sidebar-home">

      <div class="pb-reseller-logo uk-background-norepeat uk-background-contain uk-background-center-center" style="background-image: url(https://0602.nccdn.net//000/000/168/347/avatar-picto-ipaoo.jpg)">
      </div>

      <ul class="pb-sidebar-home-menu uk-nav-default uk-nav-center" data-uk-nav>
        <li class=""><a class="uk-text-uppercase">Pages</a></li>
        <li class=""><a class="uk-text-uppercase">Blog</a></li>
        <li class=""><a class="uk-text-uppercase">Shop</a></li>
        <li class=""><a class="uk-text-uppercase">Design</a></li>
        <li class=""><a class="uk-text-uppercase">Statistiques</a></li>
        <li class=""><a class="uk-text-uppercase">Settings</a></li>
        <li class=""><a href="http://support-internet.fr" class="uk-text-uppercase">Help</a></li>
      </ul>


      <div class="uk-position-relative uk-margin-large-top">
        <div class="pb-account-avatar uk-cover-container uk-border-circle uk-margin-auto">
          <img src="https://placeimg.com/640/280/people" uk-cover>
        </div>
        <span class="uk-badge uk-position-absolute pb-account-notices" style="left: 160px; top: -6px;">2</span>
      </div>

      <div class="uk-text-small uk-text-muted uk-text-center">
        <a class="pb-account-name">GREG</a>
        <br>
        <a>LOGOUT</a>
      </div>

    </div>

  </div>

  <div class="pb-sidebar-device-tools">
    <ul class="uk-iconnav uk-nav-default uk-flex-center uk-flex-middle">
      <li>
        <a class="pb-preview-smartphone" href="#" data-uk-icon="icon: phone"></a>
      </li>
      <li>
        <a...

CSS

html {
  background: #444;
  overflow: hidden;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h4 {
  text-transform: uppercase;
  font-size: 0.875rem;
}

.pb-sidebar {
  background: #eee;
  box-sizing: border-box;
  display: block;
  position: fixed;
  min-width: 300px;
  max-width: 600px;
  width: 300px;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.pb-sidebar-content {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 45px;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overflow: hidden;
}

.pb-sidebar-home {
  box-sizing: border-box;
  width: 300px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-transition: left 0.2s ease-in-out;
  transition: left 0.2s ease-in-out;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

.pb-reseller-logo {
  height: 50px;
  margin: 140px 0 80px 0;
}

.pb-sidebar-home-menu {
}

.pb-sidebar-home-menu li:hover {
  background-color: #e5e5e5;
  pointer: cursor;
}



.pb-account-avatar {
  width: 50px;
  height: 50px;
}


.pb-sidebar-device-tools {
  box-sizing: border-box;
  position: absolute;
  min-width: 300px;
  max-width: 600px;
  height: 60px;
  right: 0;
  //bottom: 45px;
  bottom: 0;
  left: 0;
  background: #eee;
  margin: 0;
  padding: 15px;
}