From ff7db5aa74569b65afb8268e2749f80b055546fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C2=96=C2=96AsTroLog?= <tarasbondarenko3@gmail.com>
Date: Fri, 20 Oct 2023 13:45:27 +0000
Subject: [PATCH] create button

---
 .../Shared/NavMenu.razor                      | 30 +++++++++++--------
 .../Shared/NavMenu.razor.css                  |  1 +
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
index 5250fc0..3b82f08 100644
--- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
@@ -1,4 +1,4 @@
-<div style="@leftFrameStyle" class="left_frame">
+<div id="leftframe" class="left_frame">
 
 
     <div class="logo">
@@ -8,7 +8,7 @@
 
     <div class="menu">
 
-        <a @onclick="ChangeButtonStyle" class="button_close_menu">
+        <a id="button_close" class="button_close_menu">
             <span></span>
             <span></span>
             <span></span>
@@ -52,19 +52,25 @@
 </div>
 
 
+<script>
 
+        function changetyle() {
+            var element = document.getElementById('leftframe');
+            var computedStyles = getComputedStyle(element);
+            var transformValue = computedStyles.transform;
+
+            if (transformValue === 'matrix(1, 0, 0, 1, 0, 0)') {
+                element.style.transform = 'translateX(-110%)';
+            } else {
+                element.style.transform = 'translateX(0%)';
+            }
+        }
+
+    document.getElementById('button_close').addEventListener('click', changetyle);
+</script>
 
 @code {
-    private string leftFrameStyle = "transform: translateX(0%);";
-
-    private void ChangeButtonStyle()
-    {
-        if (leftFrameStyle.Contains("transform: translateX(0%);"))
-        {
-            leftFrameStyle = "transform: translateX(-110%);";
-        }
-    }
-
+   
 private List<Models.Wishlist> wishlist;
 
         protected override async Task OnInitializedAsync()
diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
index 79e2c0d..7d7ef76 100644
--- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
@@ -4,6 +4,7 @@
   height: 100%;
   width: 100%;
   transition: 1s;
+  transform: translateX(0%);
 }
 .logo {
   height: 5em;