dev #13306

Переделал роутинг с кастомного на ангуляровский, правки по меню, доделал страницу 404

angular/src/app/app.component.html

@@ -1 +1,4 @@
-<router-outlet></router-outlet>
+<app-navbar></app-navbar>
+<div class="layout">
+    <router-outlet></router-outlet>
+</div>

angular/src/app/app.component.scss

@@ -0,0 +1,5 @@
+:host {
+    .layout {
+        padding: 0 16px 16px;
+    }
+}

angular/src/app/app.component.ts

@@ -1,10 +1,23 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { PrimeNGConfig } from 'primeng/api';
+import * as ConfigActions from './state/config/config.actions'
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'Demo stand';
+
+  constructor(private primengConfig: PrimeNGConfig,
+    private store: Store) {}
+
+  ngOnInit() {
+    this.primengConfig.ripple = true;
+    this.store.dispatch(ConfigActions.getConfig());
+  }
+
+
 }

angular/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -53,6 +53,17 @@ import { ConfigEffects } from './state/config/config.effects';
 import {PaginatorModule} from 'primeng/paginator';
 import {InputTextModule} from 'primeng/inputtext';
 import { ChangeQuantityComponent } from './components/change-quantity/change-quantity.component';
+import { MenuComponent } from './components/menu/menu.component';
+import { SidebarModule } from 'primeng/sidebar';
+import {RippleModule} from 'primeng/ripple';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'products', pathMatch: 'full' },
+  { path: 'products', component: ProductsComponent },
+  // { path: 'cart', component: CartComponent },
+  { path: 'account', component: AccountComponent },
+  { path: '**', component: NotFoundComponent }
+];
 
 @NgModule({
   declarations: [
@@ -76,18 +87,13 @@ import { ChangeQuantityComponent } from './components/change-quantity/change-qua
     CheckboxGroupComponent,
     UserDataOrderComponent,
     InfoComponent,
-    ChangeQuantityComponent
+    ChangeQuantityComponent,
+    MenuComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    RouterModule.forRoot([
+    RouterModule.forRoot(routes),
-      {
-          path: '**',
-          component: MainComponent
-      },
-      // { path: '**', component: NotFoundComponent }
-    ]),
     InputMaskModule,
     ProgressSpinnerModule,
     FormsModule,
@@ -119,7 +125,9 @@ import { ChangeQuantityComponent } from './components/change-quantity/change-qua
     StoreModule.forRoot({config: configReducer}),
     EffectsModule.forRoot([ConfigEffects]),
     PaginatorModule,
-    InputTextModule
+    InputTextModule,
+    SidebarModule,
+    RippleModule
   ],
   providers: [DialogService, MessageService, MessagingService ],
   bootstrap: [AppComponent]

angular/src/app/components/menu/menu.component.html

@@ -0,0 +1,54 @@
+<nav class="main-menu-container" isShow="false" #menu>
+  <ul>
+    <ng-container
+      *ngFor="
+        let page of mainPageList;
+        let index = index;
+        let last = last;
+        let first = first
+      "
+    >
+      <li
+        *ngIf="page.onSideBar && !last"
+        class="main-menu-container__item"
+        [ngClass]="{
+          cart: page.resName === 'cart'
+        }"
+        [attr.data-counter]="page.resName === 'cart' ? cartCount : null"
+        [routerLink]="page.resName"
+        routerLinkActive="active"
+      >
+        <mat-icon
+          [ngClass]="{
+            'mat-icon': true
+          }"
+        >
+          {{ page.icon }}
+        </mat-icon>
+        <a>
+          {{ page.name }}
+        </a>
+      </li>
+    </ng-container>
+    <li
+      *ngIf="mainPageList[mainPageList.length - 1].onSideBar"
+      class="main-menu-container__item"
+      [ngClass]="{
+        cart: true
+      }"
+      [attr.data-counter]="cartCount"
+      (click)="changeMainPage(mainPageList[mainPageList.length - 1])"
+    >
+      <mat-icon
+        [ngClass]="{
+          'mat-icon': true
+        }"
+      >
+        {{ mainPageList[mainPageList.length - 1].icon }}
+      </mat-icon>
+      <a>
+        {{ mainPageList[mainPageList.length - 1].name }}
+      </a>
+    </li>
+  </ul>
+</nav>

angular/src/app/components/menu/menu.component.scss

@@ -0,0 +1,120 @@
+:host {
+  .main-menu-container {
+    // position: fixed;
+    // width: 100%;
+    // bottom: 0;
+    // left: 0;
+    // margin: 0;
+    // z-index: 777;
+    // height: 57px;
+    // border-top: solid 1px #dfdfdf;
+    // background-color: #fff;
+
+    ul {
+      display: flex;
+      height: 100%;
+      font-size: 14px;
+      flex-wrap: nowrap;
+      flex-direction: row;
+      gap: 32px;
+
+      li {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        gap: 4px;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 2px;
+        color: #b5b5b9;
+        transition: color 0.3s ease;
+        cursor: pointer;
+
+        &.active {
+          color: #252525;
+
+          a {
+            border-bottom: 2px solid #e16f38;
+          }
+        }
+
+        &:hover {
+          color: #252525;
+          
+          a {
+            border-bottom: 2px solid #e16f38;
+            
+          }
+        }
+        a {
+          border-bottom: 2px solid #e16f3800;
+        }
+
+        & .mat-icon {
+          display: none;
+
+          &.is-active {
+            color: #000;
+          }
+        }
+
+        &.is-active {
+          color: #000;
+        }
+
+        &.cart {
+          position: relative;
+
+          &::before {
+            content: attr(data-counter);
+            color: #fff;
+            position: absolute;
+            right: -18px;
+            top: -8px;
+            background: #d7120b;
+            border-radius: 50px;
+            min-width: 1.2rem;
+            line-height: 1.2rem;
+            font-size: 0.8rem;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    .main-menu-container {
+      position: fixed;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+      margin: 0;
+      z-index: 777;
+      height: 57px;
+      border-top: solid 1px #dfdfdf;
+      background-color: #fff;
+
+      ul {
+        li {
+          &.cart {
+            &::before {
+              right: 34px;
+              top: 5px;
+            }
+          }
+
+          & .mat-icon {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}

angular/src/app/components/menu/menu.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuComponent } from './menu.component';
+
+describe('MenuComponent', () => {
+  let component: MenuComponent;
+  let fixture: ComponentFixture<MenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MenuComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/components/menu/menu.component.ts

@@ -0,0 +1,48 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PageListMain } from 'src/app/app.constants';
+import { Page } from 'src/app/interface/data';
+import { CartService } from 'src/app/services/cart.service';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.scss'],
+})
+export class MenuComponent implements OnInit {
+  @Output() toggleMenu = new EventEmitter();
+  readonly mainPageList = PageListMain;
+  public cartCount = 0;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private cartService: CartService
+  ) {}
+
+  ngOnInit(): void {
+    this.cartCount = this.cartService.cartCount;
+    this.cartService.cartCount$.subscribe({
+      next: (count) => {
+        this.cartCount = count;
+        document
+          .querySelectorAll('.cart')[0]
+          .setAttribute('data-counter', this.cartCount.toString());
+      },
+    });
+  }
+
+  changeMainPage(page: Page, event?: MouseEvent): void {
+    if (event) {
+      event.preventDefault();
+    }
+    if (page.resName === 'cart') {
+      this.toggleMenu.emit()
+      return
+    }
+    this.router.navigate([page.resName], {
+      // relativeTo: this.route,
+      // queryParamsHandling: 'merge',
+    });
+  }
+}

angular/src/app/components/navbar/navbar.component.html

@@ -1,4 +1,6 @@
 <div class="container-navbar">
     <img src="./assets/logo-black.png" alt="Логотип">
-    <span class="menu" (click)="showMenu()">Меню</span>
+    <!-- <span class="menu" (click)="showMenu()">Меню</span> -->
+    <app-menu (toggleMenu)="cart.toggleSideBar()"></app-menu>
+    <app-cart #cart></app-cart>
 </div>

angular/src/app/components/navbar/navbar.component.scss

@@ -1,6 +1,6 @@
 .container-navbar {
     box-sizing: border-box;
-    padding: 0 32px;
+    padding: 0 54px;
     width: 100%;
     height: 54px;
     // background: #09467f;
@@ -11,7 +11,6 @@
 
     img {
         height: 26px;
-        margin-left: 4px;
     }
 
     .menu {

angular/src/app/components/user-data-order/user-data-order.component.scss

@@ -1,160 +1,159 @@
 :host {
-    .woocommerce-shipping-fields__field-wrapper {
+  .woocommerce-shipping-fields__field-wrapper {
-        margin: 8px auto 0 auto;
+    margin: 8px auto 0 auto;
-        max-width: 400px;
+    max-width: 400px;
+  }
+
+  .order_form__title {
+    font-weight: 700;
+    font-size: 18px;
+    margin-bottom: 12px;
+  }
+
+  input {
+    width: 100%;
+    color: #000000;
+    border: 1px solid #000000;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
+      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol;
+    font-size: 1rem;
+    color: #495057;
+    background: #ffffff;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 4px;
+    &.ng-dirty.ng-invalid {
+      border-color: red;
     }
-
+    &.ng-invalid.ng-touched {
-
+      border-color: red;
-    .order_form__title {
-        font-weight: 700;
-        font-size: 18px;
-        margin-bottom: 12px;
     }
+  }
 
-    input {
+  p {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  textarea {
+    width: 100%;
+    height: 52px;
+    color: #000000;
+    border: 1px solid #000000;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
+      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol;
+    font-size: 1rem;
+    color: #495057;
+    background: #ffffff;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 4px;
+  }
+
+  .terminal-list-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin: 8px 0 16px;
+
+    .terminal-container {
+      width: calc(50% - 8px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      border: solid #09467f 1px;
+      border-radius: 16px;
+      overflow: hidden;
+      padding-bottom: 16px;
+      opacity: 0.5;
+      text-align: center;
+
+      &.selected {
+        opacity: 1;
+      }
+
+      img {
         width: 100%;
-        color: #000000;
+        height: 120px;
-        border: 1px solid #000000;
+        object-fit: cover;
-        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol;
+      }
-        font-size: 1rem;
-        color: #495057;
-        background: #ffffff;
-        padding: 0.5rem 0.75rem;
-        border: 1px solid #ced4da;
-        transition: background-color .15s, border-color .15s, box-shadow .15s;
-        -webkit-appearance: none;
-        appearance: none;
-        border-radius: 4px;
-        &.ng-dirty.ng-invalid {
-            border-color: red;
-        }
-        &.ng-invalid.ng-touched {
-            border-color: red;
-        }
-    }
 
-    p {
+      &__name {
-        margin-top: 0;
+      }
-        margin-bottom: 1rem;
-    }
 
-    textarea {
+      &__address {
-        width: 100%;
-        height: 52px;
-        color: #000000;
-        border: 1px solid #000000;
-        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol;
-        font-size: 1rem;
-        color: #495057;
-        background: #ffffff;
-        padding: 0.5rem 0.75rem;
-        border: 1px solid #ced4da;
-        transition: background-color .15s, border-color .15s, box-shadow .15s;
-        -webkit-appearance: none;
-        appearance: none;
-        border-radius: 4px;
-    }
-
-    .terminal-list-container {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 16px;
-        margin: 8px 0 16px;
-
-        .terminal-container {
-            width: calc(50% - 8px);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 8px;
-            border: solid #09467f 1px;
-            border-radius: 16px;
-            overflow: hidden;
-            padding-bottom: 16px;
-            opacity: .5;
-            text-align: center;
-
-            &.selected {
-                opacity: 1;
-            }
-
-            img {
-                width: 100%;
-                height: 120px;
-                object-fit: cover;
-            }
-
-            &__name {}
-
-            &__address {
-                font-size: 14px;
-            }
-        }
-    }
-
-    .terminal-list-label {
-        margin-left: 8px;
         font-size: 14px;
+      }
+    }
+  }
+
+  .terminal-list-label {
+    margin-left: 8px;
+    font-size: 14px;
+  }
+
+  .form-row-wide {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #deliveryDate {
+    margin-left: 8px;
+    margin-bottom: 4px;
+    display: block;
+    font-size: 14px;
+  }
+
+  .bootom-info {
+    position: fixed;
+    width: 100%;
+    left: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    bottom: 0;
+    padding: 18px;
+    background: #fff;
+    z-index: 3;
+    border-top: solid 1px #e7e7e7;
+
+    .subtotal {
+      font-weight: 600;
+      font-size: 20px;
+      display: flex;
+      flex-direction: column;
+
+      .products-count {
+        font-size: 12px;
+        font-weight: 400;
+      }
     }
 
-    .form-row-wide {
+    .elementor-button--checkout {
-        display: flex;
+      background-color: #09467f;
-        flex-direction: column;
+      color: #fff;
+      border-radius: 6px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: none;
+      padding: 12px;
+      font-size: 12px;
+      cursor: pointer;
     }
-
+  }
-    #deliveryDate {
+  @media screen and (min-width: 650px) {
-        margin-left: 8px;
-        margin-bottom: 4px;
-        display: block;
-        font-size: 14px;
-    }
-
     .bootom-info {
-        position: fixed;
+      width: 450px;
-        bottom: 58px;
+      right: 0;
-        width: 100%;
+      left: auto;
-        display: flex;
-        padding: 12px 18px;
-        justify-content: space-between;
-        left: 0;
-        align-items: center;
-        background: #fff;
-        z-index: 9999;
-
-        .subtotal {
-            font-weight: 600;
-            font-size: 20px;
-            display: flex;
-            flex-direction: column;
-
-            .products-count {
-                font-size: 12px;
-                font-weight: 400;
-            }
-        }
-
-        .elementor-button--checkout {
-            background-color: #09467f;
-            color: #fff;
-            border-radius: 6px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border: none;
-            padding: 12px;
-            font-size: 12px;
-            cursor: pointer;
-        }
-
     }
-    @media screen and (min-width: 550px) {
+  }
-        .bootom-info {
+}
-            bottom: 84px;
-            width: 500px;
-            left: 50%;
-            transform: translate(-50%, 0);
-            border: solid 1px #dfdfdf;
-            border-radius: 12px;
-        }
-    }
-}

angular/src/app/components/user-data-order/user-data-order.component.ts

@@ -84,7 +84,7 @@ export class UserDataOrderComponent implements OnInit {
         this.checkoutConfig = value
       }
     })
-    this.deliverData.deliveryDate = moment().add(this.checkoutConfig.timeDelivery.changeTime.defaultValue, 'minutes').toDate()
+    this.deliverData.deliveryDate = moment().add(this.checkoutConfig?.timeDelivery?.changeTime?.defaultValue || 0, 'minutes').toDate()
     this.paymentMethods = this.checkoutConfig.payments.values
     this.deliverData.paymentMethod = this.paymentMethods[this.checkoutConfig.payments.default]
 

angular/src/app/pages/account/account.component.html

@@ -1,112 +1,97 @@
-<div [ngClass]="{
+<div
-  woocommerce: true,
+  [ngClass]="{
-  'auth-page': showAuthoriztion
+    woocommerce: true,
-}">
+    'auth-page': showAuthoriztion
-  <nav class="main-menu-container" isShow="false" #menu>
+  }"
-    <ul>
+>
-      <ng-container *ngFor="let page of mainPageList; let index = index; let last = last; let first = first;">
+  <div *ngIf="!showAuthoriztion" class="account-page">
-        <li *ngIf="page.onSideBar" class="main-menu-container__item" [ngClass]="{
+    <div *ngIf="showAuthoriztion" class="top-left-attribute"></div>
-            'cart': page.resName === 'cart',
+    <div [ngSwitch]="currentPage.code" class="">
-            'is-active': page === currentPageMain
+      <ng-container *ngSwitchCase="PageCode.Orders">
-          }" [attr.data-counter]="page.resName === 'cart' ? cartCount : null" (click)="changeMainPage(page, $event)">
+        <app-orders (deauthorization)="changePage(pageList[0])"></app-orders>
-          <mat-icon [ngClass]="{
-              'mat-icon': true,
-              'is-active': page === currentPageMain
-            }">
-            {{page.icon}}
-          </mat-icon>
-          <span>
-            {{page.name}}
-          </span>
-        </li>
       </ng-container>
-    </ul>
+      <ng-container *ngSwitchCase="PageCode.BonusProgram">
-  </nav>
+        <app-bonus-program
-  <div [ngSwitch]="currentPageMain.code">
+          (deauthorization)="changePage(pageList[0])"
-    <ng-container *ngSwitchCase="MainPageCode.Account">
+        ></app-bonus-program>
-      <div *ngIf="!showAuthoriztion" class="account-page">
+      </ng-container>
-        <div *ngIf="showAuthoriztion" class="top-left-attribute"></div>
+      <ng-container *ngSwitchCase="PageCode.UserData">
-        <div [ngSwitch]="currentPage.code" class="">
+        <app-user-data></app-user-data>
-          <ng-container *ngSwitchCase="PageCode.Orders">
+      </ng-container>
-            <app-orders (deauthorization)="changePage(pageList[0])"></app-orders>
+      <ng-container *ngSwitchCase="PageCode.RefSystem">
-          </ng-container>
+        <app-ref-system></app-ref-system>
-          <ng-container *ngSwitchCase="PageCode.BonusProgram">
+      </ng-container>
-            <app-bonus-program (deauthorization)="changePage(pageList[0])"></app-bonus-program>
+    </div>
-          </ng-container>
+    <nav *ngIf="!showAuthoriztion" class="woocommerce-MyAccount-navigation">
-          <ng-container *ngSwitchCase="PageCode.UserData">
+      <ul>
-            <app-user-data></app-user-data>
+        <ng-container *ngFor="let page of pageList; let index = index">
-          </ng-container>
+          <li
-          <ng-container *ngSwitchCase="PageCode.RefSystem">
+            *ngIf="page.onSideBar"
-            <app-ref-system></app-ref-system>
+            class="woocommerce-MyAccount-navigation-link"
-          </ng-container>
+            [ngClass]="{
-        </div>
-        <nav *ngIf="!showAuthoriztion" class="woocommerce-MyAccount-navigation">
-          <ul>
-            <ng-container *ngFor="let page of pageList; let index = index">
-              <li *ngIf="page.onSideBar" class="woocommerce-MyAccount-navigation-link" [ngClass]="{
               'is-active': page === currentPage,
               first: index === 1
-            }" (click)="changePage(page, $event)">
+            }"
-                <div class="container">
+            (click)="changePage(page, $event)"
-                  <img src="{{ './assets/menu-icons/' + page.resName + '.png' }}" alt="Иконка меню" />
+          >
-                  <div class="menu-item-info">
+            <div class="container">
-                    <a href="#">{{ page.name }}</a>
+              <img
-                    <p>{{ page.description }}</p>
+                src="{{ './assets/menu-icons/' + page.resName + '.png' }}"
-                  </div>
+                alt="Иконка меню"
-                </div>
+              />
-              </li>
+              <div class="menu-item-info">
-            </ng-container>
+                <a href="#">{{ page.name }}</a>
-            <li class="woocommerce-MyAccount-navigation-link" (click)="logout()">
+                <p>{{ page.description }}</p>
-              <div class="container">
-                <img src="./assets/menu-icons/exit.png" alt="Иконка меню" />
-                <div class="menu-item-info">
-                  <a href="#">Выход</a>
-                </div>
               </div>
-            </li>
+            </div>
-          </ul>
+          </li>
-        </nav>
+        </ng-container>
-      </div>
+        <li class="woocommerce-MyAccount-navigation-link" (click)="logout()">
-    </ng-container>
+          <div class="container">
-    <ng-container *ngSwitchCase="MainPageCode.Products">
+            <img src="./assets/menu-icons/exit.png" alt="Иконка меню" />
-      <app-products></app-products>
+            <div class="menu-item-info">
-    </ng-container>
+              <a href="#">Выход</a>
-    <ng-container *ngSwitchCase="MainPageCode.Cart">
+            </div>
-      <app-cart *ngIf="!showAuthoriztion" (showAuthoriztion)="checkAuthorization($event)"></app-cart>
+          </div>
-    </ng-container>
+        </li>
-    <ng-container *ngSwitchCase="MainPageCode.Info">
+      </ul>
-      <app-info></app-info>
+    </nav>
-    </ng-container>
-
-    <ng-container>
-      <app-auth *ngIf="showAuthoriztion && currentPageMain !== mainPageList[1]" [handleHttpError]="handleHttpErrorFunc"
-        (phoneConfirmed)="phoneConfirmed()"></app-auth>
-    </ng-container>
   </div>
 
-  <span class="version" [ngClass]="{
+  <p-toast
-      version: true
+    position="bottom-center"
-    }">
+    key="c"
-    v{{ version }}
+    (onClose)="onReject()"
-  </span>
+    [baseZIndex]="5000"
-
+  >
-  <p-toast position="bottom-center" key="c" (onClose)="onReject()" [baseZIndex]="5000">
     <ng-template let-message pTemplate="message">
       <div class="flex flex-column" style="flex: 1">
         <div class="text-center">
           <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
-          <h4>{{message.summary}}</h4>
+          <h4>{{ message.summary }}</h4>
-          <p style="font-weight: 600;">{{message.detail}}</p>
+          <p style="font-weight: 600">{{ message.detail }}</p>
         </div>
         <div class="grid p-fluid">
           <div class="col-6">
-            <button type="button" pButton (click)="onConfirm()" label="Да" class="p-button-success"></button>
+            <button
+              type="button"
+              pButton
+              (click)="onConfirm()"
+              label="Да"
+              class="p-button-success"
+            ></button>
           </div>
           <div class="col-6">
-            <button type="button" pButton (click)="onReject()" label="Нет" class="p-button-secondary"></button>
+            <button
+              type="button"
+              pButton
+              (click)="onReject()"
+              label="Нет"
+              class="p-button-secondary"
+            ></button>
           </div>
         </div>
       </div>
     </ng-template>
   </p-toast>
-</div>
+</div>

angular/src/app/pages/cart/cart.component.html

@@ -1,104 +1,215 @@
-<div class="cart" *ngIf="!loading && order && !orderConfirmed" [ngStyle]="{margin: !order.products.length && 0}">
+<p-sidebar
-  <div class="widget_shopping_cart_content" style="opacity: 1;">
+  [(visible)]="visibleSidebar"
-    <div class="elementor-menu-cart__products woocommerce-mini-cart cart woocommerce-cart-form__contents"
+  [fullScreen]="isFullScreen"
-      [ngStyle]="{margin: !order.products.length && 0}">
+  [baseZIndex]="10000"
-      <div *ngFor="let product of order.products; let last = last">
+  position="right"
-        <div class="elementor-menu-cart__product woocommerce-cart-form__cart-item cart_item"
+>
-          style="grid-template-columns: 70px auto;">
+  <div
+    class="cart"
+    *ngIf="!loading && order && !orderConfirmed"
+    [ngStyle]="{ margin: !order.products.length && 0 }"
+  >
+    <div class="widget_shopping_cart_content" style="opacity: 1">
+      <div
+        class="elementor-menu-cart__products woocommerce-mini-cart cart woocommerce-cart-form__contents"
+        [ngStyle]="{ margin: !order.products.length && 0 }"
+      >
+        <div *ngFor="let product of order.products; let last = last">
+          <div
+            class="elementor-menu-cart__product woocommerce-cart-form__cart-item cart_item"
+            style="grid-template-columns: 70px auto"
+          >
+            <div class="elementor-menu-cart__product-image product-thumbnail">
+              <img
+                *ngIf="product.image"
+                width="70"
+                height="70"
+                src="{{ product.image }}"
+                class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"
+                alt="{{ product.name }}"
+                loading="lazy"
+              />
+              <img
+                *ngIf="!product.image"
+                width="70"
+                height="70"
+                src="./assets/no-image.png"
+                class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"
+                alt="{{ product.name }}"
+                loading="lazy"
+              />
+            </div>
+            <div
+              class="elementor-menu-cart__product-name product-name"
+              data-title="Product"
+            >
+              <span>{{ product.name }}</span>
+              <dl
+                *ngFor="let modifier of product.modifier_data"
+                class="variation"
+                [ngStyle]="{ margin: !modifier.options.length && 0 }"
+              >
+                <ng-container *ngFor="let option of modifier.options">
+                  <dt
+                    *ngIf="option.quantity"
+                    style="max-width: 160px"
+                    class="variation-"
+                  >
+                    {{ option.name }}:
+                  </dt>
+                  <dd
+                    *ngIf="option.quantity"
+                    style="
+                      display: flex;
+                      align-items: flex-end;
+                      margin-bottom: 0;
+                    "
+                    class="variation-"
+                  >
+                    <p>
+                      {{ option.quantity }} × {{ product.currency_symbol
+                      }}{{ (option.price ?? 0) * option.quantity }}
+                    </p>
+                  </dd>
+                </ng-container>
+              </dl>
+            </div>
 
-          <div class="elementor-menu-cart__product-image product-thumbnail">
+            <div
-            <img *ngIf="product.image" width="70" height="70" src="{{product.image}}"
+              class="elementor-menu-cart__product-price product-price"
-              class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="{{product.name}}" loading="lazy">
+              data-title="Price"
-            <img *ngIf="!product.image" width="70" height="70" src="./assets/no-image.png"
+            >
-              class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="{{product.name}}" loading="lazy">
+              <span class="quantity">
-          </div>
+                <span class="product-quantity">{{ product.amount }} × </span>
-          <div class="elementor-menu-cart__product-name product-name" data-title="Product">
+                <span class="woocommerce-Price-amount amount">
-            <span>{{product.name}}</span>
+                  <bdi>
-            <dl *ngFor="let modifier of product.modifier_data" class="variation"
+                    <span class="woocommerce-Price-currencySymbol">{{
-              [ngStyle]="{margin: !modifier.options.length && 0}">
+                      product.currency_symbol
-              <ng-container *ngFor="let option of modifier.options">
+                    }}</span>
-                <dt *ngIf="option.quantity" style="max-width: 160px;" class="variation-">{{option.name}}:</dt>
+                    {{ product.finalPrice }}
-                <dd *ngIf="option.quantity" style="display: flex; align-items: flex-end; margin-bottom: 0;" class="variation-">
+                  </bdi>
-                  <p>{{option.quantity}} × {{product.currency_symbol}}{{(option.price ?? 0) * option.quantity}}</p>
+                </span>
-                </dd>
-              </ng-container>
-            </dl>
-          </div>
-
-          <div class="elementor-menu-cart__product-price product-price" data-title="Price">
-            <span class="quantity">
-              <span class="product-quantity">{{product.amount}} × </span>
-              <span class="woocommerce-Price-amount amount">
-                <bdi>
-                  <span class="woocommerce-Price-currencySymbol">{{product.currency_symbol}}</span>
-                  {{product.finalPrice}}
-                </bdi>
               </span>
-            </span>
+              <div class="product-change-amount">
-            <div class="product-change-amount">
+                <div
-              <div class="product-change-amount__symbol" (click)="setAmount(product, 'minus')">
+                  class="product-change-amount__symbol"
-                -
+                  (click)="setAmount(product, 'minus')"
-              </div>
+                >
-              <div class="product-change-amount__symbol" (click)="setAmount(product, 'plus')">
+                  -
-                +
+                </div>
+                <div
+                  class="product-change-amount__symbol"
+                  (click)="setAmount(product, 'plus')"
+                >
+                  +
+                </div>
               </div>
             </div>
-          </div>
 
-          <div class="elementor-menu-cart__product-remove product-remove">
+            <div class="elementor-menu-cart__product-remove product-remove">
-            <a href="#" class="remove_from_cart_button" aria-label="Remove this item"
+              <a
-              (click)="removeFromCart($event, product.guid)"></a>
+                href="#"
+                class="remove_from_cart_button"
+                aria-label="Remove this item"
+                (click)="removeFromCart($event, product.guid)"
+              ></a>
+            </div>
           </div>
+          <hr *ngIf="!last" />
         </div>
-        <hr *ngIf="!last">
+        <button
+          *ngIf="order.products.length != 0"
+          class="clear-cart"
+          (click)="confirmClearCart()"
+        >
+          Очистить корзину
+        </button>
       </div>
-      <button *ngIf="order.products.length != 0" class="clear-cart" (click)="confirmClearCart()">
+      <div
-        Очистить корзину
+        *ngIf="order.products.length != 0"
-      </button>
+        class="elementor-menu-cart__bottom-info"
-    </div>
+      >
-    <div *ngIf="order.products.length != 0" class="elementor-menu-cart__bottom-info">
+        <div class="elementor-menu-cart__subtotal">
-      <div class="elementor-menu-cart__subtotal">
+          <span class="products-count"
-        <span class="products-count">Товаров: {{order.products.length}}</span>
+            >Товаров: {{ order.products.length }}</span
-        <span class="woocommerce-Price-amount amount"><bdi><span
+          >
-              class="woocommerce-Price-currencySymbol">{{order.products[0].currency_symbol}}</span>{{order.price}}</bdi></span>
+          <span class="woocommerce-Price-amount amount"
-      </div>
+            ><bdi
-      <div class="elementor-menu-cart__footer-buttons">
+              ><span class="woocommerce-Price-currencySymbol">{{
-        <a href="#" class="elementor-button elementor-button--checkout elementor-size-md"
+                order.products[0].currency_symbol
-          (click)="confirmOrder($event)">
+              }}</span
-          <span class="elementor-button-text">Оформление заказа</span>
+              >{{ order.price }}</bdi
-        </a>
+            ></span
+          >
+        </div>
+        <div class="elementor-menu-cart__footer-buttons">
+          <a
+            href="#"
+            class="elementor-button elementor-button--checkout elementor-size-md"
+            (click)="confirmOrder($event)"
+          >
+            <span class="elementor-button-text">Оформление заказа</span>
+          </a>
+        </div>
       </div>
     </div>
-  </div>
+    <p-toast
-  <p-toast position="bottom-center" key="c" (onClose)="onReject()" [baseZIndex]="5000">
+      position="bottom-center"
-    <ng-template let-message pTemplate="message">
+      key="c"
-      <div class="flex flex-column" style="flex: 1">
+      (onClose)="onReject()"
-        <div class="text-center">
+      [baseZIndex]="5000"
-          <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
+    >
-          <h4>{{message.summary}}</h4>
+      <ng-template let-message pTemplate="message">
-          <p style="font-weight: 600;">{{message.detail}}</p>
+        <div class="flex flex-column" style="flex: 1">
-        </div>
+          <div class="text-center">
-        <div class="grid p-fluid">
+            <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
-          <div class="col-6">
+            <h4>{{ message.summary }}</h4>
-            <button type="button" pButton (click)="onConfirm()" label="Да" class="p-button-success"></button>
+            <p style="font-weight: 600">{{ message.detail }}</p>
           </div>
-          <div class="col-6">
+          <div class="grid p-fluid">
-            <button type="button" pButton (click)="onReject()" label="Нет" class="p-button-secondary"></button>
+            <div class="col-6">
+              <button
+                type="button"
+                pButton
+                (click)="onConfirm()"
+                label="Да"
+                class="p-button-success"
+              ></button>
+            </div>
+            <div class="col-6">
+              <button
+                type="button"
+                pButton
+                (click)="onReject()"
+                label="Нет"
+                class="p-button-secondary"
+              ></button>
+            </div>
           </div>
         </div>
-      </div>
+      </ng-template>
-    </ng-template>
+    </p-toast>
-  </p-toast>
-</div>
-
-<app-user-data-order *ngIf="orderConfirmed" (orderSubmitted)="orderSubmitted()"></app-user-data-order>
-
-<div #loadingEl *ngIf="loading && !orderConfirmed">
-  <div class="angular-spinner-container" style="width: fit-content; height: 100%; margin: 16px auto;">
-    <p-progressSpinner styleClass="angular-spinner"></p-progressSpinner>
   </div>
-</div>
 
-<div #empty *ngIf="!loading && (!order || !order.products.length)">
+  <app-user-data-order
-  <div class="woocommerce-mini-cart__empty-message jupiterx-icon-shopping-cart-6">Корзина пустая.</div>
+    *ngIf="orderConfirmed"
-</div>
+    (orderSubmitted)="orderSubmitted()"
+  ></app-user-data-order>
+
+  <div #loadingEl *ngIf="loading && !orderConfirmed">
+    <div
+      class="angular-spinner-container"
+      style="width: fit-content; height: 100%; margin: 16px auto"
+    >
+      <p-progressSpinner styleClass="angular-spinner"></p-progressSpinner>
+    </div>
+  </div>
+
+  <div #empty *ngIf="!loading && (!order || !order.products.length)">
+    <div
+      class="woocommerce-mini-cart__empty-message jupiterx-icon-shopping-cart-6"
+    >
+      Корзина пустая.
+    </div>
+  </div>
+</p-sidebar>

angular/src/app/pages/cart/cart.component.scss

@@ -1,234 +1,235 @@
 :host {
-    .cart {
+  .cart {
-        margin-top: 16px;
+    margin-top: 16px;
-        margin-bottom: 100px;
+    margin-bottom: 100px;
-        max-width: 400px;
+    max-width: 400px;
-        margin-left: auto;
+    margin-left: auto;
-        margin-right: auto;
+    margin-right: auto;
+  }
+
+  .elementor-menu-cart {
+    &__product {
+      grid-template-columns: 71px auto;
+      grid-template-rows: var(
+        --price-quantity-position--grid-template-rows,
+        auto auto
+      );
+      position: relative;
+      display: grid;
+      padding-bottom: 0;
+      padding-right: 30px;
+
+      .variation {
+        display: grid;
+        grid-template-columns: max-content auto;
+        margin: 10px 8px;
+        color: var(--product-variations-color, #373a3c);
+
+        dt {
+          grid-column-start: 1;
+          font-weight: 700;
+        }
+
+        dd {
+          grid-column-start: 2;
+          -webkit-margin-start: 5px;
+          margin-inline-start: 5px;
+          margin-bottom: 0.5rem;
+          margin-left: 6px;
+        }
+      }
     }
 
-    .elementor-menu-cart {
+    &__product-image {
-        &__product {
+      grid-row-start: 1;
-            grid-template-columns: 71px auto;
+      grid-row-end: 3;
-            grid-template-rows: var(--price-quantity-position--grid-template-rows, auto auto);
+      width: 100%;
-            position: relative;
-            display: grid;
-            padding-bottom: 0;
-            padding-right: 30px;
 
-            .variation {
+      img {
-                display: grid;
+        border-radius: 6px;
-                grid-template-columns: max-content auto;
+        object-fit: cover;
-                margin: 10px 8px;
+      }
-                color: var(--product-variations-color, #373a3c);
-
-                dt {
-                    grid-column-start: 1;
-                    font-weight: 700;
-                }
-
-                dd {
-                    grid-column-start: 2;
-                    -webkit-margin-start: 5px;
-                    margin-inline-start: 5px;
-                    margin-bottom: 0.5rem;
-                    margin-left: 6px;
-                }
-            }
-        }
-
-        &__product-image {
-            grid-row-start: 1;
-            grid-row-end: 3;
-            width: 100%;
-
-            img {
-                border-radius: 6px;
-                object-fit: cover;
-            }
-        }
-
-        &__product-name {
-            grid-column-start: 2;
-            grid-column-end: 3;
-            margin: 0;
-            font-size: 14px;
-            padding-left: 20px;
-        }
-
-        &__product-price {
-            font-size: 14px;
-            padding-left: 20px;
-            grid-column-start: 2;
-            grid-column-end: 3;
-            -ms-flex-item-align: var(--price-quantity-position--align-self, end);
-            align-self: var(--price-quantity-position--align-self, end);
-            font-weight: 400;
-        }
-
-        &__product-remove {
-            color: #818a91;
-            width: var(--remove-item-button-size, 22px);
-            height: var(--remove-item-button-size, 22px);
-            border-radius: var(--remove-item-button-size, 22px);
-            border: 1px solid var(--remove-item-button-color, #d4d4d4);
-            text-align: center;
-            overflow: hidden;
-            position: absolute;
-            top: 0px;
-            right: 0;
-            bottom: 20px;
-            -webkit-transition: .3s;
-            -o-transition: .3s;
-            transition: .3s;
-
-            &::before,
-            &::after {
-                content: "";
-                position: absolute;
-                height: 1px;
-                width: 50%;
-                top: 50%;
-                left: 25%;
-                margin-top: -1px;
-                background: var(--remove-item-button-color, #d4d4d4);
-                z-index: 1;
-                -webkit-transition: .3s;
-                -o-transition: .3s;
-                transition: .3s;
-            }
-
-            &::before {
-                -webkit-transform: rotate(45deg);
-                -ms-transform: rotate(45deg);
-                transform: rotate(45deg);
-            }
-
-            &::after {
-                -webkit-transform: rotate(-45deg);
-                -ms-transform: rotate(-45deg);
-                transform: rotate(-45deg);
-            }
-
-            &>a {
-                display: block;
-                z-index: 2;
-                width: 100%;
-                height: 100%;
-                overflow: hidden;
-                opacity: 0;
-                position: absolute;
-            }
-        }
-
-        &__bottom-info {
-            position: fixed;
-            width: 100%;
-            left: 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            bottom: 58px;
-            padding: 18px;
-            background: #fff;
-            z-index: 3;
-        }
-
-        &__subtotal {
-            font-weight: 600;
-            font-size: 20px;
-            display: flex;
-            flex-direction: column;
-
-            & .products-count {
-                font-size: 12px;
-                font-weight: 400;
-            }
-        }
-
-        &__footer-buttons {
-            a {
-                padding: 12px;
-                display: block;
-                width: fit-content;
-                background: #09467f;
-                border-radius: 4px;
-                text-decoration: none;
-                color: #fff;
-                font-size: 12px;
-            }
-        }
     }
 
-    .product-thumbnail {
+    &__product-name {
-        background: #eee;
+      grid-column-start: 2;
-        border-radius: 9px;
+      grid-column-end: 3;
-        height: 70px;
+      margin: 0;
+      font-size: 14px;
+      padding-left: 20px;
     }
 
-    .product-change-amount {
+    &__product-price {
-        width: 50px;
+      font-size: 14px;
-        height: 30px;
+      padding-left: 20px;
-        margin-top: 4px;
+      grid-column-start: 2;
-        border-radius: 5px;
+      grid-column-end: 3;
-        display: flex;
+      -ms-flex-item-align: var(--price-quantity-position--align-self, end);
-        border: solid #cbcbcb 1px;
+      align-self: var(--price-quantity-position--align-self, end);
-        color: #525252;
+      font-weight: 400;
-        cursor: pointer;
-        user-select: none;
-
-        &__symbol {
-            width: 50%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border-right: solid #cbcbcb 1px;
-        }
     }
 
-    .cart-product {
+    &__product-remove {
-        &__supplements {
+      color: #818a91;
-            position: absolute;
+      width: var(--remove-item-button-size, 22px);
-            right: 0;
+      height: var(--remove-item-button-size, 22px);
-            bottom: 26px;
+      border-radius: var(--remove-item-button-size, 22px);
-            padding: 8px;
+      border: 1px solid var(--remove-item-button-color, #d4d4d4);
-            background: #f9b004;
+      text-align: center;
-            color: #fff;
+      overflow: hidden;
-            border-radius: 4px;
+      position: absolute;
-            cursor: pointer;
+      top: 0px;
-        }
+      right: 0;
-    }
+      bottom: 20px;
+      -webkit-transition: 0.3s;
+      -o-transition: 0.3s;
+      transition: 0.3s;
 
-    .woocommerce-mini-cart__empty-message {
+      &::before,
-        text-align: center;
+      &::after {
-        margin-top: 16px;
+        content: "";
-    }
+        position: absolute;
+        height: 1px;
+        width: 50%;
+        top: 50%;
+        left: 25%;
+        margin-top: -1px;
+        background: var(--remove-item-button-color, #d4d4d4);
+        z-index: 1;
+        -webkit-transition: 0.3s;
+        -o-transition: 0.3s;
+        transition: 0.3s;
+      }
 
-    hr {
+      &::before {
-        width: 80%;
+        -webkit-transform: rotate(45deg);
-        margin: 14px auto;
+        -ms-transform: rotate(45deg);
-        border-top: solid #d1d1d1 1px;
+        transform: rotate(45deg);
-    }
+      }
 
-    .clear-cart {
+      &::after {
-        padding: 8px;
+        -webkit-transform: rotate(-45deg);
-        border: none;
+        -ms-transform: rotate(-45deg);
-        border-radius: 4px;
+        transform: rotate(-45deg);
-        background: #d7120b;
+      }
-        color: #fff;
+
-        margin: 32px auto;
+      & > a {
         display: block;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        opacity: 0;
+        position: absolute;
+      }
     }
 
-    @media screen and (min-width: 550px) {
+    &__bottom-info {
-        .elementor-menu-cart__bottom-info {
+      position: fixed;
-            bottom: 84px;
+      width: 100%;
-            width: 500px;
+      left: 0;
-            left: 50%;
+      display: flex;
-            transform: translate(-50%, 0);
+      justify-content: space-between;
-            border: solid 1px #dfdfdf;
+      align-items: center;
-            border-radius: 12px;
+      bottom: 0;
-        }
+      padding: 18px;
+      background: #fff;
+      z-index: 3;
+      border-top: solid 1px #e7e7e7;
     }
-}
+
+    &__subtotal {
+      font-weight: 600;
+      font-size: 20px;
+      display: flex;
+      flex-direction: column;
+
+      & .products-count {
+        font-size: 12px;
+        font-weight: 400;
+      }
+    }
+
+    &__footer-buttons {
+      a {
+        padding: 12px;
+        display: block;
+        width: fit-content;
+        background: #09467f;
+        border-radius: 4px;
+        text-decoration: none;
+        color: #fff;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .product-thumbnail {
+    background: #eee;
+    border-radius: 9px;
+    height: 70px;
+  }
+
+  .product-change-amount {
+    width: 50px;
+    height: 30px;
+    margin-top: 4px;
+    border-radius: 5px;
+    display: flex;
+    border: solid #cbcbcb 1px;
+    color: #525252;
+    cursor: pointer;
+    user-select: none;
+
+    &__symbol {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-right: solid #cbcbcb 1px;
+    }
+  }
+
+  .cart-product {
+    &__supplements {
+      position: absolute;
+      right: 0;
+      bottom: 26px;
+      padding: 8px;
+      background: #f9b004;
+      color: #fff;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  }
+
+  .woocommerce-mini-cart__empty-message {
+    text-align: center;
+    margin-top: 16px;
+  }
+
+  hr {
+    width: 80%;
+    margin: 14px auto;
+    border-top: solid #d1d1d1 1px;
+  }
+
+  .clear-cart {
+    padding: 8px;
+    border: none;
+    border-radius: 4px;
+    background: #d7120b;
+    color: #fff;
+    margin: 32px auto;
+    display: block;
+  }
+
+  @media screen and (min-width: 650px) {
+    .elementor-menu-cart__bottom-info {
+      width: 450px;
+      right: 0;
+      left: auto;
+    }
+  }
+}

angular/src/app/pages/cart/cart.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
 import { MessageService } from 'primeng/api';
 import { Order } from 'src/app/models/order';
 import { OrderProduct } from 'src/app/models/order-product';
@@ -16,6 +16,9 @@ export class CartComponent implements OnInit {
   public orderConfirmed = false;
   public order!: Order;
   public price!: number;
+  public visibleSidebar: boolean = false;
+  public isFullScreen!: boolean;
+  public width!: number;
 
   constructor(
     private orderService: OrderService,
@@ -24,9 +27,31 @@ export class CartComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
+    this.width = window.innerWidth;
+    this.changeDullScreenMode()
     this.loadCart()
   }
 
+  // Изменение размера окна
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any) {
+      this.width = event.target.innerWidth;
+      this.changeDullScreenMode()
+  }
+
+  toggleSideBar(): void{
+    this.visibleSidebar = !this.visibleSidebar;
+    this.loadCart()
+  }
+
+  changeDullScreenMode() {
+    if (this.width < 650) {
+      this.isFullScreen = true
+    } else {
+      this.isFullScreen = false
+    }
+  }
+
   async loadCart(): Promise<void> {
     this.loading = true;
     this.order = await this.orderService.getOrder(true);

angular/src/app/pages/not-found/not-found.component.html

@@ -1,8 +1,8 @@
 <div class="not-found-page">
-  <app-navbar></app-navbar>
   <div class="not-found-page__container">
     <h1>404</h1>
     <p>Упс, что-то пошло не так!</p>
-    <button (click)="routeHome()">Вернуться на главную</button>
+    <a href="#" (click)="routeHome($event)">Перейти на главную</a>
+    <!-- <button (click)="routeHome()">Вернуться на главную</button> -->
   </div>
 </div>

angular/src/app/pages/not-found/not-found.component.scss

@@ -1,27 +1,30 @@
 :host {
   .not-found-page {
+    height: calc(100vh - 70px);
     &__container {
       text-align: center;
-      margin-top: 32px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      -moz-user-select: none;
+      -khtml-user-select: none;
+      user-select: none;
       h1 {
-        font-size: 108px;
+        font-size: 136px;
         font-weight: 600;
-        color: #09467f;
+        color: #252525;
       }
       p {
-        margin: 16px 0;
+        margin: 48px 0;
         font-size: 14px;
       }
-      button {
+      a {
-        background-color: #09467f;
+        letter-spacing: 1px;
-        color: #fff;
+        color: #252525;
-        border-radius: 8px;
+        border-bottom: 2px solid #252525;
-        display: flex;
+        font-weight: 600;
-        justify-content: center;
-        align-items: center;
-        padding: 12px;
-        margin: 0 auto;
-        border: 0;
       }
     }
   }

angular/src/app/pages/not-found/not-found.component.ts

@@ -1,20 +1,23 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-not-found',
   templateUrl: './not-found.component.html',
-  styleUrls: ['./not-found.component.scss']
+  styleUrls: ['./not-found.component.scss'],
 })
 export class NotFoundComponent implements OnInit {
+  constructor(private router: Router, private route: ActivatedRoute) {}
 
-  constructor(private router: Router) { }
+  ngOnInit(): void {}
 
-  ngOnInit(): void {
+  routeHome(event: MouseEvent) {
+    if (event) {
+      event.preventDefault();
+    }
+    this.router.navigate(['/'], {
+      relativeTo: this.route,
+      queryParamsHandling: 'merge',
+    });
   }
-
-  routeHome() {
-    this.router.navigate(['/']);
-  }
-
 }

angular/src/app/pages/products/products.component.scss

@@ -112,6 +112,7 @@
                     margin: 0;
                     font-size: 30px;
                     font-weight: 500;
+                    max-width: 150px;
                 }
 
                 button {
@@ -234,17 +235,21 @@
 
     @media screen and (max-width: 631px) {
         .products-container {
-            max-width: 306px;
+            max-width: 400px;
-        }
-    }
-
-    @media screen and (max-width: 450px) {
-        .products-container {
-            max-width: none;
 
             &__item {
                 width: 100%;
             }
         }
     }
+
+    // @media screen and (max-width: 631px) {
+    //     .products-container {
+    //         // max-width: none;
+
+    //         &__item {
+    //             width: 100%;
+    //         }
+    //     }
+    // }
 }

angular/src/styles.scss

@@ -186,6 +186,11 @@ p-toast[key="c"] .p-toast {
     bottom: 57px;
 }
 
+.p-sidebar-right {
+    width: 450px !important;
+    max-width: 85% !important;
+}
+
 @media screen and (min-width: 550px) {
     p-toast[key="c"] .p-toast {
         bottom: 73px;