mirror of
https://github.com/Shchoholiev/shopping-assistant-web-client.git
synced 2025-04-04 16:49:36 +00:00
fixed menu bug
This commit is contained in:
AsTroLog
parent
f0177e5675
commit
1656f10967
@ -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>
|
||||
|
||||
@ -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"}
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
25
ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs
Normal file
25
ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs
Normal file
@ -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"}
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
@ -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%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user