Vue Component to Dim Screen

Example.vue

<template>
  <!-- Example Usage -->
  <div class="menu">
    <ScreenDimmer :visible="menuOpen" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuOpen: false
    }
  }
}
</script>

ScreenDimmer.vue

<template>
  <div
    class="fixed pin z-1 bg-black ts"
    :class="[visible ? 'opacity-75' : 'opacity-0 pointer-events-none']"
  ></div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
  },
}
</script>

The classes used in this example component are based on tailwindCSS