feat(SW-272) implemented mobile design

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css

@@ -17,103 +17,38 @@
   position: relative;
 }
 
-.megaMenu {
-  position: absolute;
-  top: var(--Spacing-x5);
-  left: 50%;
-  transform: translateX(-50%);
+.dropdown {
   background-color: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-Large);
-  box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
   z-index: var(--menu-overlay-z-index);
-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-template-areas:
-    "seeAllLink"
-    "submenus";
-  width: 600px;
   overflow: hidden;
 }
 
-.megaMenu:has(.card) {
-  width: 900px;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-areas:
-    "seeAllLink seeAllLink card"
-    "submenus submenus card";
+@media screen and (max-width: 767px) {
+  .dropdown {
+    position: fixed;
+    width: 100%;
+    top: var(--main-menu-mobile-height);
+    right: -100vw;
+    bottom: 0;
+    transition: right 0.3s;
+    overflow-y: auto;
+  }
+  .dropdown.isExpanded {
+    right: 0;
+  }
 }
 
-.seeAllLink {
-  grid-area: seeAllLink;
-  display: flex;
-  padding: var(--Spacing-x2) var(--Spacing-x3);
-  align-items: center;
-  gap: var(--Spacing-x1);
-  background-color: var(--Base-Surface-Secondary-light-Normal);
-}
-
-.submenus {
-  grid-area: submenus;
-  list-style: none;
-  display: grid;
-  gap: var(--Spacing-x5);
-  grid-template-columns: repeat(2, 1fr);
-  padding: var(--Spacing-x2) var(--Spacing-x4);
-}
-
-.submenusItem {
-  display: grid;
-  gap: var(--Spacing-x1);
-  align-content: start;
-}
-.submenusItem:first-child {
-  border-right: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-}
-
-.submenu {
-  list-style: none;
-}
-
-.submenuItem {
-  display: flex;
-}
-
-.link {
-  padding: var(--Spacing-x1) 0;
-  font-weight: var(--typography-Body-Bold-fontWeight);
-  width: 100%;
-}
-
-.megaMenu .card {
-  grid-area: card;
-  border-radius: 0;
-}
-
-.backgroundImage {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.backgroundImage::after {
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.36) 50%,
-    rgba(0, 0, 0, 0.75) 100%
-  );
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.image {
-  display: flex;
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
+@media screen and (min-width: 768px) {
+  .dropdown {
+    display: none;
+    position: absolute;
+    top: var(--Spacing-x5);
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: var(--Corner-radius-Large);
+    box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
+  }
+  .dropdown.isExpanded {
+    display: grid;
+  }
 }