Master polymer component for Growth Learning

template.html

<dom-module name="growth-template">
    <link rel="import" type="css" href="growth-template.css">
    <template>
        <growth-message hidden id="message" hide-after="2500" text="{{ message.text }}" type="[[ message.type ]]"></growth-message>
        <div class="sticky-header">
            <growth-toolbar id="toolbar">
                <div class="left">
                    <div id="logo" class="logo logo--icon toolbar-logo" on-click="_handleHomeClick"></div>
                </div>
                <div class="right">
                    <div class="flex toolbar__actions">
                        <growth-menu id="menu" aligned="center">
                            <div class="trigger">
                                <button class="btn btn--small btn--secondary" href="#">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                            <div class="content">
                                <h4 class="flat">Your organisation</h4>
                                <a href="/company/add/student" data-entity="student" on-click="_handleAddClick">Invite student</a>
                                <a href="/company/add/business" data-entity="business" on-click="_handleAddClick">Invite business</a>
                                <a href="/company/add/trainer" data-entity="trainer" on-click="_handleAddClick">Add trainer</a>
                                <h4 class="flat">Your content</h4>
                                <a href="/company/add/qualification" data-entity="qualification" on-click="_handleAddClick">Add course</a>
                                <a href="/company/add/card" hidden$="{{ cardLinkHidden }}"  data-entity="card" on-click="_handleAddClick">Add learning card</a>
                            </div>
                        </growth-menu>
                        <growth-menu aligned="right" style="margin-left: 10px">
                            <div class="trigger">
                                <button class="btn btn--small btn--dark" href="#">
                                    [[ name ]]
                                    <i class="fa fa-caret-down" style="font-size: 10px; margin-left: 5px"></i>
                                </button>
                            </div>
                            <div class="content">
                                <a href="/company/pending" data-entity="student" on-click="_handleAddClick">Pending invitations</a>
                                <a href="/company/settings" data-entity="student" on-click="_handleAddClick">Settings</a>
                                <a href="/company/auth/logout" data-entity="business">Logout</a>
                            </div>
                        </growth-menu>
                    </div>
                </div>
            </growth-toolbar>
        </div>
        <div class="fullscreen clear-toolbar">
            <growth-sidebar class="sidebar" id="sidebar">
                <div class="menu-icon">
                    <i class="fa fa-navicon"></i>
                </div>
                <iron-pages class="content" selected="[[ breadcrumb.qualification.code ]]" attr-for-selected="id" id="sidebarPages">
                    <growth-qualifications
                        id="qualifications"
                        qualifications='[[ qualificationsList ]]'>
                    </growth-qualifications>
                    <template is="dom-repeat" items="[[ qualificationsList ]]" as="qual">
                        <growth-units
                            id="{{ qual.code }}"
                            on-back="_handleBack"
                            qualification="[[ qual ]]"
                            active-unit="[[ breadcrumb.unit.code ]]"
                            units="[[ qual.units ]]">
                        </growth-units>
                    </template>
                </iron-pages>
            </growth-sidebar>
            <div class="inner-content fullscreen--notoolbar relative">
                <div class="island fullscreen--notoolbar" style="position: relative">
                    <div
                        class="inner-content__header flex flex--spaced flex--aligned"
                        hidden$="{{ isHomePage }}">
                        <growth-breadcrumb
                            qualification="[[ breadcrumb.qualification ]]"
                            unit="[[ breadcrumb.unit ]]"
                            card="[[ breadcrumb.card ]]"></growth-breadcrumb>
                    </div>
                    <iron-pages id="forms" class="page" attr-for-selected="id" selected="[[ breadcrumb.page ]]">
                        <growth-view-index
                            id="index"
                            students="[[ studentsList ]]"
                            sort-by="complete">
                        </growth-view-index>
                        <growth-view-unit
                            unit="[[ breadcrumb.unit ]]"
                            cards="[[ cardsList ]]"
                            id="unit">
                        </growth-view-unit>
                        <growth-view-card
                            id="card">
                        </growth-view-card>
                    </iron-pages>
                </div>
            </div>
            <div hidden="true" id="add" class="add">
                <iron-pages id="pages" selected="[[ activeForm ]]" attr-for-selected="id">
                    <growth-student-new
                        id="addstudent"
                        businesses="[[ businessesList ]]"
                        qualifications="[[ qualificationsList ]]"
                        company="[[ name ]]">
                    </growth-student-new>
                    <growth-trainer-new
                        id="addtrainer"
                        company="[[ name ]]">
                    </growth-trainer-new>
                    <growth-business-new
                        id="addbusiness"
                        company="[[ name ]]">
                    </growth-business-new>
                    <growth-course-new
                        id="addqualification"
                        company="[[ name ]]">
                    </growth-course-new>
                    <growth-card-new
                        id="addcard"
                        company="[[ name ]]">
                    </growth-card-new>
                </iron-pages>
            </div>
            <growth-overlay
                id="overlay"
                hidden="true"
                class="overlay">
            </growth-overlay>
        </div>
        <!-- STORES -->
        <breadcrumb-store id="breadcrumbStore" all="{{ breadcrumb }}"></breadcrumb-store>
        <qualification-store id="qualificationStore" all="{{ qualificationsAll }}" list="{{ qualificationsList }}"></qualification-store>
        <card-store id="cardStore" list="{{ cardsList }}"></card-store>
        <message-store id="messageStore" message="{{ message }}"></message-store>
        <student-store id="studentStore" list="{{ studentsList }}"></student-store>
        <business-store id="businessStore" all="{{ company.businesses }}" list="{{ businessesList }}"></business-store>
    </template>
    <script>
        Polymer({
            is: "growth-template",
            properties: {
                name: String,
                company: Object,
                activeQual: String,
                activeForm: String,
                qualificationsAll: { type: Object },
                qualificationsList: { type: Array },
                studentsList: { type: Array },
                businessesList: { type: Array },
                cardsList: {
                    type: Array,
                    observer: "_cardsListChanged"
                },
                breadcrumb: {
                    type: Object,
                    value: function() {
                        return {
                            page: "index",
                            unit: {
                                code: ""
                            },
                            qualification: {
                                code: "qualifications"
                            }
                        }
                    }
                },
                isHomePage: {
                    type: String,
                    computed: "_checkForHomePage(breadcrumb.page)"
                },
                message: {
                    type: Object,
                    observer: "_messageChanged"
                },
                activeView: {
                    type: String,
                    value: "index"
                },
                // + Menu item link contextual toggling
                cardLinkHidden: {
                    type: Boolean,
                    value: true,
                    computed: "_checkForUnitPage(breadcrumb.page)"
                }
            },
            _cardsListChanged: function(change) {
                console.log(change);
            },
            _checkForHomePage: function(homepage) {
                if(homepage === "index") {
                    return true
                };
            },
            _messageChanged: function(change) {
                var self = this,
                    showFor = 2500;
                if(change.hasOwnProperty("text")) {
                    self.$.message.hidden = false;
                    setTimeout(function() {
                        self.$.message.hidden = true;
                    }, showFor)
                }
            },
            _checkForUnitPage: function(page) {
                return page != "unit";
            },
            _handleHomeClick: function(event) {
                page(app.baseUrl);
                event.preventDefault();
            },
            _handleAddClick: function(event) {
                var entity = event.target.dataset.entity;
                Ui.showAddForms(entity);
                event.preventDefault();
            },
            _checkForHiddenMenuTab: function(page, activePage) {
                if (page === activePage) {
                    return false;
                } else {
                    return true;
                }
            },
            attached: function() {
                var self = this;
                Actions.getStudents();
                document.addEventListener("keyup", function(event) {
                    if(self.$.overlay.hidden) {
                        return
                    } else if (event.keyCode === 27){
                        Ui.hideOverlay();
                        Ui.hideAddForms();
                    }
                });
            }
        });
    </script>
</dom-module>

Single Responsibility Principle, where is it? What happens if i want to change/add company? add a new page? you should probably have something around the following lines:

<template>
   <header></header>
   <content></content>
   <footer></footer>
</template>

where the content will be replaced by its implementor.