fixed header icons active state

src/app/components/header/header.component.html

@@ -17,10 +17,10 @@
           <a routerLink="/search" routerLinkActive="novo-active" (click)="closeMenu()" class="novo-link">
             Поиск
           </a>
-          <a routerLink="/about" (click)="closeMenu()" class="novo-link">
+          <a routerLink="/about" routerLinkActive="novo-active" (click)="closeMenu()" class="novo-link">
             О нас
           </a>
-          <a routerLink="/contacts" (click)="closeMenu()" class="novo-link">
+          <a routerLink="/contacts" routerLinkActive="novo-active" (click)="closeMenu()" class="novo-link">
             Контакты
           </a>
         </div>
@@ -64,10 +64,10 @@
              (click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-left">
             Главная
           </a>
-          <a routerLink="/about" (click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-middle">
+          <a routerLink="/about" routerLinkActive="dexar-active" (click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-middle">
             О нас
           </a>
-          <a routerLink="/contacts" (click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-right">
+          <a routerLink="/contacts" routerLinkActive="dexar-active" (click)="closeMenu()" class="dexar-nav-btn dexar-nav-btn-right">
             Контакты
           </a>
         </div>
@@ -149,7 +149,7 @@
         </svg>
       </a>
 
-      <a routerLink="/about" (click)="closeMenu()" class="dexar-mobile-item">
+      <a routerLink="/about" routerLinkActive="dexar-mobile-active" (click)="closeMenu()" class="dexar-mobile-item">
         <svg width="24" height="24" viewBox="0 0 31 31" fill="none">
           <path d="M27.125 1.9375C28.1951 1.9375 29.0625 2.80495 29.0625 3.875V27.125C29.0625 28.1951 28.1951 29.0625 27.125 29.0625H3.875C2.80495 29.0625 1.9375 28.1951 1.9375 27.125V3.875C1.9375 2.80495 2.80495 1.9375 3.875 1.9375H27.125ZM3.875 0C1.7349 0 0 1.7349 0 3.875V27.125C0 29.2651 1.7349 31 3.875 31H27.125C29.2651 31 31 29.2651 31 27.125V3.875C31 1.7349 29.2651 0 27.125 0H3.875Z" fill="#497671" />
           <path d="M17.3032 12.764L12.8644 13.3203L12.7055 14.0582L13.5796 14.2172C14.1472 14.3534 14.2608 14.5577 14.1359 15.1254L12.7055 21.8461C12.3308 23.583 12.9098 24.4004 14.2721 24.4004C15.3279 24.4004 16.554 23.9122 17.1102 23.2424L17.2805 22.4364C16.8945 22.777 16.3269 22.9132 15.9523 22.9132C15.4187 22.9132 15.2257 22.5386 15.362 21.8801L17.3032 12.764Z" fill="#497671" />
@@ -161,7 +161,7 @@
         </svg>
       </a>
 
-      <a routerLink="/contacts" (click)="closeMenu()" class="dexar-mobile-item">
+      <a routerLink="/contacts" routerLinkActive="dexar-mobile-active" (click)="closeMenu()" class="dexar-mobile-item">
         <svg width="24" height="24" viewBox="0 0 31 31" fill="none">
           <path d="M0 7.75C0 5.6099 1.7349 3.875 3.875 3.875H27.125C29.2651 3.875 31 5.6099 31 7.75V23.25C31 25.3901 29.2651 27.125 27.125 27.125H3.875C1.7349 27.125 0 25.3901 0 23.25V7.75ZM3.875 5.8125C2.80495 5.8125 1.9375 6.67995 1.9375 7.75V8.17025L15.5 16.3078L29.0625 8.17025V7.75C29.0625 6.67995 28.1951 5.8125 27.125 5.8125H3.875ZM29.0625 10.4297L19.9406 15.9029L29.0625 21.5164V10.4297ZM28.9971 23.7511L18.0688 17.026L15.5 18.5672L12.9312 17.026L2.00292 23.7511C2.22375 24.5782 2.97823 25.1875 3.875 25.1875H27.125C28.0218 25.1875 28.7762 24.5782 28.9971 23.7511ZM1.9375 21.5164L11.0594 15.9029L1.9375 10.4297V21.5164Z" fill="#497671" />
         </svg>

src/app/components/header/header.component.scss

@@ -680,6 +680,20 @@
     transform: translateY(0);
   }
 
+  &.dexar-mobile-active {
+    background: #497671;
+    color: #ffffff;
+    border-color: #497671;
+
+    svg path {
+      fill: #ffffff;
+    }
+
+    .dexar-mobile-chevron path {
+      stroke: #ffffff;
+    }
+  }
+
   svg:first-child {
     flex-shrink: 0;
     width: 24px;