icatalina/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>my jade template</title>
  <style id="jsbin-css">
html,
body {
  height: 100%;
  font-family: sans-serif;
  font-size: 14px;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid #B3B0B0;
}

ul:last-child {
  border-bottom: 0;
}

li {
  padding: .3em 0;
}

a {
  padding: .2em 1.5em;
  display: block;
  cursor: default;
}

a:hover {
  background: #2335E4;
  color: #fff;
}

dialog:not([open]) {
  display: block;
  visibility: hidden;
  opacity: 0;
}

dialog {
  right: initial;
  transition: opacity .3s, visibility .3s;
  opacity: 1;
  visibility: visible;
  display: block;
  border: 0;
  padding: 0;
  background: rgba(236, 236, 236, 0.95);
  border-radius: .3em;
  overflow: hidden;
  box-shadow: 0 .2em .8em rgba(0, 0, 0, .2);
}

.text {
  width: 50%;
  height: 100%;
  background: black;
}
</style>
</head>
  <body>
    <div class="text"></div>
    <dialog>
      <ul class="content">
        <li><a>New Folder</a></li>
      </ul>
      <ul class="content">
        <li><a>Get Info</a></li>
      </ul>
      <ul class="content">
        <li><a>Change Desktop Background</a></li>
        <li><a>Clean Up</a></li>
        <li><a>Clean Up By</a></li>
        <li><a>Sort By</a></li>
        <li><a>Show View Options</a></li>
      </ul>
    </dialog>
  <script id="jsbin-javascript">
var dialog = document.querySelector('dialog');
var body = document.body;

body.addEventListener('contextmenu', openContext);

function openContext(event) {
  event.preventDefault();

  if (dialog.open) {
    dialog.close();
    body.removeEventListener('mousedown', openContext);
  } else {
   dialog.style.top = `${event.clientY}px`;
   dialog.style.left = `${event.clientX}px`;

   dialog.show();
   body.addEventListener('mousedown', openContext);
  }
}

</script>


<script id="jsbin-source-css" type="text/css">html,
body {
  height: 100%;
  font-family: sans-serif;
  font-size: 14px;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid #B3B0B0;
}

ul:last-child {
  border-bottom: 0;
}

li {
  padding: .3em 0;
}

a {
  padding: .2em 1.5em;
  display: block;
  cursor: default;
}

a:hover {
  background: #2335E4;
  color: #fff;
}

dialog:not([open]) {
  display: block;
  visibility: hidden;
  opacity: 0;
}

dialog {
  right: initial;
  transition: opacity .3s, visibility .3s;
  opacity: 1;
  visibility: visible;
  display: block;
  border: 0;
  padding: 0;
  background: rgba(236, 236, 236, 0.95);
  border-radius: .3em;
  overflow: hidden;
  box-shadow: 0 .2em .8em rgba(0, 0, 0, .2);
}

.text {
  width: 50%;
  height: 100%;
  background: black;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var dialog = document.querySelector('dialog');
var body = document.body;

body.addEventListener('contextmenu', openContext);

function openContext(event) {
  event.preventDefault();

  if (dialog.open) {
    dialog.close();
    body.removeEventListener('mousedown', openContext);
  } else {
   dialog.style.top = `${event.clientY}px`;
   dialog.style.left = `${event.clientX}px`;

   dialog.show();
   body.addEventListener('mousedown', openContext);
  }
}
</script></body>
</html>

## jsbin.kubaqacasa.css
html,
body {
  height: 100%;
  font-family: sans-serif;
  font-size: 14px;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid #B3B0B0;
}

ul:last-child {
  border-bottom: 0;
}

li {
  padding: .3em 0;
}

a {
  padding: .2em 1.5em;
  display: block;
  cursor: default;
}

a:hover {
  background: #2335E4;
  color: #fff;
}

dialog:not([open]) {
  display: block;
  visibility: hidden;
  opacity: 0;
}

dialog {
  right: initial;
  transition: opacity .3s, visibility .3s;
  opacity: 1;
  visibility: visible;
  display: block;
  border: 0;
  padding: 0;
  background: rgba(236, 236, 236, 0.95);
  border-radius: .3em;
  overflow: hidden;
  box-shadow: 0 .2em .8em rgba(0, 0, 0, .2);
}

.text {
  width: 50%;
  height: 100%;
  background: black;
}

## jsbin.kubaqacasa.js
var dialog = document.querySelector('dialog');
var body = document.body;

body.addEventListener('contextmenu', openContext);

function openContext(event) {
  event.preventDefault();

  if (dialog.open) {
    dialog.close();
    body.removeEventListener('mousedown', openContext);
  } else {
   dialog.style.top = `${event.clientY}px`;
   dialog.style.left = `${event.clientX}px`;

   dialog.show();
   body.addEventListener('mousedown', openContext);
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>my jade template</title>
	<style id="jsbin-css">
	html,
	body {
	height: 100%;
	font-family: sans-serif;
	font-size: 14px;
	}

	ul {
	padding: 0;
	margin: 0;
	list-style: none;
	border-bottom: 1px solid #B3B0B0;
	}

	ul:last-child {
	border-bottom: 0;
	}

	li {
	padding: .3em 0;
	}

	a {
	padding: .2em 1.5em;
	display: block;
	cursor: default;
	}

	a:hover {
	background: #2335E4;
	color: #fff;
	}

	dialog:not([open]) {
	display: block;
	visibility: hidden;
	opacity: 0;
	}

	dialog {
	right: initial;
	transition: opacity .3s, visibility .3s;
	opacity: 1;
	visibility: visible;
	display: block;
	border: 0;
	padding: 0;
	background: rgba(236, 236, 236, 0.95);
	border-radius: .3em;
	overflow: hidden;
	box-shadow: 0 .2em .8em rgba(0, 0, 0, .2);
	}

	.text {
	width: 50%;
	height: 100%;
	background: black;
	}
	</style>
	</head>
	<body>
	<div class="text"></div>
	<dialog>
	<ul class="content">
	<li><a>New Folder</a></li>
	</ul>
	<ul class="content">
	<li><a>Get Info</a></li>
	</ul>
	<ul class="content">
	<li><a>Change Desktop Background</a></li>
	<li><a>Clean Up</a></li>
	<li><a>Clean Up By</a></li>
	<li><a>Sort By</a></li>
	<li><a>Show View Options</a></li>
	</ul>
	</dialog>
	<script id="jsbin-javascript">
	var dialog = document.querySelector('dialog');
	var body = document.body;

	body.addEventListener('contextmenu', openContext);

	function openContext(event) {
	event.preventDefault();

	if (dialog.open) {
	dialog.close();
	body.removeEventListener('mousedown', openContext);
	} else {
	dialog.style.top = `${event.clientY}px`;
	dialog.style.left = `${event.clientX}px`;

	dialog.show();
	body.addEventListener('mousedown', openContext);
	}
	}

	</script>


	<script id="jsbin-source-css" type="text/css">html,
	body {
	height: 100%;
	font-family: sans-serif;
	font-size: 14px;
	}

	ul {
	padding: 0;
	margin: 0;
	list-style: none;
	border-bottom: 1px solid #B3B0B0;
	}

	ul:last-child {
	border-bottom: 0;
	}

	li {
	padding: .3em 0;
	}

	a {
	padding: .2em 1.5em;
	display: block;
	cursor: default;
	}

	a:hover {
	background: #2335E4;
	color: #fff;
	}

	dialog:not([open]) {
	display: block;
	visibility: hidden;
	opacity: 0;
	}

	dialog {
	right: initial;
	transition: opacity .3s, visibility .3s;
	opacity: 1;
	visibility: visible;
	display: block;
	border: 0;
	padding: 0;
	background: rgba(236, 236, 236, 0.95);
	border-radius: .3em;
	overflow: hidden;
	box-shadow: 0 .2em .8em rgba(0, 0, 0, .2);
	}

	.text {
	width: 50%;
	height: 100%;
	background: black;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var dialog = document.querySelector('dialog');
	var body = document.body;

	body.addEventListener('contextmenu', openContext);

	function openContext(event) {
	event.preventDefault();

	if (dialog.open) {
	dialog.close();
	body.removeEventListener('mousedown', openContext);
	} else {
	dialog.style.top = `${event.clientY}px`;
	dialog.style.left = `${event.clientX}px`;

	dialog.show();
	body.addEventListener('mousedown', openContext);
	}
	}
	</script></body>
	</html>