Top Toolbar

[loljoho]

Toolbar components:

• [ ] Toolbar, Fixed Top
  • [ ] Toggle Sidenav (hide-gt-sm)
  • [ ]
• [ ] Breadcrumbs/Submenu, Fixed Top (?) (comments)

[loljoho]

Sass

$breadcrumb-font-size:    24px;
$breadcrumb-font-weight:  400;
$breadcrumb-icon-color:   rgba(0, 0, 0, 0.54);

breadcrumb {
  font-size: $breadcrumb-font-size;
  font-weight: $breadcrumb-font-weight;
  md-icon {
    color: $breadcrumb-icon-color;
    fill: $breadcrumb-icon-color;
  }
}

breadcrumb-page {
  display: inline-block;
  word-wrap: break-word;
}

Jade

//- ngMaterial Toolbar
md-toolbar.md-whiteframe-glow-z1.site-content-toolbar
  .md-toolbar-tools.gp-toolbar-tools(tabindex='-1')

    //- icon button
    md-button.md-icon-button(ng-click='openMenu()', hide-gt-sm='', aria-label='Toggle Menu')
      md-icon(md-svg-src='img/icons/ic_menu_24px.svg')

    //- container
    .fill-height(layout='row', flex='')

      //- -----------------------------      
      //-   Text
      //- -----------------------------      

      h2.md-toolbar-item.breadcrumb.md-headline

        //- if
        span(ng-if='menu.currentPage.name !== menu.currentSection.name')

          //-   Section Name
          //- -----------------------------      
          //- Hidden on small to medium viewports

          span(hide-sm='', hide-md='') {{menu.currentSection.name}}

          //- separator icon
          span.gp-menu-separator-icon(hide-sm='', hide-md='', style='transform: translate3d(0, 1px, 0)')
            span.md-visually-hidden -
            md-icon(aria-hidden='true', md-svg-src='img/icons/ic_chevron_right_24px.svg', style='margin-top: -2px')

        //-   Page Name
        //- -----------------------------      
        span.breadcrumb-page {{menu.currentPage | humanizeDoc}}
        //- Filtered 

      //- -----------------------------      
      //-   end
      //- -----------------------------   

      //- take up space
      span(flex='')

      //- icon button inline menu
      .md-toolbar-item.gp-tools(layout='row')
        md-button.md-icon-button(aria-label='Install with Bower', ng-if='!currentComponent.docs.length && !currentComponent.isService', target='_blank', ng-href='https://github.com/angular/bower-material')
          md-tooltip(md-autohide='') Install with Bower
          md-icon(md-svg-src='img/icons/bower-logo.svg')

Javascript

app.filter("humanizeDoc", humanizeDocFilter);
// ngInject
function humanizeDocFilter() {
  return function(e) {
    if (e) return "directive" === e.type ? e.name.replace(/([A-Z])/g, function(e) {
      return "-" + e.toLowerCase();
    }) : e.label || e.name;
  }
}