crdx/chopsui/chops-header.html

<link rel="import" href="../polymer/polymer.html">

<dom-module id="chops-header">
  <template>
    <style>
      :host {
        --chops-header-text-color: inherit;
        color: var(--chops-header-text-color);
        box-sizing: border-box;
        background: #dce5f8;
        font-size: 14px;
        width: 100%;
        height: 50px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        z-index: 100;
      }
      #headerTitle {
        font-size: 18px;
        display: flex;
        align-items: center;
        @apply --chops-header-title-theme;
      }
      #headerTitle a {
        color: var(--chops-header-text-color);
        text-decoration: none;
      }
      #headerTitle a:hover {
        text-decoration: underline;
      }
      #headerTitle img {
        height: 32px;
        width: 32px;
        font-size: 10px;
        overflow: hidden;
      }
      #headerTitle small {
        font-size: 14px;
      }
      #headerTitleText {
        display: flex;
        align-items: baseline;
      }
      #headerTitleTextMain {
        padding: 0 8px;
      }
      .header-section {
        padding: 0.5em 16px;
        display: flex;
        align-items: center;
      }
      @media (max-width: 840px) {
        .header-section {
          font-size: 0.8em;
          min-width: 10%;
          text-align: left;
        }
      }
    </style>
    <div class="header-section">
      <slot name="before-header"></slot>
      <div id="headerTitle">
        <template is="dom-if" if="[[logoSrc]]">
          <a href="/">
            <img src$="[[logoSrc]]" alt$="[[appTitle]] Logo" title$="[[appTitle]] Logo" />
          </a>
        </template>
        <span id="headerTitleText">
          <a id="headerTitleTextMain" href="/">
            [[appTitle]]
          </a>
          <small>
            <slot name="subheader"></slot>
          </small>
        </span>
      </div>
    </div>
    <div class="header-section">
      <slot></slot>
    </div>
  </template>
  <script>
    'use strict';

    /**
     * `chops-header` is a shared header element for ChOps frontends to use.
     *
     * This element contains two slots for clients to add content. The default
     * slot holds content in the header section to the right of the title. And
     * the 'subheader' slot holds content which appears next to the title.
     *
     *
     * @customElement
     * @polymer
     * @demo /demo/chops-header_demo.html
     */
    class ChopsHeader extends Polymer.Element {

      static get is() {
        return 'chops-header';
      }

      static get properties() {
        return {
          /* String for the title of the application. */
          appTitle: {
            type: String,
            value: 'Chops App',
          },
          /* The home URL for the application. Defaults to '/'. */
          homeUrl: {
            type: String,
            value: '/',
          },
          /* URL for the image location of the application's logo. No logo is
           * shown if this is not specified. */
          logoSrc: String,
        };
      }
    }

    customElements.define(ChopsHeader.is, ChopsHeader);
  </script>
</dom-module>