right menu css

src/app/_modules/pages/menu/item/pages-menu-item.component.html

@@ -1,11 +1,11 @@
 <div class="item" [ngClass]="itemClass">
     <drop-down *ngIf="children?.length" 
-        ico="chevron_right_24" [visible]="toggle" [target]="menu" [angle]="[0,90]">
+        ico="chevron_right_24" [visible]="toggle" (toggle)="toggle=$event" [target]="menu" [angle]="[0,90]">
     </drop-down>
     <a [routerLink]="item.link">
         {{item.name}}
     </a>
 </div>
-<div #menu class="sub-menu" [ngClass]="menuClass">
+<div #menu class="sub-menu" [ngClass]="itemClass">
     <pages-menu *ngIf="children?.length" [items]="children" [lavel]="lavel+1"></pages-menu>
 </div>

src/app/_modules/pages/menu/item/pages-menu-item.component.ts

@@ -55,6 +55,7 @@ export class PagesMenuItemComponent {
       parent: this.parent&&!this.current,
       current: this.current
     }
+    itemClass['lavel-'+(this.lavel+1)] = true;
     return itemClass
   }
 }

src/assets/css/main-menu.scss

@@ -57,8 +57,12 @@ a.logo{
             display: none;
           }
         }
-        pages-menu{
+        .sub-menu:not(.current){
+          display:none;
+        }
+        .sub-menu>pages-menu{
           position: absolute;
+          padding: 0;
           height: 68px;
           width: 100vw;
           background-color: var(--white);
@@ -68,6 +72,7 @@ a.logo{
           gap:24px;
           align-items: top;
           justify-content: center;
+          z-index:1;
           pages-menu-item{
             pages-menu{
               display: none;
@@ -79,3 +84,88 @@ a.logo{
   }
 }
 
+right-content{
+      drop-down{
+        display: none !important;
+      }
+      .item{
+        padding: 10px;
+      }
+      pages-menu{
+        padding-left: 0 !important;
+      }
+
+      .lavel-1{
+        &.item{
+          display: none;
+        }
+      }
+
+      .lavel-2{
+        &.item{
+          display: none;
+        }
+        &.sub-menu{
+          &.parent,&.current{
+            background-color: var(--white);
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
+          }
+        }
+      }
+
+      .lavel-3 {
+        >a {
+          font-family: PT Sans Narrow;
+          font-size: 24px;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 32px;
+          /* 133.333% */
+          letter-spacing: 0.24px;
+          color: var(--second);
+
+          &:hover {
+            color: var(--prime-act);
+          }
+        }
+          &.parent>a,
+          &.current>a {
+              color: var(--prime);
+          }
+
+      }
+
+      .lavel-4 {
+        a {
+          font-family: PT Sans;
+          font-size: 20px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 24px;
+
+          color: var(--second);
+
+          &:hover {
+            color: var(--second-act);
+          }
+        }
+
+        &.current,&.parent {
+            background-color: #ededed;
+            border-radius: 8px;
+            a {              
+              color: var(--second-act);
+            }
+          }
+        
+
+      }
+
+
+
+
+
+    }
+