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

@using Models.GlobalInstances
@using System.Linq
@using Microsoft.AspNetCore.Components
@using Microsoft.JSInterop
@inject NavigationManager Navigation
@inject IJSRuntime JSRuntime;

<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>
                            <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">
                        </section>
                    }
                }

            </div>

        </div>

        <div class="line"></div>
        <div class="elements">
            <div class="info_user">
                <img src="/images/avatar.jpg" alt="Avatar user">
                <!-- Change to name -->
                <span class="user_name">@GlobalUser.Id</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)') {
            left_frame.style.transform = 'translateX(-110%)';
            button_open.style.visibility = 'visible';
            right_frame.style.left = '1.25em';
            amazonAssociate.style.left='50%'

        } else {
            left_frame.style.transform = 'translateX(0)';
            button_open.style.visibility = 'hidden';
            right_frame.style.left = '23.25em';
            amazonAssociate.style.left='calc(50% + 20em)'
        }
    }
    document.getElementById('button_close').addEventListener('click', changetyle);

/*
    window.getScrollTop = function (element) {
        return element.scrollTop;
    };

    window.getOffsetHeight = function (element) {
        return element.offsetHeight;
    };

    window.getScrollHeight = function (element) {
        return element.scrollHeight;
    };

    window.setScrollTop = function (element, scrollTop) {
        element.scrollTop = scrollTop;
    };
*/
</script>


<script>
    
    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;
        
    }

    [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) {

        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));
        }
    }
*/



}