implement menuHover in round

app/views/base/topnav.scala

@@ -11,7 +11,7 @@ object topnav {
   private def linkTitle(url: String, name: Frag)(implicit ctx: Context) =
     if (ctx.blind) h3(name) else a(href := url)(name)
 
-  def apply()(implicit ctx: Context) = st.nav(id := "topnav", role := "navigation")(
+  def apply()(implicit ctx: Context) = st.nav(id := "topnav", role := "navigation", cls := "hover")(
     st.section(
       linkTitle("/", frag(
         span(cls := "play")(trans.play()),

ui/common/css/header/_topnav-visible.scss

@@ -1,6 +1,3 @@
-$menu-transition: .1s linear .1s;
-$menu-transition-immediate: .1s linear;
-
 @include breakpoint($mq-topnav-visible) {
 
   .hamburger,
@@ -34,21 +31,6 @@ $menu-transition-immediate: .1s linear;
         }
       }
       .home { display: none }
-      &:hover,
-      &:active {
-        > a {
-          transition: $menu-transition-immediate;
-          height: var(--nav-section-hover);
-          background: $c-bg-header-dropdown;
-          color: $c-header-dropdown;
-          border-color: $c-primary;
-        }
-        div {
-          transition: $menu-transition;
-          visibility: visible;
-          max-height: auto;
-        }
-      }
     }
     div {
       visibility: hidden;
@@ -80,5 +62,18 @@ $menu-transition-immediate: .1s linear;
       display: block;
       margin-left: -9000px;
     }
+    &.hover section:hover,
+    section:active {
+      > a {
+        height: var(--nav-section-hover);
+        background: $c-bg-header-dropdown;
+        color: $c-header-dropdown;
+        border-color: $c-primary;
+      }
+      div {
+        visibility: visible;
+        max-height: auto;
+      }
+    }
   }
 }

ui/round/src/main.ts

@@ -10,6 +10,7 @@ import MoveOn from './moveOn';
 import { main as view } from './view/main';
 import * as chat from 'chat';
 import boot from './boot';
+import { menuHover } from 'common/menuHover';
 
 export interface RoundApi {
   socketReceive(typ: string, data: any): boolean;
@@ -20,6 +21,8 @@ export interface RoundMain {
   app: (opts: RoundOpts) => RoundApi;
 }
 
+menuHover();
+
 export function app(opts: RoundOpts): RoundApi {
 
   const patch = init([klass, attributes]);