menu

src/app/_modules/layout/header/header.component.html

@@ -6,7 +6,7 @@
     <img src="" alt="site logo">
   </a>
 
-  <pages-menu *ngIf="rootPage" [root]="rootPage" class="top-menu"></pages-menu>
+  <pages-menu class="lvl-0"></pages-menu>
 
   <div class="inline center">
     <locale></locale>

src/app/_modules/layout/left-content/left-content.component.html

@@ -0,0 +1 @@
+<pages-menu class="lvl-0"></pages-menu>

src/app/_modules/layout/left-content/left-content.component.ts

@@ -1,8 +1,6 @@
-import { Component } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
-import { Subscription } from "rxjs";
-import { PagesService } from "@app/_services/pages.service";
-import { FormsService } from '@app/_services';
+import {Component} from '@angular/core';
+import {Router} from "@angular/router";
+import {PagesService} from "@app/_services/pages.service";
 
 @Component({
   selector: 'left-content',
@@ -11,61 +9,18 @@ import { FormsService } from '@app/_services';
 })
 export class LeftContentComponent {
 
-  public url: string = "";
-  public background:string;
-  public pageName:string;
-  public editable:string;
-  public editMode: boolean = false;
-  private pageID: string;
-  private routeSubscription: Subscription;
-
-
-
   constructor(
     private router: Router,
-    private pagesService:PagesService,
-    private formsService: FormsService) {
-
+    public pagesService: PagesService
+    ) {
   }
 
-  ngOnInit(){
-    this.pagesService.editMode.subscribe(
-      mode => {
-        this.editMode = mode;
-      }
-    );
-    this.pagesService.currentPageSubject.subscribe(
-      page => this.fetch(page)
-    )
+  get rootPage() {
+    return this.pagesService.rootPage;
   }
 
-  fetch(page:any){
-    if (page){
-      this.background = page.image?.data?.links?.full;
-      if (this.background) this.background = `url(${this.background})`;
-      this.pageName = (page.parents?.data[2]||page).name;
-      this.editable = page.permissions?.edit || page.permissions?.anything;
-      this.pageID = page.id
-    }else{
-      this.pageName = null;
-      this.editable = null;
-      this.pagesService.editMode.next(false)
-    }
-  }
-
-  toggleEditMode(){
-    this.pagesService.editMode.next(!this.editMode)
-  }
-
-  editBackground() {
-    this.formsService.createModel('page-background', {extraProps: {attach: {pageId: this.pageID}}});
-  }
-
-  removeBackground() {
-    if (confirm('Вы деествительно хотите удалить этот фон?')) {
-      this.pagesService.deleteBackground(this.pageID).subscribe(res => {
-      });
-    }
+  openMobileMenu(){
+    this.router.navigate([{outlets: {slider: 'pages-menu'}}], {skipLocationChange: true}).then();
   }
 
 }

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

@@ -1,4 +1,5 @@
-<div class="item">
-  <a [routerLink]="item.link" routerLinkActive="active">{{item.name}}</a>
+<div class="item" [ngClass]="itemClass">
+  <drop-down ico="arrow_drop_down_24" (toggle)="toggle($event)" [visible]="open" [angle]="[-90,0]" *ngIf="hasChildren"></drop-down>
+  <a (click)="select()">{{item.name}}</a>
 </div>
-<pages-menu *ngIf="children?.length" [root]="item" [level]="level + 1"></pages-menu>
+<pages-menu *ngIf="children?.length" [items]="children" [level]="level + 1"  [ngClass]="menuClass"></pages-menu>

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

@@ -1,20 +0,0 @@
-:host{
-    display: flex;
-    flex-direction: column;
-
-}
-
-.item{
-    display: flex;
-    align-items: flex-start;
-    drop-down{
-        margin-left: -24px;
-    }
-    min-height: 24px;
-    >a{
-      margin-top: 4px;
-      &.active {
-        color: #000000;
-      }
-    }
-}

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

@@ -1,4 +1,7 @@
 import {Component, Input} from '@angular/core';
+import { MenuService } from '@app/_services/menu.service';
+import { PagesService } from '@app/_services/pages.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'pages-menu-item',
@@ -8,15 +11,91 @@ import {Component, Input} from '@angular/core';
 export class PagesMenuItemComponent {
   @Input() item: any;
   @Input() level: number;
+  open=false
 
-  constructor() {
-  }
+  constructor(
+    private menuService: MenuService,
+    private pagesService: PagesService,
+    private router: Router
+  ) {}
 
   get children() {
     return this.item.children?.data;
   }
 
+  get hasChildren(){
+    return this.item.hasChildren
+  }
+
+  get current(){
+    return this.item.link == this.pagesService.currentPage.link
+  }
+
+  get selected(){
+    return this.item.link == this.pagesService.menuSelectedLink
+  }
+
+  get parent(){
+    return !this.current && this.pagesService.currentPage.link.startsWith(this.item.link)
+  }
+
+  get itemClass(){
+    let resp = {
+      'current': this.current,
+      'parent': this.parent,
+      'open': this.open,
+      'selected': this.selected
+    }
+    resp['lvl-'+this.level] = true;
+    return resp
+  }
+
+  get menuClass(){
+    let resp = {
+      'current': this.current,
+      'parent': this.parent,
+      'open': this.open,
+      'selected': this.selected
+    }
+    resp['lvl-'+(this.level+1)] = true;
+    return resp
+  }
+
+  findChildren(){
+    if (this.item.hasChildren && !this.item.children){
+      let include = [
+        'children'
+      ];
+      this.pagesService.find(this.item.link, {include: include.join(',')}).subscribe(resp => {
+        this.item.children = resp.data.children
+      }, error => {
+        console.log('error')
+      });
+    }
+  }
+
+
+
+  toggle(event){
+
+    this.open = event;
+    if(event){
+      this.findChildren()
+    }
+  }
+
+  select(){
+    console.log(this.item)
+    this.pagesService.menuSelectedLink = this.item.link
+    if (this.item.type.name == 'nav-page'){
+        this.toggle(!this.open)
+    }else{
+      this.router.navigateByUrl(this.item.link)
+    }
+  }
+
   ngOnInit(){
+    this.open = this.current || this.parent || this.selected
   }
 
 }

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

@@ -1 +1 @@
-<pages-menu-item [item]="item" [level]="level" *ngFor="let item of children"></pages-menu-item>
+<pages-menu-item [item]="item" [level]="level" *ngFor="let item of items"></pages-menu-item>

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

@@ -1,5 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {PagesService} from "@app/_services/pages.service";
+import { combineLatest } from 'rxjs';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'pages-menu',
@@ -7,26 +9,45 @@ import {PagesService} from "@app/_services/pages.service";
   styleUrls: ['pages-menu.component.scss']
 })
 export class PagesMenuComponent implements OnInit {
-  @Input() root: any;
   @Input() level = 0;
+  @Input() items:any;
+  private subscription: Subscription
 
-  constructor(private pagesService: PagesService) {
+  constructor(
+    private pagesService: PagesService,
+    
+    ) {
   }
 
-  get children() {
-    return this.root?.children?.data;
-  }
-
-
   ngOnInit() {
-    if (this.root && this.root?.hasChildren && !this.children) this.fetch();
+    if(!this.items){
+
+      this.subscription = combineLatest([
+        this.pagesService.currentPageSubject,
+        this.pagesService.rootPageSubject
+      ]).subscribe(
+        resp=>{    
+          let [currentPage, rootPage] = resp     
+          if(currentPage){
+            let menuTree = currentPage.parents.data.reduceRight(
+              (menuTree,item)=>{
+                let fothersSonID = item.children.data.findIndex(
+                  child => child.id == menuTree.id
+                )                
+                item.children.data[fothersSonID] = menuTree
+                return item
+              }, currentPage);
+            this.items = menuTree.children.data;
+          }else{
+            this.items = rootPage?.data[0].children.data
+          }
+        }     
+      )
+    }
   }
 
-  fetch() {
-    let include = ['children'];
-    this.pagesService.show(this.root.id, {include: include.join(',')}).subscribe(res => {
-      this.root = res.data;
-    });
+  ngOnDestroy(){
+    this.subscription?.unsubscribe()
   }
 
-}
+}

src/app/_services/pages.service.ts

@@ -10,6 +10,7 @@ export class PagesService {
   public rootPageSubject = new BehaviorSubject<any>(null);
   public metaSubject = new BehaviorSubject<any>({title: '', description: '', keywords: ''});
   public editMode = new BehaviorSubject<boolean>(false);
+  public menuSelectedLink: string;
 
   constructor(private http: HttpClient) {
     //this.find('/').subscribe(res => {this.rootPage = res.data});

src/assets/css/_grid.scss

@@ -53,6 +53,22 @@ jumbotron{
   }
 }
 
+
+left-content{
+  pages-menu:not(.lvl-0,.open){
+    display: none;
+  }
+}
+
+right-content{
+  .item{display: none;}
+  pages-menu.selected{
+    pages-menu-item>.item{
+      display: flex;
+    }
+  }
+}
+
 .content-sapce{
   flex-grow: 1;
   .content-grid{
@@ -133,4 +149,30 @@ footer{
   .footer{
     padding: 40px 24px;
   }
-}
+}
+
+
+
+
+
+pages-menu-item{
+  display: flex;
+  flex-direction: column;
+
+}
+
+.item{
+  display: flex;
+  align-items: flex-start;
+  drop-down{
+      margin-left: -24px;
+  }
+  min-height: 24px;
+  >a{
+    margin-top: 4px;
+    &.active {
+      color: #000000;
+    }
+  }
+}
+

src/assets/css/_main-menu.scss

@@ -8,7 +8,14 @@ header{
     align-items: center;
     justify-content: space-between;
 
-    
+    pages-menu{
+      flex-direction: row;
+      gap:24px;
+      &:not(.lvl-0){display: none;}
+      drop-down{
+        display: none;
+      }
+    }
   }
 };