active icon styling and action

src/app/components/vertical-icons-component.js

@@ -17,7 +17,9 @@ class VerticalIconComponent {
 
   addIcon (mod) {
     let self = this
-    this.icons[mod.name] = yo`<div class="${css.icon}" onclick=${(e) => { self._iconClick(mod.name) }} title=${mod.name}><img src="${mod.icon}" alt="${mod.name}" /></div>`
+    // let idName = mod.displayName ? mod.displayName : mod.name
+    // let idName = slugify(mod.name)
+    this.icons[mod.name] = yo`<div class="${css.icon}" onclick=${(e) => { self._iconClick(mod.name) }} title=${mod.name} ><img src="${mod.icon}" alt="${mod.name}" /></div>`
     this.view.appendChild(this.icons[mod.name])
   }
 
@@ -27,12 +29,23 @@ class VerticalIconComponent {
   }
 
   select (name) {
+    let currentActive = this.view.querySelector(`.${css.active}`)
+    if (currentActive) {
+      let currentTitle = currentActive.getAttribute('title')
+      currentActive.classList.toggle(`${css.active}`)
+      if (currentTitle !== name) {
+        let activate = this.view.querySelector(`[title="${name}"]`)
+        if (activate) activate.classList.toggle(`${css.active}`)
+      }
+    } else {
+      let activate = this.view.querySelector(`[title="${name}"]`)
+      if (activate) activate.classList.toggle(`${css.active}`)
+    }
     this.event.emit('showContent', name)
   }
 
   _iconClick (name) {
-    // called when an icon has been clicked
-    this.event.emit('showContent', name)
+    this.select(name)
   }
 
   render () {
@@ -53,9 +66,20 @@ const css = csjs`
   }
   .icon      {
     cursor: pointer;
-    margin-bottom: 25px;
+    margin-bottom: 12px;
+    width: 36px;
+    height: 36px;
+    padding: 3px;
   }
   .icon img {
-    width: 25px;
+    width: 28px;
+    height: 28px;
+    padding: 4px;
   }
+  .icon.active {
+    border: solid 3px hsla(229, 75%, 87%, 1);
+    border-radius: 8px;
+    padding-top: 1px;
+    padding-left: 1px;
+}
 `