Fixed all the errors

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnPaste": false,
+  "editor.formatOnSave": false
+}

angular.json

@@ -30,6 +30,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -90,12 +91,16 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "65930f43-84d0-4e1a-ad7f-c44c482292f1"
   }
 }

package.json

@@ -11,13 +11,18 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^17.3.0",
+    "@angular/cdk": "^17.3.10",
     "@angular/common": "^17.3.0",
     "@angular/compiler": "^17.3.0",
     "@angular/core": "^17.3.0",
     "@angular/forms": "^17.3.0",
+    "@angular/material": "^17.3.10",
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
+    "@ngrx/effects": "^17.2.0",
+    "@ngrx/store": "^17.2.0",
+    "@ngrx/store-devtools": "^17.2.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -35,4 +40,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.4.2"
   }
-}
+}

src/app/Components/admin/admin.component.html

@@ -0,0 +1 @@
+<p>admin page!</p>

src/app/Components/admin/admin.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-admin',
+  standalone: true,
+  imports: [],
+  templateUrl: './admin.component.html',
+  styleUrl: './admin.component.scss'
+})
+export class AdminComponent { }

src/app/Components/auth/auth.component.html

@@ -0,0 +1,29 @@
+<div class="container" shadowHighLight>
+  <h1 class="title">Войти?</h1>
+
+  <div class="btn-wrapper">
+    <button
+      class="btn"
+      mat-raised-button
+      color="warn"
+      mat-dialog-close="admin"
+      shadowHighLight
+      matTooltip="Войти как админ"
+    >
+      <mat-icon class="mat-icon">engineering</mat-icon>
+      Админ
+    </button>
+
+    <button
+      class="btn"
+      mat-raised-button
+      color="primary"
+      mat-dialog-close="user"
+      shadowHighLight
+      matTooltip="Войти как юзер"
+    >
+      <mat-icon class="mat-icon">person</mat-icon>
+      Юзер
+    </button>
+  </div>
+</div>

src/app/Components/auth/auth.component.scss

@@ -0,0 +1,29 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #171c25;
+  border-radius: 5px;
+  width: 500px;
+  height: 150px;
+}
+
+.title {
+  text-align: center;
+  margin-bottom: 30px;
+  color: #F0BA4E;
+}
+
+.btn-wrapper {
+  display: flex;
+}
+
+.btn {
+  margin: 0 auto;
+  width: 150px;
+  height: 30px;
+}
+
+.mat-icon {
+  margin-right: 15px;
+}

src/app/Components/auth/auth.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { MatButton } from "@angular/material/button";
+import { MatDialogClose } from "@angular/material/dialog";
+import { MatTooltip } from "@angular/material/tooltip";
+import { MatIcon } from "@angular/material/icon";
+
+@Component({
+  selector: 'app-auth',
+  standalone: true,
+  imports: [
+    MatButton,
+    MatDialogClose,
+    MatTooltip,
+    MatIcon
+  ],
+  templateUrl: './auth.component.html',
+  styleUrl: './auth.component.scss'
+})
+export class AuthComponent { }

src/app/Components/footer/footer.component.html

@@ -0,0 +1,10 @@
+<div class="footer">
+  <nav class="header_nav">
+    <div *ngFor="let item of menuItems" class="header_nav_item">{{ item }}</div>
+  </nav>
+  <div class="nav_icons">
+    <img src="/assets/facebook.svg" alt="" />
+    <img src="/assets/whatsapp.svg" alt="" />
+    <img src="/assets/youtube.svg" alt="" />
+  </div>
+</div>

src/app/Components/footer/footer.component.scss

@@ -0,0 +1,26 @@
+.footer {
+  display: flex;
+  justify-content: space-between;
+  background: #171c22;
+  align-items: center;
+  color: #F0BA4E;
+  padding: 0 250px;
+  height: 150px;
+}
+
+.header_nav {
+  display: flex;
+  gap: 50px;
+  font-weight: 600;
+}
+
+.header_nav_item {
+  font-size: 17px;
+  font-weight: 600;
+}
+
+.nav_icons {
+  display: flex;
+  gap: 100px;
+  height: 50px;
+}

src/app/Components/footer/footer.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { NgFor } from "@angular/common";
+
+const menuItems: string[] = ['Главная', 'О компании', 'Каталог', 'Запчасти', 'Интерьер', 'Стиль', 'Партнеры'];
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  imports: [NgFor],
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss'
+})
+export class FooterComponent {
+  public readonly menuItems: string[] = menuItems;
+}

src/app/Components/header/header.component.html

@@ -0,0 +1,68 @@
+<div class="header_1">
+  <div class="header_left">
+    <div class="header_logo">
+      <img src="/assets/Maserati_logo_2.svg" alt="Логотип сайта" style="width: 150px">
+    </div>
+
+    <nav class="header_nav">
+      <div class="header_nav_item"><a routerLink="">{{ headerItem1 }}</a></div>
+      <div class="header_nav_item"><a>{{ aboutCompany }}</a></div>
+      <div class="header_nav_item" *ngIf="showCatalogCompany"><a>{{ headerItem3 }}</a></div>
+    </nav>
+
+    <button class="btn"><a (click)="showCatalogCompany = !showCatalogCompany">Скрыть/Показать каталог</a></button>
+    <button class="btn"><a (click)="changeMenuText()">Изменить текст</a></button>
+    <button class="btn"><a routerLink="users">Users</a></button>
+    <button class="btn"><a routerLink="admin">Admin</a></button>
+  </div>
+
+  <div class="header_right">
+    <div class="header_item">
+      <img src="/assets/phone.svg" alt="Логотип телефона" style="width: 25px">
+      <div class="header_phone_number">
+        <a href="tel:+7 (708) 070-70-70">
+          <p>{{ '+7(708) 070 - 70 - 70' | removeDashes }}</p>
+        </a>
+      </div>
+    </div>
+
+    <div class="header_item">
+      <button class="btn_shop_cart" colorBasket>
+        <img src="/assets/shop-cart.svg" alt="Логотип корзина" style="width: 25px">
+        <span>Пусто</span>
+      </button>
+    </div>
+
+    <button (click)="openLoginDialog()" mat-raised-button color="primary" class="btn_enter"
+            *ngIf="(userService.user$ | async) === null">Войти
+    </button>
+    <button (click)="logoutOpenDialog()" mat-raised-button color="accent" class="btn_exit"
+            *ngIf="(userService.user$ | async) !== null">Выйти
+    </button>
+  </div>
+</div>
+
+<div class="header_2">
+  <div class="header_2_left">
+    <div class="header_2_logo">
+      <img src="/assets/light.svg" alt="Логотип меню">
+    </div>
+
+    <nav class="header_nav_2" *ngIf="changeMenuText">
+      <div class="header_2_nav_item" *ngFor="let item of menuItems">{{ item }}</div>
+      <div class="current_date">
+        <p>{{ headerDate }}: {{ '' | customCurrentDateTime }}</p>
+      </div>
+    </nav>
+  </div>
+
+  <div class="header_2_right">
+    <form>
+      <input type="search" class="header_2_input" placeholder="Найти автомобиль?">
+    </form>
+    <div class="header_map_nav">
+      <img src="/assets/map-pin.svg" alt="Логотип навигация">
+      <button class="map_nav">Калифорния</button>
+    </div>
+  </div>
+</div>