Riot adaptable menu

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.2.2/riot+compiler.min.js"></script>
<riot-menu></riot-menu>
<div style="position:absolute;top:20%;left:30%;width:30%;height:40%; background-color:#f20;color:white">Must be hidden when left Menu</div>
<script type="riot/tag">
    <riot-menu>
        <menuIcon id='menuIcon' onclick={showMenuLat}>
            <svg xmlns='http://www.w3.org/2000/svg' width='18px' height='16px' viewBox='0 0 18 16' fill='white'>
                <rect width='18' height='3'/>
                <rect y='6' width='18' height='3'/>
                <rect y='12' width='18' height='3'/>
            </svg>
        </menuIcon>
        <label id="menuOverlay"  onclick={showMenuLat}></label>
        <menuContainer id="menuContainer" class="noselect">
            <ul>
                <li class={noselect:true,focused:this.selected==i} 
                each={ item, i in opts.items } 
                onclick={this.parent.click} >{ item.text }</li>
            </ul>
        </menuContainer>
        <p class='noselect'>{opts.items[this.selected].text}</p>
        
       this.selected=0
       // Para escuchar los eventos del menu
       this.mixin('gestorMixin') 
        
       click(e){
        if(this.selected!=e.item.i){
            this.selected=e.item.i;
            this.trigger('pageChange')
        }
        this.showMenuLat()
       }
        
        showMenuLat(e){
          $(this.menuContainer).toggleClass('showMenu');
          $(this.menuOverlay).toggleClass('showOverlay')
        }
    </riot-menu>
</script>

CSS

html, body 
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background:#888;
    font-family:Arial;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*** MENU ***/
riot-menu{
    position: fixed;
    height:40px;
    width:100%;
    top:0px;
    z-index:1;
    overflow: hidden;
}

riot-menu menuContainer{
    float:left;
    display:inline-block;
    margin: 0px;
    transition:0.3s;
    overflow-x: hidden;
}
/** hide scrollbars */
riot-menu menuContainer::-webkit-scrollbar {
display: none;
}

riot-menu  ul{
    list-style:none;
    display: inline-block;
    margin-top:10px;
}

riot-menu  ul li{
    display: inline-block;
    padding: 10px 20px;
    cursor:pointer;
    background-color:#eee;
    color:#7B8585;
    
    transition:0.3s;
}

riot-menu  ul li:hover{
    background-color:#ACCFEE;
}

riot-menu  ul li.focused{
    color:#fff;
    background-color:#418BC7;
}

riot-menu p{
    padding-top:12px;
    font-size:12px;
    color:white;
    margin:0px 20px;
    font-size:20px;
    font-family:Verdana, Geneva, sans-serif;
    text-align: center;
}

menuIcon{display:none; cursor:pointer;z-index: 1011;}

#menuOverlay {
    position: fixed;
    top: 0px;
    left: 0px;
    display: inline-block;
    height: 100%;
    width: 0px;
    background:rgba(10,10,10,0.4);
}

 @media  (max-width: 600px) {
#menuOverlay.showOverlay{ width: 100%;}

menuIcon {
   display:inline-block;
   width:18px;
   height:16px; 
    margin:6px;
    color:white;
    position:absolute;
     }

     riot-menu{
         background:#418BC7;
     }
 
    riot-menu p {
        display:block;
        padding-top:6px;
    }

    riot-menu menuContainer{ 
      background: #aaa;
      font-family: Arial, Helvetics, sans-serif;
      width: 140px;
      height: 100%;
      padding:0px;
      top: 0;
     ...

JavaScript

var gestorMixin = {
    //INIT: inserta funciones en Componentes
    //nos desacoplamos del componente.
    init: function() {
      this.on('pageChange', function() { 
          console.log('pageChanged',this);
      });
    }
}

riot.mixin('gestorMixin',{});
riot.mixin('gestorMixin',gestorMixin);

riot.mount('riot-menu',
           {items:[{id:'page1',text:'page1',url:'#1'},
                   {id:'page2',text:'page2',url:'#2'},
                   {id:'page3',text:'page3',url:'#3'}]});



/*
function changePage(num){
    riot.mount('#main','riot-page'+num,
           {titulo:'titulo página'+num});
}
*/