Vendaweb-portal/src/app/components/header-shopping/header-shopping.component.html

<header class="header-productlist fixed-top">
    <div class="container">
        <div class="row g-0 align-items-center">
            <!-- Logo and Menu -->
            <div class="col-6 col-md-2 d-flex align-items-center logo-jurunense">
                <div class="btn-menu">
                    <button class="menu-toggle me-3 d-flex align-items-center" (click)="openMenu()">
                        <img src="assets/img/menu.svg" alt="Menu" width="24" height="24" />
                    </button>
                </div>
                <div class="logo-jurunense">
                    <a href="/#/sales/home" title="Jurunenese">
                        <img src="assets/img/logo_simplifique.png" alt="Imagem" class="img-fluid" />
                    </a>
                </div>
            </div>

            <!-- Search Section para desktops -->
            <div class="col-md-8 px-5 d-none d-md-flex">
                <kendo-textbox class="search-product-desktop" [formControl]="searchProduct"
                    placeholder="Pesquise o produto desejado por aqui" (keydown.enter)="onSearch()">
                    <ng-template kendoTextBoxSuffixTemplate>
                        <button kendoButton fillMode="clear" icon="search" (click)="onSearch()"></button>
                    </ng-template>
                </kendo-textbox>
            </div>

            <!-- User Info and Cart -->
            <div class="col-6 col-md-2 d-flex justify-content-end align-items-center">
                <!-- Carrinho -->
                <div class="d-flex align-items-center">
                    <kendo-badge-container>
                        <img src="assets/img/cart.svg" alt="Carrinho" data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasRight" aria-controls="offcanvasRight" />
                        <kendo-badge [align]="align" [position]="position" [themeColor]="themeBadge">
                            {{ (shopping$ | async).length }}
                        </kendo-badge>
                    </kendo-badge-container>
                </div>

                <!-- Avatar com dropdown para dispositivos móveis -->
                <!-- <div class="info-user">
                    <div class="dropdown ms-3">
                        <button class="btn dropdown-toggle p-0" id="userMenuDropdown" type="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <kendo-avatar [imageSrc]="'https://i.pravatar.cc/150?img=7'" [size]="'medium'"
                                [shape]="'circle'" title="{{ userName }}"></kendo-avatar>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenuDropdown">
                            <li class="dropdown-header">
                                <span class="username"><strong>{{ userName }}</strong></span>
                                <div class="text-muted"><span class="loja">Loja: {{ storeName }}</span></div>
                            </li>
                            <hr>
                            <li><a class="dropdown-item" href="/#/profile">Perfil</a></li>
                            <li><a class="dropdown-item" href="/#/settings">Configurações</a></li>
                            <li><a class="dropdown-item" (click)="logout()">Sair</a></li>
                        </ul>
                    </div>
                </div> -->


                <!-- Nome do usuário e loja -->
                <div class="user-details me-3 text-end">
                    <span class="name-user d-block">{{ userName }}</span>
                    <span class="last-access d-block">Loja: {{ storeName }}</span>
                </div>

                <!-- Dropdown de configurações -->
                <div class="dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="assets/img/config.svg" alt="Configurações" class="img-config" />
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
                        <li>
                            <a class="dropdown-item" (click)="logout()">Sair</a>
                        </li>
                    </ul>
                </div>
            </div>


            <!-- Search Section para dispositivos móveis e tablets -->
            <div class="col-12 mt-3">
                <kendo-textbox class="search-product" [formControl]="searchProduct"
                    placeholder="Pesquise o produto desejado por aqui" (keydown.enter)="onSearch()">
                    <ng-template kendoTextBoxSuffixTemplate>
                        <button kendoButton fillMode="clear" icon="search" (click)="onSearch()"></button>
                    </ng-template>
                </kendo-textbox>
            </div>
        </div>
    </div>

    <!-- Modal de Menu -->
    <div class="menu-modal" [ngClass]="{'open': isMenuOpen, 'close': !isMenuOpen}">
        <div class="menu-content">
            <!-- Cabeçalho do Modal -->
            <div class="menu-header">
                <div class="user-info">
                    <img src="https://via.placeholder.com/64" alt="Avatar" class="user-avatar" />
                    <div class="user-text">
                        <span class="bold-text">{{ userName }}</span>
                        <span class="subtitle">Loja: {{ storeName }}</span>
                    </div>
                </div>
                <button class="close-btn" (click)="closeMenu()">×</button>
            </div>

            <!-- Botões de Entrar e Cadastrar -->
            <div class="menu-buttons">
                <button class="btn-enter" (click)="logout()">Sair</button>
                <button class="btn-register" (click)="closeMenu()">Voltar</button>
            </div>

            <!-- Lista de Links -->
            <ul class="menu-links">
                <!-- <li>
                    <a href="#">Nossas lojas</a>
                    <i class="fa-solid fa-chevron-right icon"></i>
                </li>
                <hr /> -->

                <li>
                    <a href="/#/product-list" (click)="applyFilter({ urlCategory: [] })"><strong>Todos os
                            departamentos</strong></a>
                    <i class="fa-solid fa-chevron-right icon"></i>
                </li>
                <hr />

                <!-- Lista Dinâmica -->
                <li *ngFor="let department of departments">
                    <a href="/#/product-list" (click)="applyFilter({ urlCategory: department.path })">{{ department.text
                        }}</a>
                    <i class="fa-solid fa-chevron-right icon"></i>
                </li>
            </ul>

            <!-- Filtros Adicionais -->
            <div class="menu-filters">
                <legend class="k-form-legend mt-3">Marcas</legend>
                <div *ngIf="brands && brands.length > 0">
                    <kendo-treeview kendoTreeViewHierarchyBinding [nodes]="brands" textField="text"
                        [kendoTreeViewCheckable]="{ mode: 'multiple' }" [(checkedKeys)]="selectedBrandKeys"
                        (checkedChange)="applyFilter({ brands: selectedBrandKeys })">
                    </kendo-treeview>
                </div>


                <!-- Filtros Gerais -->
                <div class="filters-section">
                    <legend class="k-form-legend mt-3">Filtros</legend>

                    <label class="k-label d-block">
                        <input type="checkbox" kendoCheckBox [(ngModel)]="onlyWithStock" />
                        <span class="ms-2">Somente produtos com estoque</span>
                    </label>

                    <label class="k-label d-block mt-2">
                        <span>Filial de estoque</span>
                        <kendo-combobox [data]="store$ | async" textField="id" valueField="id"
                            (selectionChange)="selectedStore($event)">
                        </kendo-combobox>
                    </label>

                    <label class="k-label d-block mt-2">
                        <input type="checkbox" kendoCheckBox [(ngModel)]="productPromotion" />
                        <span class="ms-2">Produtos em promoção</span>
                    </label>

                    <label class="k-label d-block mt-2">
                        <span>Faixa de desconto</span>
                        <kendo-rangeslider [(ngModel)]="percentOff" [min]="minPercentOff" [max]="maxPercentOff"
                            [smallStep]="smallStep" [largeStep]="largeStep">
                        </kendo-rangeslider>
                    </label>

                    <label class="k-label d-block mt-2">
                        <input type="checkbox" kendoCheckBox [(ngModel)]="markdown" />
                        <span class="ms-2">Produtos que baixaram de preço</span>
                    </label>

                    <label class="k-label d-block mt-2">
                        <input type="checkbox" kendoCheckBox [(ngModel)]="oportunity" />
                        <span class="ms-2">Oportunidades</span>
                    </label>

                    <label class="k-label d-block mt-2">
                        <input type="checkbox" kendoCheckBox [(ngModel)]="offers" />
                        <span class="ms-2">Ofertas imperdíveis</span>
                    </label>

                    <!-- Botão de Aplicar -->
                    <div class="apply-filters mt-4">
                        <button kendoButton class="w-100" (click)="getFilterProducts()">
                            Aplicar Filtros
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</header>