CMS LEFT PANEL > Layouts > Lang

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-layouts-lang"> 

      <a href="#" class="uk-button uk-button-small uk-flex uk-flex-middle pb-sidebar-back-button">
        <span class="" data-uk-icon="icon: chevron-left"></span>Design
      </a>

      <div class="uk-margin-large-top" uk-grid>
        <div class="uk-width-expand">
          <h3 class="uk-margin-remove-bottom">Layouts</h3>
        </div>
      </div>
      <hr class="uk-margin-small-top">

      <ul class="pb-sidebar-layouts-lang-menu uk-nav-default" data-uk-nav>
        <li class=""><a class="uk-text-uppercase">En (Default)</a></li>
        <li class=""><a class="uk-text-uppercase">Fr</a></li>
      </ul>

    </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 class="pb-preview-tablet" href="" uk-icon="icon: tablet"></a>
      </li>
      <li>
        <a class="pb-preview-laptop" href="" uk-icon="icon: laptop"></a>
      </li>
      <li>
        <a class="pb-preview-desktop" href="" uk-icon="icon: desktop"></a>
      </li>
    </ul>
  </div>

</div>

CSS

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

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

h3 {
  text-transform: uppercase;
  font-size: 1rem;
}

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

.pb-sidebar-content h3,
.pb-sidebar-content >:not(.pb-sidebar-home) li a {
  padding-left: 20px
}

.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: 45px;
  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-content 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;
}

.pb-sidebar-back-button .uk-icon {
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.pb-sidebar-back-button:hover .uk-icon {
  -webkit-transform: translateX(-5px);
  transform: translateX(-5px);
}