Herman 5.0.0-beta.0

Herman Navigation Region

Styles related to the navigation sidebar in generated Herman docs.

[data-region='nav']

scss 
[data-region='nav'] {
  @include config.invert-colors;
  @include tools.z-index('sidebar');

  align-items: stretch;
  display: flex;
  flex-direction: column;
  padding: tools.size('gutter');
  white-space: nowrap;
  width: auto;

  @include tools.below('nav-break') {
    box-shadow: 0 0 tools.size('half-shim') tools.color('shadow');
    inset: 0 auto 0 0;
    position: absolute;
    transform: translateX(-102%);
    transition: transform 0.4s;

    &[aria-expanded='true'] {
      transform: translateX(0);
    }
  }

  @include tools.above('nav-break') {
    flex: 0 0 auto;
  }
}

Layout and styles for the navigation region.

Example

html 
<div data-region="container" style="min-height: 12em;">
  <nav data-region="nav" aria-expanded="true">
    Navigation Region…
  </nav>
  <main data-region="main">
    Pellentesque habitant morbi tristique
    senectus et netus et malesuada fames ac turpis egestas.
    Vestibulum tortor quam, feugiat vitae, ultricies eget,
    tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
  </main>
</div>