make SiteSwitcher work on touch devices (#164)

assets/src/js/components/SiteSwitcher.js

@@ -4,6 +4,13 @@ import { h, Component } from 'preact';
 import { bind } from 'decko';
 
 class SiteSwitcher extends Component {
+  constructor() {
+    super();
+    this.state = {
+      isExpanded: false
+    };
+  }
+
   @bind 
   selectSite(evt) {
     let itemId = evt.target.getAttribute("data-id")  
@@ -22,6 +29,27 @@ class SiteSwitcher extends Component {
       this.props.onAdd({ id: 1, name: "New site", unsaved: true })
   }
 
+  @bind
+  expand() {
+    this.setState({
+      isExpanded: true
+    });
+  }
+
+  @bind
+  collapse() {
+    this.setState({
+      isExpanded: false
+    });
+  }
+
+  @bind
+  toggleExpanded() {
+    this.setState({
+      isExpanded: !this.state.isExpanded
+    });
+  }
+
   render(props, state) {
     // show nothing if there is only 1 site and no option to add additional sites
     if(!props.showAdd && props.sites.length == 1) {
@@ -30,7 +58,7 @@ class SiteSwitcher extends Component {
 
     // otherwise, render list of sites + add button
     return (
-        <li class="sites">
+        <li class={`sites ${state.isExpanded ? 'expanded' : ''}`} onClick={this.toggleExpanded} onMouseEnter={this.expand} onMouseLeave={this.collapse}>
             <a href="javascript:void(0)">{props.selectedSite.name}</a>
             <ul>
                 {props.sites.map((s) => (<li class="site-switch"><a href="javascript:void(0);" data-id={s.id} onClick={this.selectSite}>{s.name}</a></li>)) }

assets/src/sass/styles.scss

@@ -43,10 +43,10 @@ body { font: 400 16px "overpass", sans-serif; color: #222; text-align: center; p
   nav li.logo a:hover { color: #222; }
 
   nav li.sites { background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23533feb' d='M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z'%3E%3C/path%3E%3C/svg%3E") 97% 8px no-repeat; border-radius: 4px; padding: 8px; background-size: 10px auto; }
-  nav li.sites:hover { background: #533feb url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23fff' d='M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z'%3E%3C/path%3E%3C/svg%3E") 97% 8px no-repeat; background-size: 10px auto; }
+  nav li.sites.expanded { background: #533feb url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23fff' d='M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z'%3E%3C/path%3E%3C/svg%3E") 97% 8px no-repeat; background-size: 10px auto; }
   nav li ul { display: none; position: absolute; z-index: 1001; width: 100%; background: #533feb; border-radius: 4px; padding: 8px 0; margin: 0 0 0 -8px; }
-  nav li:hover ul { display: block; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); }
-  nav li.sites:hover a { color: #fff; }
+  nav li.expanded ul { display: block; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); }
+  nav li.sites.expanded a { color: #fff; }
   nav li ul li { padding: 0 4px; width: 100%; }
   nav li ul a { color: #ddd; display: inline-block; width: 100%; font-size: 13px; padding: 4px; }
   nav li ul a:hover { background: rgba(255,255,255,.2); border-radius: 2px; }
@@ -117,7 +117,7 @@ body { font: 400 16px "overpass", sans-serif; color: #222; text-align: center; p
     nav li { display: inline-block; position: relative; margin-right: 16px; }
     nav li.sites { width: 204px; margin-right: 0; }
     nav li.sites, nav li.settings { float: right; }
-    nav li.sites, nav li.sites:hover { background-position: 184px 8px; }
+    nav li.sites, nav li.sites.expanded { background-position: 184px 8px; }
 
     nav .date-nav li { margin-right: 8px; }
     nav li ul { width: 204px; right: 0; margin: 0;  }