Admin Webapp w BS4

by jorgeluis

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id="page-container">

  <div id="announcements">
    <div class="alert alert-info">
      This is a basic alert-info
    </div>
    <div class="alert alert-danger">
      This is a second alert, a DANGER one!
    </div>
  </div>
  
  
  <div class="navbar navbar-expand-sm" id="header">
  
    <a class="navbar-brand" href="/">Logo</a> 
    
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" style="display: inline-block; width: 42px;" role="button" href=""><svg id="bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.outline{fill:none;stroke:#333;stroke-miterlimit:10;}.cls-2{fill:#333;}</style></defs><title>Notifications</title><path class="outline" d="M12,18H2a4.91,4.91,0,0,0,2.8-1.8c.86-1,.94-2.75,1.16-3.84A38.38,38.38,0,0,1,7.13,6.57,4.62,4.62,0,0,1,12,3.18a4.62,4.62,0,0,1,4.87,3.39A38.38,38.38,0,0,1,18,12.36c.22,1.09.3,2.86,1.16,3.84A4.91,4.91,0,0,0,22,18Z"/><path class="cls-1" d="M9.47,18a2.53,2.53,0,0,0,5.06,0"/><path class="cls-2" d="M14,3a2,2,0,0,0-4,0Z"/></svg></a>
      </li>
      <li class="nav-item dropdown navbar-user">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Jorge</a>
        <ul class="dropdown-menu pull-right">
          <li><a href="/logout">Log Out</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" style="display: inline-block; width: 42px;" role="button" href="#settings" id="settingsBtn">
          <svg id="gear" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#333;}</style></defs><title>Settings</title><path class="cls-1"...

SCSS

html, body {
  height: 100%;
  position: relative;
}
body {
  min-height: 100%;
  font-size: 0.875em;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#page-container {
  display: flex;
  flex-direction: column;
  min-width: 1200px;
  min-height: 100%;
}

#announcements {
  padding: 0.5rem;
  
  .alert {
    margin-bottom: 0.5rem;
  }
}


.navbar {
  padding: 1rem;
  background-color: #fafafa;
  color: #333;
  transition: background-color .3s;

  .dark-mode & {
    background-color: #111;
    color: #ccc;
  }
}

#content {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  position: relative;
}

#sidebar {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  width: 180px;
  background: #232629;
  color: white;
  
   > ul {
    margin-bottom: 1rem;
  }
}
.sidebar-heading {
  font-size: 0.875em;
  color: #ccc;
}

#screen-container {
  flex: 1 1 auto;
  padding: 1rem;
  background: #fff;
  color: #333;
}

$settingswidth: 300px;

#settings {
  position: absolute;
  top: 0;
  left: 100%;
  width: $settingswidth;
  z-index: 9999;
  padding: 2rem;
  border-left: solid 1px #ddd;
  transition: transform 0.2s ease-out;

  &.isOpen {
    transform: translateX(-$settingswidth);
    box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.1);
  }
}

JavaScript

(function() {
	var settingsBtn = document.getElementById('settingsBtn');
	var settingsDiv = document.getElementById('settings');

	settingsBtn.addEventListener('click', function(event) {
	  event.preventDefault();
		settingsDiv.classList.toggle('isOpen');
  	this.blur();
	})
})();


(function() {
	var modeBtn = document.getElementById('modeBtn');

	modeBtn.addEventListener('click', function() {
		document.body.classList.toggle('dark-mode');
  	this.blur();
	})
})();