From 08a2e32a5d29cd5708635091fa1cec3b9a3710f3 Mon Sep 17 00:00:00 2001
From: ismsahib <ismayilov.sahib.na@gmail.com>
Date: Wed, 15 Mar 2023 22:44:36 +0300
Subject: [PATCH] menu with video

---
 src/components/Menu/index.tsx     |  5 +++++
 src/components/Menu/styles.m.scss | 35 ++++++++++++++++++++++++++-----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 7682595..4b12101 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -30,6 +30,11 @@ const Menu = ({ items, setActive, active }: MenuPropsType) => {
 
   return (
     <div className={active ? `${styles.menu} ${styles.active}` : styles.menu} onClick={() => setActive(false)}>
+      <div className={styles.introContainer}>
+        <video className={styles.video} autoPlay muted playsInline loop>
+          <source src="https://stackforce.website.yandexcloud.net/intro.mp4" type="video/mp4" />
+        </video>
+      </div>
       <div className={styles.header}>
         <SendFormButton />
         <div onClick={() => setActive(false)} className={styles.closeBtn}>
diff --git a/src/components/Menu/styles.m.scss b/src/components/Menu/styles.m.scss
index a7e81cd..6fa35c3 100644
--- a/src/components/Menu/styles.m.scss
+++ b/src/components/Menu/styles.m.scss
@@ -1,5 +1,34 @@
 @import '../../styles/vars.scss';
 
+.introContainer {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+}
+
+.introContainer::after {
+  content: '';
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(40px);
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.video {
+  width: 100vw;
+  height: 100vh;
+  object-fit: cover;
+}
+
 .menu {
   display: flex;
   align-items: center;
@@ -8,15 +37,11 @@
   width: 100vw;
   height: 100vh;
   right: 0;
-  z-index: 2;
-  background: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(50px);
-  -webkit-backdrop-filter: blur(50px);
+  z-index: 3;
   user-select: none;
   transform: translateX(100%);
   transition: 0.5s;
   .header {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
     position: fixed;
     top: 0;
     width: 100%;