patterns/md-responsive-toolbar/index.html

<!doctype html>
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<html>
<head>

  <title>Material Design Responsive Toolbar</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../../font-roboto/roboto.html">
  <link rel="import" href="../../../iron-icons/iron-icons.html">
  <link rel="import" href="../../app-toolbar/app-toolbar.html">
  <link rel="import" href="../../../paper-icon-button/paper-icon-button.html">

  <custom-style>
    <style is="custom-style">

      body {
        font-family: 'Roboto', sans-serif;
        margin: 0;
        background-color: #e5e5e5;
      }

      app-toolbar {
        background-color: white;
        box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
      }

      [main-title] {
        margin-left: 24px;
      }

      @media (max-width: 600px) {

        app-toolbar {
          height: 56px;
          padding: 0 8px;
        }

      }

    </style>
  </custom-style>

</head>
<body>

  <app-toolbar>
    <paper-icon-button icon="menu"></paper-icon-button>
    <div main-title>Title</div>
    <paper-icon-button icon="search"></paper-icon-button>
  </app-toolbar>

</body>
</html>