From e09da95b41634607efc14bb93dff09b70f793bca Mon Sep 17 00:00:00 2001
From: Boris Voropaev <boris1voropaev@gmail.com>
Date: Tue, 26 Sep 2023 16:06:54 +0300
Subject: [PATCH] menu bug fix

---
 .../layout/header/header.component.ts         |  2 +-
 .../menu/item/pages-menu-item.component.html  |  2 +-
 .../pages/menu/pages-menu.component.ts        |  3 +-
 src/app/_modules/pages/page/page.component.ts |  3 +-
 src/assets/css/main-menu.scss                 | 41 ++++++++++++++++---
 5 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/app/_modules/layout/header/header.component.ts b/src/app/_modules/layout/header/header.component.ts
index 5d30059..41bde48 100644
--- a/src/app/_modules/layout/header/header.component.ts
+++ b/src/app/_modules/layout/header/header.component.ts
@@ -53,7 +53,7 @@ export class HeaderComponent {
 
 
   fetchMenu() {
-    let include = ['children.children'];
+    let include = ['children.children.children.children'];
     this.pagesService.root({include: include.join(',')}).subscribe(res => {
       this.menuItems = res.data;
     });
diff --git a/src/app/_modules/pages/menu/item/pages-menu-item.component.html b/src/app/_modules/pages/menu/item/pages-menu-item.component.html
index 1b378a7..d8d32d2 100644
--- a/src/app/_modules/pages/menu/item/pages-menu-item.component.html
+++ b/src/app/_modules/pages/menu/item/pages-menu-item.component.html
@@ -1,6 +1,6 @@
 <div class="expand" [ngClass]="{toggle:children?.length, open:showChildren}" (click)="showChildren=!showChildren"></div>
 
-<a [routerLink]="item.depth>=2?null:item.link" routerLinkActive="active" (click)="select(item)"
+<a [routerLink]="item.depth>=3?null:item.link" routerLinkActive="active" (click)="select(item)"
 [ngClass]="{'current-item':item.link==currentURL,'parent-item':parentItem}"><span>{{item.name}}</span></a>
 
 <pages-menu *ngIf="children?.length" [items]="children"  
diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts
index 750123c..1a03a44 100644
--- a/src/app/_modules/pages/menu/pages-menu.component.ts
+++ b/src/app/_modules/pages/menu/pages-menu.component.ts
@@ -37,7 +37,8 @@ export class PagesMenuComponent {
     if (!item.hasOwnProperty('depth')) item.depth=0;
     if (item.children?.data.length) item.depth = 1;
     item.children?.data.forEach(child => {
-      if (this.getDepth(child)>=item.depth) item.depth++;
+      let childDepth = this.getDepth(child)
+      if (childDepth>=item.depth) item.depth=childDepth+1;
     });
     return item.depth
   }
diff --git a/src/app/_modules/pages/page/page.component.ts b/src/app/_modules/pages/page/page.component.ts
index e86394d..4ead5e5 100644
--- a/src/app/_modules/pages/page/page.component.ts
+++ b/src/app/_modules/pages/page/page.component.ts
@@ -49,7 +49,6 @@ export class PageComponent {
         name= item?.name;
       }    
     }
-    name = name||this.page.name;
     return name;    
   }
 
@@ -95,7 +94,7 @@ export class PageComponent {
   }
 
   fetchMenu() {
-    let include = ['children.children'];
+    let include = ['children.children.children.children'];
     this.pagesService.root({include: include.join(',')}).subscribe(res => {
       this.menuItems = res.data;
     });
diff --git a/src/assets/css/main-menu.scss b/src/assets/css/main-menu.scss
index ad73aa4..1ee8c69 100644
--- a/src/assets/css/main-menu.scss
+++ b/src/assets/css/main-menu.scss
@@ -181,11 +181,10 @@
   .sub-menu{
     pages-menu {
       display: block;
-      padding-left: 8px;
     }
     a{
-      display: inline-block;
-      margin-bottom: 20px;
+      display: block;
+      padding: 10px 20px;
     }
     >pages-menu {
       display: flex;
@@ -196,7 +195,8 @@
         };
         a{
           span{
-            color: #6C6C6C;
+
+          color: #6C6C6C;
           font-family: PT Sans Narrow;
           font-size: 24px;
           font-style: normal;
@@ -224,19 +224,48 @@
         }
       }
       >pages-menu-item.depth{
-        >pages-menu{
+        >pages-menu{        
           
-
           >pages-menu-item{
             >a{display: none;}
             pages-menu{
               display: none;
               &.parent-item{
+                
                 display: block;
               }
 
             }
 
+            >pages-menu{ //first level
+              >pages-menu-item{
+                >a.active>span{
+                  color: var(--blue-1)
+                }
+
+                >pages-menu{ //second level
+                  >pages-menu-item{
+                    >a{
+                      
+                      >span{
+                        font-size: 20px;
+                        font-family: PT Sans;
+                        font-style: normal;
+                        font-weight: 400;
+                        line-height: 24px;
+                      }
+                    }
+                    >a.active{
+                      background-color: #EDEDED;
+                      border-radius: 8px;
+                      span{
+                        color:#2D2D2D
+                      }
+                    }
+                  }
+                }
+              }
+            }
           }
         
         }