From 1656f1096707a94f9f15af7c9334951514b667dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C2=96=C2=96AsTroLog?= <tarasbondarenko3@gmail.com>
Date: Fri, 20 Oct 2023 07:27:56 +0000
Subject: [PATCH] fixed menu bug

---
 .../Pages/Chat.razor                          | 87 -------------------
 .../Shared/NavMenu.razor                      | 37 +++++---
 .../Shared/NavMenu.razor.cs                   | 25 ++++++
 .../Shared/NavMenu.razor.css                  | 66 --------------
 4 files changed, 51 insertions(+), 164 deletions(-)
 create mode 100644 ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs

diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor b/ShoppingAssistantWebClient.Web/Pages/Chat.razor
index 1df9ac7..b79f8ce 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor
@@ -131,90 +131,3 @@
     </div>
 </div>
 
-
-<script>
-const leftFrame = document.getElementById("leftFrame");
-const rightFrame = document.getElementById("rightFrame");
-const openMenuButton = document.querySelector(".button_open_menu");
-const closeMenuButton = document.querySelector(".button_close_menu");
-
-
-
-const choose_gift = document.getElementById("choose_gift");
-const choose_product = document.getElementById("choose_product");
-const switchGift = document.querySelector(".switch_gift");
-const switchProduct = document.querySelector(".switch_product");
-
-
-const isLeftFrameOpen = localStorage.getItem('leftFrameOpen');
-
-if (isLeftFrameOpen) {
-     requestAnimationFrame(() => {
-        leftFrame.style.transform = "translateX(0%)";
-        rightFrame.style.transform = "translateX(calc(30% - 40px))";
-        rightFrame.style.width = "calc(80% - 60px)";
-    });
-    openMenuButton.style.visibility = "hidden";
-    closeMenuButton.style.visibility = "visible";
-} else {
-      requestAnimationFrame(() => {
-        leftFrame.style.transform = "translateX(-100%)";
-                rightFrame.style.transform = "translateX(0%)";
-        rightFrame.style.width = "calc(100% - 40px)";
-    });
-    closeMenuButton.style.visibility = "hidden";
-    openMenuButton.style.visibility = "visible";
-}
-
-
-openMenuButton.addEventListener("click", function () {
-    requestAnimationFrame(() => {
-        leftFrame.style.transform = "translateX(0%)";
-        rightFrame.style.transform = "translateX(calc(30% - 40px))";
-        rightFrame.style.width = "calc(80% - 60px)";
-    });
-    openMenuButton.style.visibility = "hidden";
-    closeMenuButton.style.visibility = "visible";
-});
-
-closeMenuButton.addEventListener("click", function () {
-    requestAnimationFrame(() => {
-        leftFrame.style.transform = "translateX(-100%)";
-                rightFrame.style.transform = "translateX(0%)";
-        rightFrame.style.width = "calc(100% - 40px)";
-    });
-    closeMenuButton.style.visibility = "hidden";
-    openMenuButton.style.visibility = "visible";
-});
-
-switchGift.addEventListener("click", function () {
-    requestAnimationFrame(() => {
-        choose_gift.style.backgroundColor = "#0052CC";
-        choose_product.style.backgroundColor = "transparent";
-        switchGift.style.color = "white";
-        switchProduct.style.color = "#202124";
-
-    });
-
-});
-
-switchProduct.addEventListener("click", function () {
-    requestAnimationFrame(() => {
-        choose_product.style.backgroundColor = "#0052CC";
-        choose_gift.style.backgroundColor = "transparent";
-        switchProduct.style.color = "white";
-        switchGift.style.color = "#202124";       
-
-    });
-
-});
-
-
-
-
-const new_chat = document.querySelector(".button_add_chat");
-new_chat.addEventListener("click", function () {
-   alert(3)
-});
-
-</script>
diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
index 6442748..5250fc0 100644
--- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
@@ -1,4 +1,4 @@
-<div class="left_frame" id="leftFrame">
+<div style="@leftFrameStyle" class="left_frame">
 
 
     <div class="logo">
@@ -8,7 +8,7 @@
 
     <div class="menu">
 
-        <a class="button_close_menu">
+        <a @onclick="ChangeButtonStyle" class="button_close_menu">
             <span></span>
             <span></span>
             <span></span>
@@ -55,16 +55,31 @@
 
 
 @code {
-    private List<ShoppingAssistantWebClient.Web.Models.Wishlist> wishlist {get; set;}
-    protected async override Task OnInitializedAsync(){
-        wishlist = new List<ShoppingAssistantWebClient.Web.Models.Wishlist>()
+    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()
+        {
+
+            wishlist =  new List<Models.Wishlist>
             {
                 new Models.Wishlist {Id = "0", Name = "Gift for Jessica", Type="product", CreateById="0"},
-                new Models.Wishlist {Id = "1", Name = "Secret Santa", Type="gift", CreateById="1"},
-                new Models.Wishlist {Id = "2", Name = "Mark’s Birthday", Type="product", CreateById="2"},
-                new Models.Wishlist {Id = "3", Name = "Garden tools", Type="product", CreateById="2"},
-                new Models.Wishlist {Id = "4", Name = "Phone charger ", Type="product", CreateById="2"},
-                new Models.Wishlist {Id = "5", Name = "Garden tools", Type="product", CreateById="2"},              
+                new Models.Wishlist  {Id = "1", Name = "Secret Santa", Type="gift", CreateById="1"},
+                new Models.Wishlist  {Id = "2", Name = "Mark’s Birthday", Type="product", CreateById="2"},
+                new Models.Wishlist  {Id = "3", Name = "Garden tools", Type="product", CreateById="2"},
+                new Models.Wishlist  {Id = "4", Name = "Phone charger ", Type="product", CreateById="2"},
+                new Models.Wishlist  {Id = "5", Name = "Garden tools", Type="product", CreateById="2"}
             };
-    }
+
+        }
+
 }
diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs
new file mode 100644
index 0000000..b31509d
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs
@@ -0,0 +1,25 @@
+
+using Microsoft.AspNetCore.Components;
+using ShoppingAssistantWebClient.Web.Models;
+
+namespace ShoppingAssistantWebClient.Web.Pages;
+
+public partial class Wishlists : ComponentBase
+{
+private List<Wishlist> wishlist;
+
+        protected override async Task OnInitializedAsync()
+        {
+
+            wishlist =  new List<Models.Wishlist>
+            {
+                new Models.Wishlist {Id = "0", Name = "Gift for Jessica", Type="product", CreateById="0"},
+                new Models.Wishlist  {Id = "1", Name = "Secret Santa", Type="gift", CreateById="1"},
+                new Models.Wishlist  {Id = "2", Name = "Mark’s Birthday", Type="product", CreateById="2"},
+                new Models.Wishlist  {Id = "3", Name = "Garden tools", Type="product", CreateById="2"},
+                new Models.Wishlist  {Id = "4", Name = "Phone charger ", Type="product", CreateById="2"},
+                new Models.Wishlist  {Id = "5", Name = "Garden tools", Type="product", CreateById="2"}
+            };
+
+        }
+}
diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
index 1d15efb..79e2c0d 100644
--- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
@@ -1,70 +1,4 @@
-/*.navbar-toggler {
-    background-color: rgba(255, 255, 255, 0.1);
-}
 
-.top-row {
-    height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
-}
-
-.navbar-brand {
-    font-size: 1.1rem;
-}
-
-.oi {
-    width: 2rem;
-    font-size: 1.1rem;
-    vertical-align: text-top;
-    top: -2px;
-}
-
-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-}
-
-    .nav-item:first-of-type {
-        padding-top: 1rem;
-    }
-
-    .nav-item:last-of-type {
-        padding-bottom: 1rem;
-    }
-
-    .nav-item ::deep a {
-        color: #d7d7d7;
-        border-radius: 4px;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        line-height: 3rem;
-    }
-
-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.25);
-    color: white;
-}
-
-.nav-item ::deep a:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
-}
-
-@media (min-width: 641px) {
-    .navbar-toggler {
-        display: none;
-    }
-
-    .collapse {
-        display: block;
-    }
-    
-    .nav-scrollable {
-
-        height: calc(100vh - 3.5rem);
-        overflow-y: auto;
-    }
-}*/
 .left_frame {
   position: relative;
   height: 100%;