feat(components): add an Overlay component

* add useScrollbarWidth hook
* add useScrollLock hook
* add a new component to lock scroll with an overlay (it can be useful
especially on small screens to prevent background contents to be
scrolled)

1 files changed, 18 insertions, 0 deletions

diff --git a/src/components/atoms/overlay/overlay.module.scss b/src/components/atoms/overlay/overlay.module.scss
new file mode 100644
index 0000000..edbc4ae
--- /dev/null
+++ b/src/components/atoms/overlay/overlay.module.scss
@@ -0,0 +1,18 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: hsla(0, 0%, 0%, 0.6);
+  transition: all 0.3s linear 0s;
+
+  &--hidden {
+    opacity: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  &--visible {
+    opacity: 1;
+    visibility: visible;
+  }
+}