JSFiddle - React, Tailwind, and code Playground

by Hastig Z

HTML

<div class="info">
  <div>FIRST CLICK TO ACTIVATE THIS WINDOW</div>
  <div>press <strong>w + d</strong> for left menu</div>
  <div>press <strong>s + a</strong> for right menu</div>
</div>

<div class="menu left"><h2>Left Menu</h2>click to close</div>
<div class="menu right"><h2>Right Menu</h2>click to close</div>

CSS

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: silver;
}

.info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: center;
}

.info div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  flex: 2;
}
.info div:nth-child(1) { flex: 1; background-color: grey; opacity: 0.8; }

.menu {
  position: absolute;
  top: 0vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  transition: all 0.2s linear;
  cursor: pointer;
}
.menu.left { left: -100vw; background-color: dodgerblue; }
.menu.right { left: 100vw; background-color: orangered; }

JavaScript

// the array to add pressed keys to
var keys = [];
// listen for which key is pressed
document.addEventListener('keydown', (event) => {
	if ($.inArray(event.keyCode, keys) == -1) {
		keys.push(event.keyCode);
	}
	console.log('keys array after pressed = ' + keys);
});
// listen for which key is unpressed
document.addEventListener('keyup', (event) => {
	// the key to remove
	var removeKey = event.keyCode;
  // rmeove it
	keys = $.grep(keys, function(value) {
		return value != removeKey;
	});
	console.log('keys array after unpress = ' + keys);
});
// assign key number to a recognizable value name
var w = 87;
var d = 68;
var s = 83;
var a = 65;
// determine which keys are pressed
document.addEventListener('keydown', (event) => {
	if ($.inArray(w, keys) != -1 && $.inArray(d, keys) != -1) { // w + d
		$('.menu.left').css('left', '0vw');
    console.log('left menu opened');
  } else if ($.inArray(s, keys) != -1 && $.inArray(a, keys) != -1) { // s + a
		$('.menu.right').css('left', '0vw');
    console.log('right menu opened');
  }
})

/* **** ignore below **** */

// close menu
$('.menu').click(function() {
	$(this).removeAttr('style');
  if ($(this).hasClass('left')) {
  	console.log('left menu closed');
  } else {
  	console.log('right menu closed');
  }
})

$('.info').one('click', function() {
	$('.info div:first-child').after('<div style="flex: 1; background-color: grey; opacity: 0.7; color: gold;">ACTIVATED!</div>');
})