cowbell-home.html

<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-media-query/iron-media-query.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">

<dom-module id="cowbell-home">
    <template>
        <style>
            body {
                margin: 0;
                font-family: 'Roboto', 'Noto', sans-serif;
                -webkit-font-smoothing: antialiased;
                background: #f1f1f1;
            }

            app-toolbar {
                background-color: #4285f4;
                color: #fff;
            }

            paper-icon-button + [main-title] {
                margin-left: 24px;
            }

            app-header {
                @apply(--layout-fixed-top);
                color: #fff;
                --app-header-background-rear-layer: {
                    background-color: #ef6c00;
                };
                -webkit-app-region: drag;
            }

            input[type="submit"],
            input[type="reset"],
            input[type="button"],
            input[type="text"],
            button,
            paper-icon-button,
            textarea {
                -webkit-app-region: no-drag;
            }

            sample-content {
                padding-top: 64px;
            }

            .main-header {
                box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
            }

            paper-tabs {
                --paper-tabs-selection-bar-color: black;
                height: 100%;
                max-width: 640px;
            }

            paper-tab {
                --paper-tab-ink: #aaa;
                text-transform: uppercase;
            }

            [hidden] {
                display: none !important;
            }
        </style>

        <app-drawer-layout force-narrow>
            <app-drawer id="drawer">
                <app-toolbar></app-toolbar>

                <!-- Nav on mobile: side nav menu -->
                <paper-menu selected="{{selected}}" attr-for-selected="name">
                    <template is="dom-repeat" items="{{items}}">
                        <paper-item name="{{item}}">{{item}}</paper-item>
                    </template>
                </paper-menu>
            </app-drawer>

            <app-header-layout>
                <app-header class="main-header">
                    <app-toolbar>
                        <paper-icon-button class="menu-button" icon="menu" drawer-toggle hidden$="{{wideLayout}}"></paper-icon-button>
                        <h3 main-title>Cowbell Bot</h3>
                        <paper-icon-button icon="remove" id="title-min" on-click="windowMin"></paper-icon-button>
                        <paper-icon-button icon="check-box-outline-blank" id="title-max" on-click="windowMax"></paper-icon-button>
                        <paper-icon-button icon="close" id="title-close" on-click="windowClose"></paper-icon-button>
                    </app-toolbar>
                    <app-toolbar class="tabs-bar" hidden$="{{!wideLayout}}">
                        <!-- Nav on desktop: tabs -->
                        <paper-tabs selected="{{selected}}" attr-for-selected="name">
                            <template is="dom-repeat" items="{{items}}">
                                <paper-tab name="{{item}}">{{item}}</paper-tab>
                            </template>
                        </paper-tabs>
                    </app-toolbar>
                </app-header>
            </app-header-layout>
        </app-drawer-layout>

        <iron-media-query query="min-width: 600px" query-matches="{{wideLayout}}"></iron-media-query>
    </template>
    <script>
        const {BrowserWindow} = require('electron').remote
        Polymer({
            is: 'cowbell-home',
            properties: {
                selected: {
                    type: String,
                    value: 'Dashboard'
                },
                wideLayout: {
                    type: Boolean,
                    value: false,
                    observer: 'onLayoutChange',
                },
                items: {
                    type: Array,
                    value: function () {
                        return ['Dashboard'];
                    }
                }
            },
            onLayoutChange: function (wide) {
                var drawer = this.$.drawer;
                if (wide && drawer.opened) {
                    drawer.opened = false;
                }
            },
            windowMin: function () {
                var window = BrowserWindow.getFocusedWindow();
                window.minimize();
            },
            windowMax: function () {
                var window = BrowserWindow.getFocusedWindow();
                if (window.isMaximized()) {
                    window.unmaximize();
                } else {
                    window.maximize();
                }
            },
            windowClose: function () {
                var window = BrowserWindow.getFocusedWindow();
                window.close();
            }
        });
    </script>
</dom-module>