Bulma-based admin console scaffold

by jorgeluis

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<div class="is-flex is-flex-direction-column" id="app-container">
  
  <header class="is-flex navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        .navbar-brand
      </a>
    </div>

    <div class="navbar-end">
      <a class="navbar-item" href="#">
        [email protected]
      </a>
    </div>
  </header>
  
  <div class="is-flex is-flex-1">
  
    <nav id="sidebar-nav" role="navigation" aria-label="Main navigation">
      <a accesskey="1" role="button" href="#">Trigger subnav</a>
      <ul class="navSubMenu" id="navTrees">
        <li><a href="#">sublink 1</a></li>
        <li><a href="#">sublink 2</a></li>
        <li><a href="#">sublink 3</a></li>
      </ul>
      <a accesskey="2" href="#">page 2</a>
      <a accesskey="3" href="#">page 3</a>
      <a accesskey="4" href="#">page 4</a>
      <a accesskey="5" href="#">page 5</a>
    </nav>


    <div id="main-content" class="is-flex-1">
      <h1>
        Main Content
      </h1>
    </div>

  </div>
  
  <footer id="app-footer">
    footer
  </footer>


</div>

SCSS

$header-height: 3.25rem;

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}


.is-flex-direction-column {
  flex-direction: column
}
.is-flex-1 {
  flex: 1
}

#app-container {
  height: 100vh;
}

#sidebar-nav,
#main-content {
  height: 100%
}

#sidebar-nav {
  background: aliceblue;
  overflow-y: auto;
  height: 100%;
  width: 50px;
  
  @media screen and (min-width: 768px) {
    width: 120px
  }
}

#main-content {
  overflow-y: auto;
  padding: 1rem;
}

#app-footer {
  padding: 1rem;
  background: lightgrey;
}


[role="navigation"] a {
  display: block;
  padding: 1rem
}