From 89c2acb0cd9b33daa42b6a09f00b5993db3accd4 Mon Sep 17 00:00:00 2001
From: Boris Voropaev <boris1voropaev@gmail.com>
Date: Tue, 19 Sep 2023 16:43:06 +0300
Subject: [PATCH] Sub Menu

---
 .../_modules/auth/login/login.component.scss  |  2 +-
 .../companies/company/company.component.scss  |  2 +-
 .../member/company-member.component.scss      |  2 +-
 .../layout/footer/footer.component.scss       |  2 +-
 .../layout/header/header.component.scss       | 10 +++----
 .../user-bar/header-user-bar.component.scss   |  2 +-
 src/app/_modules/layout/layout.module.ts      |  3 +-
 .../home/intro/homepage-intro.component.scss  |  2 +-
 .../pages/menu/pages-menu.component.ts        |  4 +++
 .../_modules/pages/menu/pages-menu.module.ts  | 25 ++++++++++++++++
 .../_modules/pages/page/page.component.html   | 24 +++++++++------
 .../_modules/pages/page/page.component.scss   | 30 +++++++++++++++++--
 src/app/_modules/pages/page/page.component.ts |  6 +++-
 .../tk-structure-page.component.scss          |  2 +-
 .../_modules/pages/pages-routing.module.ts    |  4 ++-
 src/app/_modules/pages/pages.module.ts        |  5 ----
 .../sections/add/add-section.component.ts     |  1 -
 .../image-group-section.component.ts          |  2 +-
 .../pages/tree/pages-tree.component.scss      |  2 +-
 .../entries/registry-entries.component.scss   |  2 +-
 .../users/profile/user-profile.component.scss |  2 +-
 src/assets/css/basics.scss                    |  4 +--
 src/assets/css/main-menu.scss                 | 12 ++++++--
 23 files changed, 110 insertions(+), 40 deletions(-)
 create mode 100644 src/app/_modules/pages/menu/pages-menu.module.ts

diff --git a/src/app/_modules/auth/login/login.component.scss b/src/app/_modules/auth/login/login.component.scss
index ccd1f46..04a086b 100644
--- a/src/app/_modules/auth/login/login.component.scss
+++ b/src/app/_modules/auth/login/login.component.scss
@@ -130,7 +130,7 @@
   }
 }
 
-@media screen and (max-width: 1264px) {
+@media screen and (max-width: 1330px) {
   .authentication {
     flex-direction: column;
     justify-content: center;
diff --git a/src/app/_modules/companies/company/company.component.scss b/src/app/_modules/companies/company/company.component.scss
index 367f342..5d5957b 100644
--- a/src/app/_modules/companies/company/company.component.scss
+++ b/src/app/_modules/companies/company/company.component.scss
@@ -136,7 +136,7 @@
   }
 }
 
-@media screen and (max-width: 1264px) {
+@media screen and (max-width: 1330px) {
   .main {
     .left {
       margin-right: 0;
diff --git a/src/app/_modules/companies/members/member/company-member.component.scss b/src/app/_modules/companies/members/member/company-member.component.scss
index 2c04be5..e2355be 100644
--- a/src/app/_modules/companies/members/member/company-member.component.scss
+++ b/src/app/_modules/companies/members/member/company-member.component.scss
@@ -47,7 +47,7 @@
 }
 
 
-@media screen and (max-width: 1264px) {
+@media screen and (max-width: 1330px) {
   .member {
     .left {
       .avatar {
diff --git a/src/app/_modules/layout/footer/footer.component.scss b/src/app/_modules/layout/footer/footer.component.scss
index 28c7dde..ef35f12 100644
--- a/src/app/_modules/layout/footer/footer.component.scss
+++ b/src/app/_modules/layout/footer/footer.component.scss
@@ -55,7 +55,7 @@
 }
 
 
-@media screen and (max-width: 1264px){
+@media screen and (max-width: 1330px){
   .footer{
     padding: 40px 24px;
   }
diff --git a/src/app/_modules/layout/header/header.component.scss b/src/app/_modules/layout/header/header.component.scss
index 35134d1..20cce29 100644
--- a/src/app/_modules/layout/header/header.component.scss
+++ b/src/app/_modules/layout/header/header.component.scss
@@ -1,4 +1,4 @@
-@media screen and (max-width: 1264px){
+@media screen and (max-width: 1330px){
 
 .hidemobile{
   display: none !important;
@@ -95,7 +95,7 @@
 
 
 
-@media screen and (min-width: 1264px){
+@media screen and (min-width: 1330px){
   .showmobile{
     display: none;
   }
@@ -130,12 +130,12 @@
       justify-content: normal;
       align-items: stretch;
       align-content: stretch; 
-      padding: 0 calc( (100% - 1300px) / 2);
+      padding: 0 calc( (100% - 1400px) / 2);
       position: relative;
       .logo { 
         width:114px; 
         height: 80px;
-        margin: 12px 24px 12px 40px;
+        margin: 12px 24px 12px 60px;
         background-image: url('~src/assets/images/logo_vniigaz_1163x816.svg');
         background-size: contain;
         flex-shrink: 0;
@@ -168,7 +168,7 @@
         align-content: stretch;
         flex-grow: 1;
         flex-shrink: 1;
-        margin-right: 40px;
+        margin-right: 60px;
         button{
           white-space: nowrap;
         }
diff --git a/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss b/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss
index 2fb9adb..8482429 100644
--- a/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss
+++ b/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss
@@ -97,7 +97,7 @@
 
 
 }
-@media screen and (max-width: 1264px) {
+@media screen and (max-width: 1330px) {
   .user {
     .avatar {
       background-color: var(--white);
diff --git a/src/app/_modules/layout/layout.module.ts b/src/app/_modules/layout/layout.module.ts
index fd1a9cd..aef1543 100644
--- a/src/app/_modules/layout/layout.module.ts
+++ b/src/app/_modules/layout/layout.module.ts
@@ -4,7 +4,7 @@ import {RouterModule} from "@angular/router";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 
 import {PagesModule} from "@app/_modules/pages/pages.module";
-
+import { PagesMenuModule } from '../pages/menu/pages-menu.module';
 import {HeaderComponent} from "@app/_modules/layout/header/header.component";
 import {FooterComponent} from "@app/_modules/layout/footer/footer.component";
 import {GridComponent} from "@app/_modules/layout/grid/grid.component";
@@ -18,6 +18,7 @@ import {HeaderUserBarComponent} from "@app/_modules/layout/header/user-bar/heade
     ReactiveFormsModule,
     RouterModule,
     PagesModule,
+    PagesMenuModule
   ],
   declarations: [
     GridComponent,
diff --git a/src/app/_modules/pages/home/intro/homepage-intro.component.scss b/src/app/_modules/pages/home/intro/homepage-intro.component.scss
index f6af8e1..579d027 100644
--- a/src/app/_modules/pages/home/intro/homepage-intro.component.scss
+++ b/src/app/_modules/pages/home/intro/homepage-intro.component.scss
@@ -41,7 +41,7 @@
     height: 500px;
   }
 }
-@media screen and (max-width: 1264px) {
+@media screen and (max-width: 1330px) {
   .row {
     flex-direction: column;
     .tagline {
diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts
index 15246ba..5689c4b 100644
--- a/src/app/_modules/pages/menu/pages-menu.component.ts
+++ b/src/app/_modules/pages/menu/pages-menu.component.ts
@@ -12,6 +12,10 @@ export class PagesMenuComponent {
 
   private hiddenPages = ['/o-tsentre/protivodeistvie-korruptsii', '/o-tsentre/zashchita-personalnykh-dannykh', '/o-tsentre/okhrana-truda'];
 
+  // ngOnInit(){
+  //   console.log(this.items)
+  // }
+
 
 
   get visibleItems() {
diff --git a/src/app/_modules/pages/menu/pages-menu.module.ts b/src/app/_modules/pages/menu/pages-menu.module.ts
new file mode 100644
index 0000000..f473fec
--- /dev/null
+++ b/src/app/_modules/pages/menu/pages-menu.module.ts
@@ -0,0 +1,25 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {PagesMenuComponent} from "@app/_modules/pages/menu/pages-menu.component";
+import {PagesMenuItemComponent} from "@app/_modules/pages/menu/item/pages-menu-item.component";
+import {RouterModule} from "@angular/router";
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+
+  ],
+  declarations: [
+    PagesMenuComponent,
+    PagesMenuItemComponent,
+
+  ],
+  exports: [
+    PagesMenuComponent,
+
+  ]
+})
+export class PagesMenuModule {}
\ No newline at end of file
diff --git a/src/app/_modules/pages/page/page.component.html b/src/app/_modules/pages/page/page.component.html
index 10f3ec5..d1eb9a7 100644
--- a/src/app/_modules/pages/page/page.component.html
+++ b/src/app/_modules/pages/page/page.component.html
@@ -17,16 +17,22 @@
       </div>
     </div>
   </div>
-  <div  class="limiter">
+  <!-- <div  class="limiter">
     <page-breadcrumbs [page]="page"></page-breadcrumbs>
-  </div>
-  <div class="limiter pages" [ngSwitch]="page?.type?.name || page?.type">
-    <content-page *ngSwitchCase="'content'" [page]="page" [editMode]="editMode"></content-page>
-    <publications-page *ngSwitchCase="'publications'" [page]="page" [editMode]="editMode"></publications-page>
-    <registry-page *ngSwitchCase="'registry'" [page]="page" [editMode]="editMode"></registry-page>
-    <publication-page *ngSwitchCase="'publication'" [page]="page" [editMode]="editMode"></publication-page>
-    <tk-structure-page *ngSwitchCase="'tk-structure'" [page]="page" [editMode]="editMode"></tk-structure-page>
-    <p *ngSwitchDefault>Page type {{page?.type?.name}} is undefined</p>
+  </div> -->
+  <div class="limiter double-column">
+    <div class="pages" [ngSwitch]="page?.type?.name || page?.type">
+      <content-page *ngSwitchCase="'content'" [page]="page" [editMode]="editMode"></content-page>
+      <publications-page *ngSwitchCase="'publications'" [page]="page" [editMode]="editMode"></publications-page>
+      <registry-page *ngSwitchCase="'registry'" [page]="page" [editMode]="editMode"></registry-page>
+      <publication-page *ngSwitchCase="'publication'" [page]="page" [editMode]="editMode"></publication-page>
+      <tk-structure-page *ngSwitchCase="'tk-structure'" [page]="page" [editMode]="editMode"></tk-structure-page>
+      <p *ngSwitchDefault>Page type {{page?.type?.name}} is undefined</p>
+    </div>
+    <div class="sub-menu" *ngIf="menuItems&&menuItems.length">
+      <pages-menu [items]="menuItems" (onSelected)="itemSelect($event)"></pages-menu>
+      <!-- <pre>{{menuItems|json}}</pre> -->
+    </div>
   </div>
 </div>
 <div class="content" *ngIf="!loading && !page">
diff --git a/src/app/_modules/pages/page/page.component.scss b/src/app/_modules/pages/page/page.component.scss
index 72c757a..07216d5 100644
--- a/src/app/_modules/pages/page/page.component.scss
+++ b/src/app/_modules/pages/page/page.component.scss
@@ -1,6 +1,9 @@
 .content {
   background-color: #F6F6F6;
   padding-bottom: 120px;
+  .limiter{
+    max-width: 1280px;
+  }
   .row {
     display: block;
     width: 100%;
@@ -20,11 +23,12 @@
       .block{
         position: absolute;
         top:136px;
-        left: calc((100% - 900px) / 2);
+        left: calc((100% - 1280px) / 2);
       }
       .limiter{
         
         display: block;
+
         .line{
           display: inline-block;
           border-bottom: 12px solid var(--blue-0);
@@ -70,7 +74,29 @@
 
   }
 
-  @media screen and (max-width: 1264px) {
+  @media screen and (min-width: 1330px){
+    .double-column{
+      display: flex;
+      align-items: flex-start;
+      gap: 40px;
+      .pages{
+        flex-grow: 1;
+        flex-shrink: 1;
+      }
+      .sub-menu{
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: 360px;
+        padding: 20px;
+        border-radius: 8px;
+        background: #FFF;
+        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
+        margin-top: 40px;
+      }
+    }
+  }
+
+  @media screen and (max-width: 1330px) {
     .nav-info{
       display: none;
     }
diff --git a/src/app/_modules/pages/page/page.component.ts b/src/app/_modules/pages/page/page.component.ts
index 4147cef..2ffb540 100644
--- a/src/app/_modules/pages/page/page.component.ts
+++ b/src/app/_modules/pages/page/page.component.ts
@@ -12,6 +12,7 @@ export class PageComponent {
   public page: any;
   public editMode: boolean;
   public loading = false;
+  public menuItems:any[]
   private url: string;
   private inited = false;
   routeSubscription?: Subscription;
@@ -42,6 +43,7 @@ export class PageComponent {
   }
 
   ngOnInit() {
+    // this.fetchMenu();
     this.listsService.controls().subscribe(res => {
       this.inited ? this.fetch() : this.inited = true;
     });
@@ -70,10 +72,12 @@ export class PageComponent {
       'sections.objectables.groups.fields.value',
       'sidebars.groups.fields.value',
       'sidebars.type',
-      'permissions'
+      'permissions',
+      'children.children'
     ];
     this.pagesService.find(this.url, {include: include.join(',')}).subscribe(res => {
       this.page = res?.data;
+      this.menuItems = res?.data.children.data;
       this.loading = false;
     }, error => {
       this.loading = false;
diff --git a/src/app/_modules/pages/page/types/tk-structure/tk-structure-page.component.scss b/src/app/_modules/pages/page/types/tk-structure/tk-structure-page.component.scss
index d19fcf0..0a40eda 100644
--- a/src/app/_modules/pages/page/types/tk-structure/tk-structure-page.component.scss
+++ b/src/app/_modules/pages/page/types/tk-structure/tk-structure-page.component.scss
@@ -117,7 +117,7 @@
     }
   }
 }
-@media screen and (max-width: 1264px) {
+@media screen and (max-width: 1330px) {
   .title {
     span {
       font-size: 1rem !important;
diff --git a/src/app/_modules/pages/pages-routing.module.ts b/src/app/_modules/pages/pages-routing.module.ts
index 3981825..451cd60 100644
--- a/src/app/_modules/pages/pages-routing.module.ts
+++ b/src/app/_modules/pages/pages-routing.module.ts
@@ -14,6 +14,7 @@ import {RegistriesModule} from "@app/_modules/registries/registries.module";
 import {PublicationsModule} from "@app/_modules/publications/publications.module";
 import {TkStructurePageComponent} from "@app/_modules/pages/page/types/tk-structure/tk-structure-page.component";
 import {HomepageModule} from "@app/_modules/pages/home/homepage.module";
+import { PagesMenuModule } from './menu/pages-menu.module';
 
 const routes: Routes = [
   {path: '', component: HomepageComponent},
@@ -28,7 +29,8 @@ const routes: Routes = [
     PageSectionsModule,
     PageSidebarsModule,
     RegistriesModule,
-    PublicationsModule
+    PublicationsModule,
+    PagesMenuModule
   ],
   declarations: [
     PageComponent,
diff --git a/src/app/_modules/pages/pages.module.ts b/src/app/_modules/pages/pages.module.ts
index 11e36dd..33a9fe2 100644
--- a/src/app/_modules/pages/pages.module.ts
+++ b/src/app/_modules/pages/pages.module.ts
@@ -6,8 +6,6 @@ import {RegistriesModule} from "@app/_modules/registries/registries.module";
 import {PublicationsModule} from "@app/_modules/publications/publications.module";
 import {PagesListComponent} from "@app/_modules/pages/list/pages-list.component";
 import {PagesListItemComponent} from "@app/_modules/pages/list/item/pages-list-item.component";
-import {PagesMenuComponent} from "@app/_modules/pages/menu/pages-menu.component";
-import {PagesMenuItemComponent} from "@app/_modules/pages/menu/item/pages-menu-item.component";
 import {RouterModule} from "@angular/router";
 import {PaginationModule} from "@app/_modules/pagination/pagination.module";
 import {SearchSectionsComponent} from "@app/_modules/pages/sections/search/search-sections.component";
@@ -30,8 +28,6 @@ import {SortablejsModule} from "ngx-sortablejs";
     SortablejsModule,
   ],
   declarations: [
-    PagesMenuComponent,
-    PagesMenuItemComponent,
     PagesListComponent,
     PagesListItemComponent,
     PagesTreeComponent,
@@ -40,7 +36,6 @@ import {SortablejsModule} from "ngx-sortablejs";
     SearchSectionsItemComponent,
   ],
   exports: [
-    PagesMenuComponent,
     PagesListComponent,
     SearchSectionsComponent,
     PagesTreeComponent,
diff --git a/src/app/_modules/pages/sections/add/add-section.component.ts b/src/app/_modules/pages/sections/add/add-section.component.ts
index 2c66b76..b339545 100644
--- a/src/app/_modules/pages/sections/add/add-section.component.ts
+++ b/src/app/_modules/pages/sections/add/add-section.component.ts
@@ -37,7 +37,6 @@ export class AddSectionComponent {
       return item;
     });
     let attach = {modelType: this.modelType, modelId: this.page.id, group: 'sections', ord: this.ord};
-    console.log(type);
     this.formsService.createObject(type, {extraProps: {attach: attach}});
     this.hideDD();
   }
diff --git a/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.ts b/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.ts
index 6b1d96e..d49784b 100644
--- a/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.ts
+++ b/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.ts
@@ -15,7 +15,7 @@ export class ImageGroupSectionComponent {
   }
 
   ngOnInit() {
-    console.log(this.section);
+    // console.log(this.section);
   }
 
 
diff --git a/src/app/_modules/pages/tree/pages-tree.component.scss b/src/app/_modules/pages/tree/pages-tree.component.scss
index 044ae78..7cfb187 100644
--- a/src/app/_modules/pages/tree/pages-tree.component.scss
+++ b/src/app/_modules/pages/tree/pages-tree.component.scss
@@ -146,7 +146,7 @@
 }
 
 
-@media screen and (max-width: 1264px) {
+@media screen and (max-width: 1330px) {
   .item {
     .bar {
       .mid {
diff --git a/src/app/_modules/registries/registry/entries/registry-entries.component.scss b/src/app/_modules/registries/registry/entries/registry-entries.component.scss
index 3c542a4..0bd5b46 100644
--- a/src/app/_modules/registries/registry/entries/registry-entries.component.scss
+++ b/src/app/_modules/registries/registry/entries/registry-entries.component.scss
@@ -22,7 +22,7 @@ pagination {
   }
 }
 
-@media screen and (max-width: 1264px) {
+@media screen and (max-width: 1330px) {
   registry-entry {
     padding: 16px 0;
   }
diff --git a/src/app/_modules/users/profile/user-profile.component.scss b/src/app/_modules/users/profile/user-profile.component.scss
index 97d140e..b07c04c 100644
--- a/src/app/_modules/users/profile/user-profile.component.scss
+++ b/src/app/_modules/users/profile/user-profile.component.scss
@@ -58,7 +58,7 @@
     }
   }
 }
-@media screen and (max-width: 1264px) {
+@media screen and (max-width: 1330px) {
   .profile {
     padding: 24px 0;
     .user {
diff --git a/src/assets/css/basics.scss b/src/assets/css/basics.scss
index d4b35bb..d11e47e 100644
--- a/src/assets/css/basics.scss
+++ b/src/assets/css/basics.scss
@@ -160,7 +160,7 @@ html-section ul{
 }
 
 
-@media screen and (min-width: 1264px) {
+@media screen and (min-width: 1330px) {
   .fullwidth {
     width: 100vw;
     margin-left: calc((1160px - 100vw) / 2);
@@ -197,7 +197,7 @@ html-section ul{
 }
 
 
-@media screen and (max-width: 1264px) {
+@media screen and (max-width: 1330px) {
   .limiter {
     padding: 0 24px;
   }
diff --git a/src/assets/css/main-menu.scss b/src/assets/css/main-menu.scss
index 7f45da5..8dba957 100644
--- a/src/assets/css/main-menu.scss
+++ b/src/assets/css/main-menu.scss
@@ -1,5 +1,5 @@
 
-@media screen and (max-width: 1264px){
+@media screen and (max-width: 1330px){
 
 
 
@@ -92,7 +92,7 @@
 
 
 
-@media  screen and (min-width: 1264px){
+@media  screen and (min-width: 1330px){
   pages-menu {
     display: none;
   }
@@ -177,4 +177,12 @@
 
     }
   }
+
+  .sub-menu{
+    pages-menu {
+      display: flex;
+      flex-direction: column;
+    }
+  
+  }
 }
\ No newline at end of file