shopping-assistant-web-client/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
2023-11-02 19:00:25 +00:00

121 lines
3.2 KiB
Plaintext

@inject NavigationManager Navigation
<div id="leftframe" class="left_frame">
<div class="logo">
<img src="/images/logo.svg" alt="Logo site">
<span class="logo_name">CARTAID</span>
</div>
<div class="menu">
<a id="button_close" class="button_close_menu">
<span></span>
<span></span>
<span></span>
</a>
<div class="elements_wishlisht">
<div class="add_chat" @onclick="RedirectToNewChat" >
<div>
<span>Search</span>
<span class="plus">+</span>
</div>
</div>
<div class="wishlist_names">
@if(!isLoading){
@foreach (var item in Wishlists)
{
<section class="cont_wishlist">
<div @onclick="() => RedirectToPage(item.Id)" class="wishlist_name" >@item.Name</div>
<img @onclick="() => DeleteWishlist(item.Id)" class="button_delete_chat" src="/images/icon_delete.svg" alt="Delete wishlist">
<img @onclick="() => RedirectToCard(item.Id)" class="button_open_card" src="/images/icon_open_card.svg" alt="Card open">
</section>
}
}else{
<div>loading ...</div>
}
</div>
</div>
<div class="line"></div>
<div class="elements">
<div class="info_user">
<img src="/images/avatar.jpg" alt="Avatar user">
<span class="user_name">Semen Semenov</span>
</div>
</div>
</div>
</div>
<script>
function changetyle() {
var left_frame = document.querySelector('.sidebar-menu');
var right_frame = document.querySelector('.right-frame');
var computedStyles = getComputedStyle(left_frame);
var transformValue = computedStyles.transform;
var button_open = document.querySelector('.button_open_menu');
if (transformValue === 'matrix(1, 0, 0, 1, 0, 0)') {
left_frame.style.transform = 'translateX(-110%)';
button_open.style.visibility = 'visible';
right_frame.style.left = '1.25em';
} else {
left_frame.style.transform = 'translateX(0)';
button_open.style.visibility = 'hidden';
right_frame.style.left = '23.25em';
}
}
document.getElementById('button_close').addEventListener('click', changetyle);
</script>
@code {
private void RedirectToPage(string itemId) {
var url = $"/chat/{itemId}";
Navigation.NavigateTo(url);
}
private void RedirectToNewChat() {
var url = $"/";
Navigation.NavigateTo(url);
}
private void RedirectToCard(string itemId) {
var url = $"/chat/{itemId}/cart";
Navigation.NavigateTo(url);
}
private async void DeleteWishlist(string itemId) {
await DeleteWish(itemId);
}
}