From d5fe9b01ebe61fa642d17079e34a60a8bb8192a4 Mon Sep 17 00:00:00 2001
From: maksim <maksim@good-production.ru>
Date: Wed, 11 Jun 2025 13:28:29 +0300
Subject: [PATCH] =?UTF-8?q?Task:6625=20|=20=D0=92=D1=8B=D0=B5=D0=B7=D0=B6?=
 =?UTF-8?q?=D0=B0=D1=8E=D1=89=D0=B5=D0=B5=20=D0=BE=D0=BA=D0=BD=D0=BE=20?=
 =?UTF-8?q?=D0=BB=D0=BE=D0=B3=D0=B8=D0=BD=D0=B0=20=D0=BF=D0=BE=D0=B2=D0=B5?=
 =?UTF-8?q?=D1=80=D1=85=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BE=D0=BA=20=D0=90?=
 =?UTF-8?q?=D0=BD=D0=B4=D1=80=D0=B5=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/assets/css/gp-style-core.css       | 10 ++++
 .../modules/layout/assets/js/gp-main.js       |  4 +-
 .../cosmopet/static/front-page/css/style.css  |  1 +
 .../cosmopet/static/front-page/js/main.js     | 48 +++++++++++++++++++
 4 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css b/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css
index ecc58c3..673e697 100644
--- a/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css
+++ b/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css
@@ -2187,4 +2187,14 @@ textarea{
 
 .about_us-title {
   font-weight: 700;
+}
+
+.modal__aside {
+    width: 20vw;
+    right: -20vw;
+    transition: right 0.3s ease;
+}
+
+.modal__aside.active {
+    right: 0;
 }
\ No newline at end of file
diff --git a/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js
index 2617242..eb7c6e0 100644
--- a/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js
+++ b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js
@@ -492,8 +492,8 @@ jQuery(document).ready(function($) {
   $('.close-btn').on('click', function(e) {
       $('.modalProfile').removeClass('active');
   });
-});
 
+});
 
 // Находим все элементы с классом login-open
 document.addEventListener('DOMContentLoaded', function() {
@@ -539,6 +539,6 @@ document.addEventListener('DOMContentLoaded', function() {
       
       // Reset styles
       modalAside.style.width = '';
-      modalAside.style.right = '0';
+      modalAside.style.right = '-30vw';
     }
 });
\ No newline at end of file
diff --git a/wp-content/themes/cosmopet/static/front-page/css/style.css b/wp-content/themes/cosmopet/static/front-page/css/style.css
index da5d648..12bdf8b 100644
--- a/wp-content/themes/cosmopet/static/front-page/css/style.css
+++ b/wp-content/themes/cosmopet/static/front-page/css/style.css
@@ -4552,6 +4552,7 @@ color: #f4f1f0;
 .modal__aside {
     position: fixed;
     transition: right 0.3s ease-in-out;
+    right: -400px;
 }
 
 .modal__aside.active {
diff --git a/wp-content/themes/cosmopet/static/front-page/js/main.js b/wp-content/themes/cosmopet/static/front-page/js/main.js
index a855796..ed0a66b 100644
--- a/wp-content/themes/cosmopet/static/front-page/js/main.js
+++ b/wp-content/themes/cosmopet/static/front-page/js/main.js
@@ -471,6 +471,54 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
+// Находим все элементы с классом login-open
+document.addEventListener('DOMContentLoaded', function() {
+    const loginButtons = document.querySelectorAll('.login-open');
+    
+    loginButtons.forEach(button => {
+      button.addEventListener('click', function(event) {
+        event.preventDefault();
+        
+        const modal = document.querySelector('.modal');
+        const modalAside = document.querySelector('.modal__aside');
+        const modalLogin = document.querySelector('.modal__login');
+        
+        modal.classList.add('active');
+        modalLogin.classList.add('active');
+        
+        // Set width and slide in from right
+        modalAside.style.width = '20vw';
+        modalAside.style.right = '0';
+      });
+    });
+    
+    const closeButtons = document.querySelectorAll('.modal-close');
+    const modal = document.querySelector('.modal');
+    
+    closeButtons.forEach(button => {
+      button.addEventListener('click', closeModal);
+    });
+    
+    modal.addEventListener('click', function(event) {
+      if (event.target === modal) {
+        closeModal();
+      }
+    });
+    
+    function closeModal() {
+      const modal = document.querySelector('.modal');
+      const modalAside = document.querySelector('.modal__aside');
+      const modalLogin = document.querySelector('.modal__login');
+      
+      modal.classList.remove('active');
+      modalLogin.classList.remove('active');
+      
+      // Reset styles
+      modalAside.style.width = '';
+      modalAside.style.right = '-30vw';
+    }
+});
+
 
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize Swiper