CMS LEFT PANEL > Settings

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-permissions">

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

      <h3 class="uk-margin-remove-bottom">ADVANCED</h3>
      <hr class="uk-margin-small-top">
      
      <div class="pb-padding">
      
        <h4 class="uk-margin-remove-bottom">Built-in domain</h4>
        <a href="https://nuoslibi.ipaoo.io/" target="_blank">https://nuoslibi.ipaoo.io/</a>
        
        <h4 class="uk-margin-remove-bottom">Custom Domain</h4>
        <a href="config.customDomainUrl" target="_blank" class="uk-button uk-button-text">Get a domain</a>
        <br>
        <button class="uk-button uk-button-text" uk-toggle="target: #pb-custom-domain-modal">Use your own</button>
         
         <h4 class="uk-margin-remove-bottom">SSL Certificate Status</h4>
        <button disabled class="uk-button uk-button-text" onclick="javascript:alert('');">Generate SSL</button>
        
      </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 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>


<!-- This is...

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;
}

.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 .test {
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

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

.pb-padding {
    padding: 35px;
    box-sizing: border-box;
}

JavaScript

$(".pb-open-website-settings-modal").click(function() {
  console.log('open https://github.com/iPaoo/react-cms/projects/4#card-4171773');
})