notifications-model.js

var notifications = {
    notifications: ["TEST"],
    addNotification(text) {
        this.notifications.push(text)
    }
}

module.exports =  notifications 

notifications.js

var m = require("mithril")
var model = require("./models/notifications")
var component = require("./components/notifications")
require("../../scss/modules/_notifications.scss")
module.exports = {
    view(vnode) {
        return m(".notifications", {
                key: "notifications"
            },
            model.notifications.map((text, id) => m('.notifications__item', {
                key: id,
            }, text))
        )
    }
}

notifications.scss

@import '../utils/_index.scss';
@keyframes notification {
    // 0% {
    //     margin-top: 0;
    //     opacity: 0;
    //     height: auto;
    //     visibility: visible;
    //     padding: $element-spacing;
    // }
    0% {
        margin-top: $element-spacing;
        opacity: 1;
        height: auto;
        visibility: visible;
        padding: $element-spacing;
    }
    90% {
        margin-top: $element-spacing;
        opacity: 1;
        height: auto;
        visibility: visible;
        padding: $element-spacing;
    }
    93% {
        margin-top: $element-spacing;
        opacity: 0;
        height: auto;
        visibility: visible;
        padding: $element-spacing;
    }
    98% {
        margin-top: 0;
        opacity: 0;
        height: 0;
        padding: 0;
    }
    100% {
        margin-top: 0;
        opacity: 0;
        height: 0;
        padding: 0;
        visibility: hidden;
    }
}

.notifications {
    position: fixed;
    top: 61px;
    left: 0;
    right: 0;
    z-index: 3000;
    &__item {
        opacity: 0;
        height: 0;
        visibility: hidden;
        animation-name: notification;
        animation-duration: 10s;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        background-color: #2b3644;
        color: white;
    }
}

pagecarcass.js

var m = require("mithril")
var FooterComponent = require("./FooterComponent")
var HeaderComponent = require("./HeaderComponent")
var SideMenuComponent = require("./components/SideMenuComponent")
var SearchModel = require("../search/models/SearchModel")
var notifications = require("../notifications/notifications")
require("../../scss/modules/_container.scss")
require("../../scss/modules/_main.scss")
var constructPageClass = (attrs) => {
  var classes = []
  if (attrs.route == "mainpage") classes.push("mainpage")
  if (attrs.fullScreen == true) classes.push("fullscreen")
  return classes.join(" ")
}
module.exports = {
  view(vnode) {
    return m(".wrapper", {
      class: constructPageClass(vnode.attrs)
    }, [
    m(notifications),    
      m(".page-wrap", {
        class: m.route.get() == '/search/object-rent' || m.route.get() == '/search/object-sale' || m.route.get() == '/search/apartment-complex' ? "hide-footer" : ""
      }, [
        m(HeaderComponent, {
          route: vnode.attrs.route
        }),
        m(".site-header-spacer"),
        m(SideMenuComponent, {
          route: vnode.attrs.route
        }),
        m(".main",
          m(".topmain",
            vnode.attrs.content
          )
        ),
      ]),
      m(FooterComponent)
    ])
  }
}