third_party/ot-br-posix/repo/third_party/mdl/repo/src/layout/snippets/fixed-header-drawer.html

   1 <!-- The drawer is always open in large screens. The header is always shown,
   2   even in small screens. -->
   3 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
   4             mdl-layout--fixed-header">
   5   <header class="mdl-layout__header">
   6     <div class="mdl-layout__header-row">
   7       <div class="mdl-layout-spacer"></div>
   8       <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
   9                   mdl-textfield--floating-label mdl-textfield--align-right">
  10         <label class="mdl-button mdl-js-button mdl-button--icon"
  11                for="fixed-header-drawer-exp">
  12           <i class="material-icons">search</i>
  13         </label>
  14         <div class="mdl-textfield__expandable-holder">
  15           <input class="mdl-textfield__input" type="text" name="sample"
  16                  id="fixed-header-drawer-exp">
  17         </div>
  18       </div>
  19     </div>
  20   </header>
  21   <div class="mdl-layout__drawer">
  22     <span class="mdl-layout-title">Title</span>
  23     <nav class="mdl-navigation">
  24       <a class="mdl-navigation__link" href="">Link</a>
  25       <a class="mdl-navigation__link" href="">Link</a>
  26       <a class="mdl-navigation__link" href="">Link</a>
  27       <a class="mdl-navigation__link" href="">Link</a>
  28     </nav>
  29   </div>
  30   <main class="mdl-layout__content">
  31     <div class="page-content"><!-- Your content goes here --></div>
  32   </main>
  33 </div>