JSFiddle - React, Tailwind, and code Playground

Drawer Example with Filter/Autocomplete

by nilloc

HTML

<editor>
  <drawer>
    <searchbar class="control">
      <input type="search" value="cont"><button>Search</button>
    </searchbar>
    <tabbar>
      <tab class="motor">motor<bg></bg></tab>
      <tab class="output">output</tab>
      <tab class="input">input</tab>
      <tab class="control active">control</tab>
      <tab class="variables">variables<bg></bg></tab>
    </tabbar>
<!--     <snippets class="control active">
      <snippet>do while     <note>{…}</note></snippet>
      <snippet>for          <note>{…}</note></snippet>
      <snippet>if else      <note>{…}</note></snippet>
      <snippet>switch case  <note>{…}</note></snippet>
      <snippet>while        <note>{…}</note></snippet>
    </snippets> -->
  </drawer>
</editor>

SCSS

$search-height:32px;
$tabbar-height:64px;
html{
  font-family:Helvetica;
}
*{
  box-sizing:border-box;
}
editor, drawer, tab, tabbar, searchbar, snippets{
  display:block;
}

editor{
  border:1px solid gray;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#ccc;
  
  drawer{
    background:white;
    border-right:1px solid gray;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:240px;
    
    searchbar{
      position:relative;
      left:0;
      top:0;
      width:100%;
      padding:6px;
      color:white;
      width:100%;
    }
    
    tabbar{
      position:relative;
      left:0;
      background:#ccc;
      width:100%;
      height:$tabbar-height;
      overflow:hidden;
      border-bottom:1xp solid darkgray;
      
      tab{
        color:white;
        text-align:center;
        background:darkgray;
        border:none;
        height:30px;
        line-height:30px;
        text-transform:capitalize;
        /* padding-left:30px; */
        top:18px;
        transform:rotate(45deg);
        position:absolute;
        width:130px;
        user-select:none;
        cursor:pointer;
        opacity: 0.5;
        
        &:hover, &.active {
          opacity: 1; 
        }
      }
    }
    
    snippets{
      display:none;
      position:relative;
      bottom:0;
      left:0;
      width:100%;
      padding:6px;
      overflow:auto;
      
      &.active{
        display:block;
      }
      
      snippet{
        display:block;
        background:white;
        border-radius:4px;
        padding:6px;
        position:relative;
        margin-bottom:1px;
        
        note{
          position:absolute;
          top:3px;
          right:3px;
          background:#999;
          border-radius:20px;
          color:white;
          padding:3px 5px;
        }
      }
    }
  }
}


tab{
  $left-offset:32px;
  &.motor{
    left:(42)*4 - $left-offset;
    bg{
      background:darkgray;
     ...

JavaScript

var activeCategory= "control";
var categories = [
	{ name:"variables",
  	color:"orangered",
    snippets:[
      {name:"myInt", note:"int:31"},
      {name:"myString", note:"string:\"collin\""},
      {name:"mySound", note:"sound"},
    ]
  },
	{ name:"control",
  	color:"orange",
    snippets:[
      {name:"do while", note:"{…}"},
      {name:"for", note:"{…}"},
      {name:"if else", note:"{…}"},
      {name:"switch case", note:"{…}"},
      {name:"while", note:"{…}"}
    ]
  },
  { name:"input",
  	color:"purple",
    snippets:[
      {name:"isRunning", note:"bool"}
    ]
  },
  { name:"output",
  	color:"purple",
    snippets:[
      {name:"playSound", note:"sound"}
    ]
  },
    { name:"motor",
  	color:"darkgray",
    snippets:[
      {name:"playSound", note:"sound"}
    ]
  }
]

$(function(){
	for(var cat in categories){
    var $snippets = $('<snippets class="'+categories[cat].name+'"/>');
		$('drawer').append($snippets);
    if(categories[cat].name === activeCategory){
    	$snippets.addClass('active');
    }
    
    for(var snip in categories[cat].snippets){
    	var snippet = categories[cat].snippets[snip];
      var $snippet = $('<snippet>'+snippet.name+' <note>'+snippet.note+'</note></snippet>');
      $snippets.append($snippet);
    }
  }
});

$('searchbar input[type=search]').on("input", function(){
	console.log('changed:', this.value);
});