bagFix

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

@@ -1,4 +1,4 @@
-<div class="background"  [ngStyle]="{'background-image':background}">
+<div class="background"  [ngStyle]="{'background-image':background}" *ngIf="pageName">
     <div class="left-content">
         <header-user-bar></header-user-bar>
         <h1 class="h1-jumbotron">

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

@@ -25,9 +25,18 @@ export class LeftContentComponent {
     private router: Router,
     private pagesService:PagesService,
     private formsService: FormsService) {
+    
+  }
+
+  ngOnInit(){
     this.routeSubscription = this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd) this.onNavigationEnd(event);
     });
+    this.pagesService.editMode.subscribe(
+      mode => {
+        this.editMode = mode;
+      }
+    )
   }
 
   onNavigationEnd(event: NavigationEnd) {
@@ -45,24 +54,25 @@ export class LeftContentComponent {
     ];
     this.pagesService.find(this.url, {include: include.join(',')}).subscribe(
       resp => {
-        let page = resp.data;
+        let page = resp?.data;
         if (page){
           console.log(page);
           this.background = page.image?.data?.links?.full;
-          if (this.background) this.background = 'url('+this.background+')';
+          if (this.background) this.background = `url(${this.background})`;
           this.pageName = page.name;
           this.editable = page.permissions.edit || page.permissions.anything;
           this.pageID = page.id
-          console.log(this.background);
+        }else{
+          this.pageName = null;
+          this.editable = null;
+          this.pagesService.editMode.next(false)
         }
-
       }
     )
   }
 
   toggleEditMode(){
-    this.editMode =!this.editMode;
-    this.pagesService.editMode.next(this.editMode)
+    this.pagesService.editMode.next(!this.editMode)
   }
 
   editBackground() {

src/app/_modules/pages/page/page.component.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {NavigationEnd, Router} from "@angular/router";
 import {Subscription} from "rxjs";
 import {PagesService} from "@app/_services/pages.service";
-import {FormsService, ListsService} from "@app/_services";
+import {ListsService} from "@app/_services";
 
 @Component({
   templateUrl: 'page.component.html',
@@ -23,8 +23,7 @@ export class PageComponent {
   constructor(
     private router: Router,
     private pagesService: PagesService,
-    private listsService: ListsService,
-    private formsService: FormsService) {
+    private listsService: ListsService) {
     this.routeSubscription = this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd) this.onNavigationEnd(event);
     });
@@ -60,7 +59,7 @@ export class PageComponent {
     if (url !== this.url) {
       this.url = url;
       this.fetch();
-      this.editMode = false;
+      this.pagesService.editMode.next(false);
     }
   }
 

src/app/_modules/pages/pages.module.ts

@@ -48,6 +48,7 @@ import { SliderMenuComponent } from './menu/slider-menu/slider-menu.component';
     PagesListComponent,
     SearchSectionsComponent,
     PagesTreeComponent,
+    PagesTreeItemComponent,
   ]
 })
 export class PagesModule {}

src/assets/css/basics.scss

@@ -6,7 +6,7 @@
   --radius-1: 12px;
   --radius-2: 20px;
   --white: #ffffff;
-  --light: #DDD;
+  --light: #F6F6F6;
 
 
   --prime: #0070BA;
@@ -93,7 +93,7 @@ body {
       gap: 40px;
       left-content{
         flex-basis: 100%;
-        background-color: var(--second);
+        background-color: var(--light);
         .background{
           width: 100%;
           height: 400px;