App Dashboard Layout

By Kevin Ball

dashboard app responsive

How do I use This?

A responsive layout common for app dashboards, with a top navigation, expandable sidebar, and scrolling content

HTML

<div class="app-dashboard shrink-medium">
  <div class="row expanded app-dashboard-top-nav-bar">
    <div class="columns medium-2">
      <button data-toggle="app-dashboard-sidebar" class="menu-icon hide-for-medium"></button>
      <a class="app-dashboard-logo">Foundation</a>
    </div>
    <div class="columns show-for-medium">
      <div class="app-dashboard-search-bar-container">
        <input class="app-dashboard-search" type="search" placeholder="Search">
        <i class="app-dashboard-search-icon fa fa-search"></i>
      </div>
    </div>
    <div class="columns shrink app-dashboard-top-bar-actions">
      <button href="#" class="button hollow">Logout</button>
      <a href="#" height="30" width="30" alt=""><i class="fa fa-info-circle"></i></a>
    </div>
  </div>

  <div class="app-dashboard-body off-canvas-wrapper">
    <div id="app-dashboard-sidebar" class="app-dashboard-sidebar position-left off-canvas off-canvas-absolute reveal-for-medium" data-off-canvas>
      <div class="app-dashboard-sidebar-title-area">
        <div class="app-dashboard-close-sidebar">
          <h3 class="app-dashboard-sidebar-block-title">Items</h3>
          <!-- Close button -->
          <button id="close-sidebar" data-app-dashboard-toggle-shrink class="app-dashboard-sidebar-close-button show-for-medium" aria-label="Close menu" type="button">
            <span aria-hidden="true"><a href="#"><i class="large fa fa-angle-double-left"></i></a></span>
          </button>
        </div>
        <div class="app-dashboard-open-sidebar">
          <button id="open-sidebar" data-app-dashboard-toggle-shrink class="app-dashboard-open-sidebar-button show-for-medium" aria-label="open menu" type="button">
            <span aria-hidden="true"><a href="#"><i class="large fa fa-angle-double-right"></i></a></span>
          </button>
        </div>
      </div>
      <div class="app-dashboard-sidebar-inner">
        <ul class="menu vertical">
          <li><a href="#" class="is-active">
            <i class="large fa fa-institution"></i><span class="app-dashboard-sidebar-text">Buildings</span>
          </a></li>
          <li><a>
            <i class="large fa fa-hourglass"></i><span class="app-dashboard-sidebar-text">Time</span>
          </a></li>
          <li><a>
            <i class="large fa fa-industry"></i><span class="app-dashboard-sidebar-text">Industry</span>
          </a></li>
          <li><a href="#" class="is-active">
            <i class="large fa fa-institution"></i><span class="app-dashboard-sidebar-text">Buildings</span>
          </a></li>
          <li><a>
            <i class="large fa fa-hourglass"></i><span class="app-dashboard-sidebar-text">Time</span>
          </a></li>
          <li><a>
            <i class="large fa fa-industry"></i><span class="app-dashboard-sidebar-text">Industry</span>
          </a></li>
          <li><a href="#" class="is-active">
            <i class="large fa fa-institution"></i><span class="app-dashboard-sidebar-text">Buildings</span>
          </a></li>
          <li><a>
            <i class="large fa fa-hourglass"></i><span class="app-dashboard-sidebar-text">Time</span>
          </a></li>
          <li><a>
            <i class="large fa fa-industry"></i><span class="app-dashboard-sidebar-text">Industry</span>
          </a></li>
        </ul>
      </div>
    </div>

    <div class="app-dashboard-body-content off-canvas-content" data-off-canvas-content>
      <h2 class="text-center">Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit ligula eget est feugiat viverra. Duis a arcu laoreet, rhoncus libero imperdiet, placerat velit. Vestibulum euismod mi et ornare sodales. Donec efficitur mattis blandit. Proin in massa elit. Praesent malesuada iaculis nisl, a venenatis dui. Nullam venenatis tincidunt placerat. Suspendisse egestas urna a aliquet pretium.</p>

      <p>Curabitur ullamcorper mollis lobortis. Integer a scelerisque turpis, sed dictum lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis placerat sem. Suspendisse vulputate, leo ac sollicitudin lobortis, dui dui blandit justo, ut molestie justo sem in ipsum. Vestibulum convallis ex ac est tristique tincidunt. Vivamus dui dui, viverra et urna vitae, aliquam facilisis erat. Nam lorem nibh, elementum semper commodo at, fermentum quis justo. Donec finibus sapien eget scelerisque rhoncus. Nullam at nisi sed mi congue vestibulum. Vivamus nec scelerisque orci, vel fringilla nisi. Sed dictum, leo in consectetur porttitor, quam nibh aliquet nisi, in pulvinar sapien ante id dui. Aliquam massa nisl, auctor eget nisl in, faucibus gravida lectus. Nullam mattis orci at turpis finibus egestas. Nam vitae lorem accumsan, tempus lectus vitae, rutrum diam. Integer pulvinar placerat magna aliquam scelerisque.</p>

      <p>Duis consectetur magna velit, nec porttitor velit fermentum pulvinar. Duis varius justo eu varius pellentesque. Curabitur aliquet velit mauris, quis aliquam leo pharetra in. Integer rhoncus ut dui in rhoncus. Maecenas nec libero neque. Duis ac lacus at justo ullamcorper efficitur. Praesent ornare urna ante. Aliquam dapibus posuere nisl sit amet vestibulum. Quisque dapibus iaculis justo non egestas. Curabitur interdum semper justo, eget condimentum orci bibendum nec.</p>

      <p>Vivamus pharetra massa non risus sollicitudin iaculis. Donec semper finibus hendrerit. Nam ut volutpat mauris, sit amet molestie nisi. Curabitur ac nisi urna. Nulla id turpis nec dui ornare tempor in ac justo. Cras quis cursus nisi. Donec vel pellentesque ante. Maecenas non nisi risus. Praesent posuere scelerisque varius. Cras vitae mollis quam. Etiam ut dui massa. Etiam mattis aliquam enim, eget facilisis erat elementum eu. Proin et lorem volutpat, pretium massa a, venenatis mi. Suspendisse quam orci, feugiat eget suscipit ac, vehicula a ante. Nam ut mauris at tortor cursus interdum.</p>

      <p>Nullam hendrerit tincidunt risus. Sed nec nibh vel nibh euismod lobortis sed a sem. Nulla nec libero dolor. Pellentesque non sodales orci. Phasellus odio ligula, varius non orci ac, fermentum pulvinar nibh. Aliquam erat volutpat. Curabitur vehicula varius porttitor. Integer purus sapien, placerat sodales eros et, interdum vestibulum sem. Duis faucibus felis vitae augue ultricies, aliquet tempor orci vestibulum. Duis eu justo mi. Praesent feugiat, ante interdum fringilla auctor, ex nibh aliquet neque, sed feugiat tellus tortor non dui. Suspendisse potenti. Aliquam fringilla sapien felis, at faucibus justo interdum congue.</p>


    </div>
  </div>
</div>

$app-dashboard-top-nav-color: #2c3840;
$app-dashboard-top-nav-height: 55px;

.app-dashboard {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-dashboard-body {
  flex: 1 1 auto;
  display: flex;
}

.app-dashboard-top-nav-bar  {
  display: flex;
  align-items: center;
  justify-content: center;
  background: $app-dashboard-top-nav-color;
  height: $app-dashboard-top-nav-height;
  width: 100%;
  flex: 0 0 $app-dashboard-top-nav-height;
  .menu-icon {
    vertical-align: text-bottom;
  }
}

.app-dashboard-logo {
  color: $white;
  text-transform: uppercase;
  font-weight: bold;
}

.app-dashboard-search-bar-container {
  position: relative;
}

.app-dashboard-search {
  background: lighten($app-dashboard-top-nav-color, 10%);
  border: 0;
  margin-bottom: 0;
  color: $white;

  &:active,
  &:focus {
    background: darken($app-dashboard-top-nav-color, 5%);
  }
}

.app-dashboard-search-icon {
  position: absolute;
  color: $white;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.app-dashboard-top-bar-actions {
  align-items: center;
  display: flex;

  button {
    margin-bottom: 0;
    margin-right: 2rem;

    &.hollow {
      border-color: $white;
      color: $white;
      
      &:hover {
        background: $white;
        color: $primary-color;
      }
    }
  }

  .fa-info-circle {
    color: $white;
    font-size: 1.5rem;
  }
}

.app-dashboard-sidebar {
  background-color: $white;
  height: 100%;
  overflow-x: visible;
  overflow-y: auto;
  z-index: 1;
  transition: all $offcanvas-transition-length $offcanvas-transition-timing;


  .app-dashboard-open-sidebar, .app-dashboard-close-sidebar{
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    padding: 2rem 1rem;
  }

  .app-dashboard-sidebar-close-button {
    font-size: 14px;
  }

  .app-dashboard-sidebar-inner {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    .menu > li > a {
      align-items: center;
    }
  }
  .fa.large {
    font-size: rem-calc(24);
    width: 40px;
  }
}

.reveal-for-medium {
  .app-dashboard-open-sidebar {
    display: none;
  }
}

.app-dashboard-sidebar-footer {
  background: rgba(42, 57, 79, 0.8);
  bottom: 0;
  left: 0;
  padding: 1rem;
  position: absolute;
  width: 100%;
}

.app-dashboard-open-sidebar {
  text-align: center;
}

.app-dashboard-body-content {
  transition: all $offcanvas-transition-length $offcanvas-transition-timing;
  overflow-y: auto;
  flex: 1 1 0;
  padding: 20px;
  background-color: $white;
}

@mixin shrunk-sidebar() {
  .app-dashboard-close-sidebar, .app-dashboard-sidebar-text {
    display: none;
  }

  .app-dashboard-open-sidebar {
    display: block;
  }

  .app-dashboard-sidebar {
    width: 80px;
    .fa.large {
      width: auto;
    }
  }

  .off-canvas-content {
    margin-left: 80px;
    width: calc(100% - 80px);
  }

  .navigation {
    margin-top: 2rem;
    text-align: center;

  }
  .menu.vertical > li > a {
    justify-content: center;
  }

  .menu {
    li {
      &::after {
        display: none;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
      }

      a {
        padding: 0.75rem;
        svg {
          margin: 0;
        }
        span {
          display: none;
          opacity: 0;
          transition: opacity 0.5s ease-in-out;
        }
      }
    }
  }
}

// mini sidebar on medium/tablet size
@include breakpoint(medium only) {
  .app-dashboard.shrink-medium {
    @include shrunk-sidebar()
  }
}
@include breakpoint(large) {
  .app-dashboard.shrink-large {
    @include shrunk-sidebar()
  }
}

.app-dashboard {
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.app-dashboard-body {
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.app-dashboard-top-nav-bar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #2c3840;
  height: 55px;
  width: 100%;
  -webkit-flex: 0 0 55px;
      -ms-flex: 0 0 55px;
          flex: 0 0 55px;
}

.app-dashboard-top-nav-bar .menu-icon {
  vertical-align: text-bottom;
}

.app-dashboard-logo {
  color: #fefefe;
  text-transform: uppercase;
  font-weight: bold;
}

.app-dashboard-search-bar-container {
  position: relative;
}

.app-dashboard-search {
  background: #41525e;
  border: 0;
  margin-bottom: 0;
  color: #fefefe;
}

.app-dashboard-search:active, .app-dashboard-search:focus {
  background: #222b31;
}

.app-dashboard-search-icon {
  position: absolute;
  color: #fefefe;
  right: 1rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.app-dashboard-top-bar-actions {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.app-dashboard-top-bar-actions button {
  margin-bottom: 0;
  margin-right: 2rem;
}

.app-dashboard-top-bar-actions button.hollow {
  border-color: #fefefe;
  color: #fefefe;
}

.app-dashboard-top-bar-actions button.hollow:hover {
  background: #fefefe;
  color: #1779ba;
}

.app-dashboard-top-bar-actions .fa-info-circle {
  color: #fefefe;
  font-size: 1.5rem;
}

.app-dashboard-sidebar {
  background-color: #fefefe;
  height: 100%;
  overflow-x: visible;
  overflow-y: auto;
  z-index: 1;
  transition: all 0.5s ease;
}

.app-dashboard-sidebar .app-dashboard-open-sidebar, .app-dashboard-sidebar .app-dashboard-close-sidebar {
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 2rem 1rem;
}

.app-dashboard-sidebar .app-dashboard-sidebar-close-button {
  font-size: 14px;
}

.app-dashboard-sidebar .app-dashboard-sidebar-inner {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.app-dashboard-sidebar .app-dashboard-sidebar-inner .menu > li > a {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.app-dashboard-sidebar .fa.large {
  font-size: 1.5rem;
  width: 40px;
}

.reveal-for-medium .app-dashboard-open-sidebar {
  display: none;
}

.app-dashboard-sidebar-footer {
  background: rgba(42, 57, 79, 0.8);
  bottom: 0;
  left: 0;
  padding: 1rem;
  position: absolute;
  width: 100%;
}

.app-dashboard-open-sidebar {
  text-align: center;
}

.app-dashboard-body-content {
  transition: all 0.5s ease;
  overflow-y: auto;
  -webkit-flex: 1 1 0;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  padding: 20px;
  background-color: #fefefe;
}

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .app-dashboard.shrink-medium .app-dashboard-close-sidebar, .app-dashboard.shrink-medium .app-dashboard-sidebar-text {
    display: none;
  }
  .app-dashboard.shrink-medium .app-dashboard-open-sidebar {
    display: block;
  }
  .app-dashboard.shrink-medium .app-dashboard-sidebar {
    width: 80px;
  }
  .app-dashboard.shrink-medium .app-dashboard-sidebar .fa.large {
    width: auto;
  }
  .app-dashboard.shrink-medium .off-canvas-content {
    margin-left: 80px;
    width: calc(100% - 80px);
  }
  .app-dashboard.shrink-medium .navigation {
    margin-top: 2rem;
    text-align: center;
  }
  .app-dashboard.shrink-medium .menu.vertical > li > a {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .app-dashboard.shrink-medium .menu li::after {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  .app-dashboard.shrink-medium .menu li a {
    padding: 0.75rem;
  }
  .app-dashboard.shrink-medium .menu li a svg {
    margin: 0;
  }
  .app-dashboard.shrink-medium .menu li a span {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
}

@media print, screen and (min-width: 64em) {
  .app-dashboard.shrink-large .app-dashboard-close-sidebar, .app-dashboard.shrink-large .app-dashboard-sidebar-text {
    display: none;
  }
  .app-dashboard.shrink-large .app-dashboard-open-sidebar {
    display: block;
  }
  .app-dashboard.shrink-large .app-dashboard-sidebar {
    width: 80px;
  }
  .app-dashboard.shrink-large .app-dashboard-sidebar .fa.large {
    width: auto;
  }
  .app-dashboard.shrink-large .off-canvas-content {
    margin-left: 80px;
    width: calc(100% - 80px);
  }
  .app-dashboard.shrink-large .navigation {
    margin-top: 2rem;
    text-align: center;
  }
  .app-dashboard.shrink-large .menu.vertical > li > a {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .app-dashboard.shrink-large .menu li::after {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  .app-dashboard.shrink-large .menu li a {
    padding: 0.75rem;
  }
  .app-dashboard.shrink-large .menu li a svg {
    margin: 0;
  }
  .app-dashboard.shrink-large .menu li a span {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
}

$('[data-app-dashboard-toggle-shrink]').on('click', function(e) {
  e.preventDefault();
  $(this).parents('.app-dashboard').toggleClass('shrink-medium').toggleClass('shrink-large');
});

App Dashboard Layout

By Kevin Ball

Responsive Blog Footer

Expanding Hover Columns

Dashboard Number Card

App Dashboard Layout

By Kevin Ball

Similar Building Blocks

Responsive Blog Footer

Expanding Hover Columns

Dashboard Number Card