feat: add side menu container

Author: SidonieBouthors

app/src/components/NavigationBar.tsx

@@ -44,10 +44,12 @@ function SideMenu({
         onClick={toggle}
       />
       <div
-        className={styles.sideMenu + " " + (className || "")}
+        className={styles.sideMenuContainer}
         style={{ display: visible ? "flex" : "none" }}
       >
-        {children}
+        <div className={styles.sideMenu + " " + (className || "")}>
+          {children}
+        </div>
       </div>
     </>
   );

app/src/styles/NavigationBar.module.scss

@@ -117,26 +117,42 @@
       align-items: center;
     }
 
-    .sideMenu {
-      @extend .glass;
-
-      position: absolute;
-      flex-direction: column;
-      width: 60vw;
+    .sideMenuContainer {
+      position: fixed;
+      justify-content: end;
+      width: 100vw;
       height: 100vh;
 
       right: 0;
       top: 3em;
       bottom: 0;
-      padding: 1em;
-      border-radius: 5px;
 
-      .sidemenuItem {
-        margin: 0.5em 0em 0.5em 1em;
-      }
+      pointer-events: none;
+
+      .sideMenu {
+        @extend .glass;
+
+        display: flex;
+        flex-direction: column;
+        width: 60%;
+
+        padding: 1em;
+        border-radius: 5px;
+
+        float: right;
+
+        .sidemenuItem {
+          margin: 0.5em 0em 0.5em 1em;
+        }
+
+        .sidemenuHead {
+          align-self: flex-end;
+        }
 
-      .sidemenuHead {
-        align-self: flex-end;
+        @media (min-width: 50rem) {
+          display: none !important;
+          position: absolute !important;
+        }
       }
     }
   }