menu-layout-testing

codeswing.json

{
  "scripts": [],
  "styles": []
}

index.pug

.view
  .banner
  .site
    header.site-header
      .spacer
      nav.site-header-nav
        .navbar
        .drawer
      nav.site-sidebar-nav
      .spacer
      nav.site-sidebar-nav
    main.site-main
    footer.site-footer
      nav.site-footer-nav

script.js

‎‎​

style.scss

body {
  margin: 0;
  padding: 0;
}

.view {
  position: relative;
}

.page {
  min-height: 100vh;
}

.banner {
  height: 20px;
  background: blue;
}

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

.site-header {
  position: sticky;
  top: 0;
  flex: 0 0 auto;
}

.site-footer {
  height: 100px;
  background: lightblue;
  flex: 0 0 auto;
}

.site-main {
  flex: 1 1 auto;
}

.site-header-nav {
  .navbar {
    background: gray;
    height: 50px;
  }
  .drawer {
    position: absolute;
    width: 200px;
    height: 100vh;
    top: 0;
    background: pink;
  }
}