2.3.0 (#4)

Cosmetic changes

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"

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 (
-      <li className={"nav-item" + (m.route.get() == attrs.href ? " active" : "")}>
+      <li className={"nav-item" + (m.route.get() === attrs.href ? " active" : "")}>
         <a {...attrs}>{vnode.children}</a>
       </li>
     )

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 (
       <div>
-        <div className="navbar navbar-expand-md navbar-dark fixed-top bg-success" key={"navbar"}>
+        <div className={"navbar navbar-expand-md navbar-dark fixed-top bg-success" + (this.isScrolled ? " scrolled" : "")} key={"navbar"}>
           <div className="container">
-            <Link href="/" className="navbar-brand">Logo</Link>
+            <Link to="/" className="navbar-brand">Logo</Link>
 
             <button className="navbar-toggler" onclick={this.collapseMenu}>
               <span className="navbar-toggler-icon"> </span>
             </button>
 
-            <div className={"collapse navbar-collapse" + (menuCollapsed ? " show" : "")}>
+            <div className={"collapse navbar-collapse" + (this.menuCollapsed ? " show" : "")}>
               <ul className="navbar-nav ml-auto">
                 <NavLink to="/">Home</NavLink>
                 <NavLink to="/lorem-ipsum">Lorem</NavLink>

src/styles/main.scss

@@ -24,7 +24,7 @@ body {
     pointer-events: none;
 }
 
-.scrolled .navbar::after {
+.navbar.scrolled::after {
     opacity: 1;
 }