blob: 43ecea3a9d1a4f909007b307f8155c849884f216 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001<!-- Always shows a header, even in smaller screens. -->
2<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
3 <header class="mdl-layout__header">
4 <div class="mdl-layout__header-row">
5 <!-- Title -->
6 <span class="mdl-layout-title">Title</span>
7 <!-- Add spacer, to align navigation to the right -->
8 <div class="mdl-layout-spacer"></div>
9 <!-- Navigation. We hide it in small screens. -->
10 <nav class="mdl-navigation mdl-layout--large-screen-only">
11 <a class="mdl-navigation__link" href="">Link</a>
12 <a class="mdl-navigation__link" href="">Link</a>
13 <a class="mdl-navigation__link" href="">Link</a>
14 <a class="mdl-navigation__link" href="">Link</a>
15 </nav>
16 </div>
17 </header>
18 <div class="mdl-layout__drawer">
19 <span class="mdl-layout-title">Title</span>
20 <nav class="mdl-navigation">
21 <a class="mdl-navigation__link" href="">Link</a>
22 <a class="mdl-navigation__link" href="">Link</a>
23 <a class="mdl-navigation__link" href="">Link</a>
24 <a class="mdl-navigation__link" href="">Link</a>
25 </nav>
26 </div>
27 <main class="mdl-layout__content">
28 <div class="page-content"><!-- Your content goes here --></div>
29 </main>
30</div>