shopping-assistant-web-client/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor

@using Models.GlobalInstances
@using System.Linq
@using Microsoft.AspNetCore.Components
@using Microsoft.JSInterop
@using ShoppingAssistantWebClient.Web.Pages
@inject NavigationManager Navigation
@inject IJSRuntime JSRuntime;
@inject IModalService Modal;

<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" id="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 @(selectedWishlistId == item.Id ? "selected_wishlist" : "")">
                            <div class="wishlist_name" @onclick="() => RedirectToPage(item.Id)">@item.Name</div>
                            <div class="wishlist_buttons">
                                <img class="button_delete_chat" @onclick="() => DeleteWishlist(item.Id)" src="/images/icon_delete.svg" alt="Delete wishlist">
                                <img class="button_open_card" @onclick="() => RedirectToCart(item.Id)" src="/images/icon_open_card.svg" alt="Card open">
                            </div>
                        </section>
                    }
                }

            </div>

        </div>

        <div class="line"></div>
        <div class="elements">
            <div class="info_user" @onclick="ShowModal" style="cursor: pointer;">
                <img src="/images/avatar.svg" alt="Avatar user">
                <span class="user_name">User Settings</span>
            </div>

        </div>

    </div>

</div>


<script>

    function changetyle() {
        var left_frame = document.querySelector('.sidebar-menu');
        var right_frame = document.querySelector('.right-frame');
        var amazonAssociate = document.querySelector('.amazon-associate');
        
        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)') {

            // меню закрите
            if (window.innerWidth < 1100) {
                right_frame.style.left = '1.25em';
                amazonAssociate.style.left ='calc(50% - 12.5em)';
                right_frame.style.zIndex = '0';
                left_frame.style.transform = 'translateX(-110%)';
                button_open.style.visibility = 'visible';
            }else{
                amazonAssociate.style.left ='calc(50% - 12.5em)';
                left_frame.style.transform = 'translateX(-110%)';
                button_open.style.visibility = 'visible';
                right_frame.style.left = '1.25em';
            }


        } else {
          
                // меню відкрите
            if (window.innerWidth < 1100) {
                right_frame.style.left = '1.25em';
                amazonAssociate.style.left ='calc(50% - 12.5em)';
                right_frame.style.zIndex = '0';
                left_frame.style.zIndex = '1';
                left_frame.style.transform = 'translateX(0)';
                button_open.style.visibility = 'hidden';
            }else{
                amazonAssociate.style.left ='50%';
                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>


<script>
        var left_frame = document.querySelector('.sidebar-menu');
        var right_frame = document.querySelector('.right-frame');
        var amazonAssociate = document.querySelector('.amazon-associate');
        
        var computedStyles = getComputedStyle(left_frame);
        var transformValue = computedStyles.transform;
        var button_open = document.querySelector('.button_open_menu');


    function UpdateMenu(wishlistId)
    {

        DotNet.invokeMethodAsync('ShoppingAssistantWebClient.Web', 'Update', wishlistId);

    }



</script>

@code {

    [Parameter] public string chatId { get; set; }


    private string selectedWishlistId;


    private static NavMenu _app;

    public NavMenu ()
    {
        _app = this;
        
    }

    private async Task ShowModal()
    {   
        var options = new ModalOptions()
        {
            DisableBackgroundCancel = true,
            UseCustomLayout = true
        };

        var modalRef = Modal.Show<Settings>("Settings", options);
    }

    [JSInvokable]
    public static void Update(string wishlistId)
    {
        _app.LoadMenus(1,200);
        _app.selectedWishlistId=wishlistId;
    }

    private void RedirectToPage(string itemId) {
        _app.selectedWishlistId = itemId;
        var url = $"/chat/{itemId}";
        Navigation.NavigateTo(url);
    }
    private void RedirectToNewChat() {
        var url = $"/";
        Navigation.NavigateTo(url);
    }
    private void RedirectToCart(string itemId) {
        var url = $"/cart/{itemId}";
        Navigation.NavigateTo(url);
    }
    private async void DeleteWishlist(string itemId) {

        var options = new ModalOptions
        { 
            UseCustomLayout = true 
        };

        var parameters = new ModalParameters();

        var result = await Modal.Show<ConfirmationModal>("", parameters, options).Result;

        if (!result.Cancelled)
            await DeleteWish(itemId);
    }
/*
    private int savedScrollTop = 0;

    private ElementReference wishlishtRef;

    private async Task OnScroll()
    {
        var scrollTop = await JSRuntime.InvokeAsync<int>("getScrollTop", wishlishtRef);
        var offsetHeight = await JSRuntime.InvokeAsync<int>("getOffsetHeight", wishlishtRef);
        var scrollHeight = await JSRuntime.InvokeAsync<int>("getScrollHeight", wishlishtRef);

        if (scrollTop + offsetHeight > scrollHeight - 100)
        {
            savedScrollTop = scrollTop; 
            currentPage++;
            await LoadMenus(currentPage, pageSize);
            await InvokeAsync(() => JSRuntime.InvokeVoidAsync("setScrollTop", wishlishtRef, savedScrollTop));
        }
    }
*/

}