1 files changed, 40 insertions, 9 deletions

diff --git a/examples/demos/src/main/scala/scrollmenu/Controller.scala b/examples/demos/src/main/scala/scrollmenu/Controller.scala
index de120c6..132a073 100644
--- a/examples/demos/src/main/scala/scrollmenu/Controller.scala
+++ b/examples/demos/src/main/scala/scrollmenu/Controller.scala
@@ -28,29 +28,60 @@ object Controller{
     val snippets = dom.document.getElementsByClassName("highlight-me")
 
     snippets.foreach(js.Dynamic.global.hljs.highlightBlock(_))
-
     val scrollSpy = new ScrollSpy(structure, main)
+    val list = ul(cls:="menu-item-list collapsed")(
+      scrollSpy.domTrees.map(_.value.frag)
+    ).render
+
+    def updateScroll() = scrollSpy(main.scrollTop + main.clientHeight)
+    val expandIcon = i(cls:="fa fa-caret-down").render
+    val expandLink =
+      a(
+        expandIcon,
+        href:="javascript:",
+        marginLeft:="0px",
+        paddingLeft:="15px",
+        paddingRight:="15px",
+        cls:="pure-menu-selected",
+        onclick := { (e: dom.Event) =>
+          expandIcon.classList.toggle("fa-caret-down")
+          expandIcon.classList.toggle("fa-caret-up")
+          list.classList.toggle("collapsed")
+          scrollSpy.clean = !scrollSpy.clean
+          updateScroll()
+        }
+      ).render
+
 
     menu.appendChild(
-      div(cls:="pure-menu  pure-menu-open")(
-        a(cls:="pure-menu-heading", href:="#")(
-          "Contents"
-        ),
+      div(
+        zIndex:=10,
+        position:="absolute",
+        cls:="pure-menu pure-menu-open",
         ul(cls:="menu-item-list")(
-          scrollSpy.domTrees.map(_.value.frag)
+          li(
+            width:="43px",
+            float:="right",
+            expandLink
+          )
         )
       ).render
     )
 
+    menu.appendChild(
+      div(cls:="pure-menu  pure-menu-open")(
+        list
+      ).render
+    )
+
     menuLink.onclick = (e: dom.MouseEvent) => {
       layout.classList.toggle("active")
       menu.classList.toggle("active")
       menuLink.classList.toggle("active")
     }
 
-    main.onscroll = (e: dom.UIEvent) => {
-      scrollSpy(main.scrollTop + main.clientHeight)
-    }
+    main.onscroll = (e: dom.UIEvent) => updateScroll()
+    updateScroll()
   }
 
 }