diff --git a/package.json b/package.json index 3452716..056e34c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mithril-starter", - "version": "2.2.0", + "version": "2.3.0", "scripts": { "dev": "node ./build/development.js", "build": "node ./build/build.js" diff --git a/src/components/NavLink.js b/src/components/NavLink.js index f487a18..a956a76 100644 --- a/src/components/NavLink.js +++ b/src/components/NavLink.js @@ -2,7 +2,6 @@ import m from "mithril" var NavLink = { scrollToTop() { - console.log("scrolling to top") window.scrollTo(0, 0) }, @@ -21,7 +20,7 @@ var NavLink = { attrs.className = "nav-link" return ( -
  • +
  • {vnode.children}
  • ) diff --git a/src/layouts/Basic.js b/src/layouts/Basic.js index 294dcb6..e89f499 100644 --- a/src/layouts/Basic.js +++ b/src/layouts/Basic.js @@ -2,33 +2,48 @@ import m from "mithril" import NavLink from "components/NavLink"; import Link from "components/Link"; -window.onscroll = () => { - if (window.pageYOffset === 0) { - document.body.classList.remove('scrolled') - } else { - document.body.classList.add("scrolled") +export class Basic { + constructor() { + this.isScrolled = false + this.menuCollapsed = false + + this.view = this.view.bind(this) + this.handleScroll = this.handleScroll.bind(this) + this.collapseMenu = this.collapseMenu.bind(this) + + window.onscroll = this.handleScroll } -} -var menuCollapsed = 0 + handleScroll() { + if (window.pageYOffset === 0) { + if (this.isScrolled === true) { + this.isScrolled = false + m.redraw() + } + } else { + if (this.isScrolled === false) { + this.isScrolled = true + m.redraw() + } + } + } -export var Basic = { collapseMenu() { - menuCollapsed = !menuCollapsed - }, + this.menuCollapsed = !this.menuCollapsed + } view(vnode) { return (
    -
    +
    - Logo + Logo -
    +
      Home Lorem diff --git a/src/styles/main.scss b/src/styles/main.scss index b476dce..de43ffd 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -24,7 +24,7 @@ body { pointer-events: none; } -.scrolled .navbar::after { +.navbar.scrolled::after { opacity: 1; }