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="https://unpkg.com/@webcomponents/webcomponentsjs@^2.0.0/webcomponents-loader.js"></script>
  <script type="module">
    import '@polymer/font-roboto/roboto.js';
    import '@polymer/iron-icons/iron-icons.js';
    import '@polymer/paper-icon-button/paper-icon-button.js';
    import '../../app-toolbar/app-toolbar.js';
  </script>

  <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>