On mobile, the navigation sits at the top of the page (collapsed by default) and the content is below. On larger breakpoints, the nav is on the left side, and the content takes up the rest of the space available. Both sections have their own scroll.
This website is built using this layout (with minor tweaks, ex: max-width), so feel free to inspect the page markup!
The main application layout consists of the markup below:
<body>
<div class="ui-app">
<div class="ui-app__header"> <!-- .ui-global-header component goes here... --> </div>
<div class="ui-app__container">
<div class="ui-app__nav"> <!-- .ui-nav component (see below) goes here... --> </div>
<div class="ui-app__body">
<div class="ui-app__banner"> <!-- header goes here... --> </div>
<div class="ui-app__toolbar"> <!-- toolbar goes here... --> </div>
<div class="ui-app__title"> <!-- title/page header goes here... --> </div>
<div class="ui-app__content"> <!-- content goes here... --> </div>
<div class="ui-app__footer"> <!-- footer goes here... --> </div>
<div class="ui-app__sticky"> <!-- sticky footer goes here... --> </div>
</div>
</div>
</div>
</body>