feat(SW-184): my pages menu mobile/desktop functionality

2024-08-23 13:25:41 +02:00
parent 7ef7b4a544
commit bdec054ecd
22 changed files with 459 additions and 226 deletions
--- a/components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css
+++ b/components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css
@@ -0,0 +1,38 @@
+@keyframes slide-in {
+  from {
+    right: -100vw;
+  }
+
+  to {
+    right: 0;
+  }
+}
+
+.modal {
+  position: fixed;
+  top: var(--main-menu-mobile-height);
+  right: auto;
+  bottom: 0;
+  width: 100%;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  transition: right 0.3s;
+}
+
+.modal[data-entering] {
+  animation: slide-in 0.3s;
+}
+.modal[data-exiting] {
+  animation: slide-in 0.3s reverse;
+}
+
+.dialog {
+  height: 100%;
+  overflow-y: auto;
+}
+
+@media screen and (min-width: 767px) {
+  .myPagesMobileMenu,
+  .modal {
+    display: none;
+  }
+}