Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

main menu fixed

master
Boris Voropaev 2023-09-28 14:53:57 +03:00
parent 6fed3e56b3
commit 1e3b83188d
7 changed files with 66 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/_modules/layout/header/header.component.ts
View File

@ -53,7 +53,7 @@ export class HeaderComponent {
fetchMenu() {
let include = ['children.children.children.children'];
let include = ['children.children.children.children','parents','children.parents'];
this.pagesService.root({include: include.join(',')}).subscribe(res => {
this.menuItems = res.data;
});

2
src/app/_modules/pages/menu/item/pages-menu-item.component.html
View File

@ -1,6 +1,6 @@
<div class="expand" [ngClass]="{toggle:children?.length, open:showChildren}" (click)="showChildren=!showChildren"></div>
<a [routerLink]="item.depth>=3?null:item.link" routerLinkActive="active" (click)="select(item)"
<a [routerLink]="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"

4
src/app/_modules/pages/menu/item/pages-menu-item.component.ts
View File

@ -29,6 +29,10 @@ export class PagesMenuItemComponent {
return this.currentURL.startsWith(this.item.link)
}
get link(){
return ( this.item.depth>1 && this.item.parents?.data.length==1 )?null:this.item.link
}
ngOnInit() {
}

13
src/app/_modules/pages/menu/pages-menu.component.ts
View File

@ -30,12 +30,15 @@ export class PagesMenuComponent {
}
getDepth(item){
if (item.hasOwnProperty('depth')) return item.depth
if (!item.hasOwnProperty('depth')) item.depth=0;
if (item.children?.data.length) item.depth = 1;
item.children?.data.forEach(child => {
let childDepth = this.getDepth(child)
if (childDepth>=item.depth) item.depth=childDepth+1;
});
if (item.children?.data.length) {
item.depth = 1;
item.children.data.forEach(child => {
let childDepth = this.getDepth(child)
if (childDepth>=item.depth) item.depth=childDepth+1;
});
}
return item.depth
}
}

4
src/app/_modules/pages/page/page.component.html
View File

@ -7,7 +7,7 @@
</div>
<div class="limiter">
<div class="line">
<h1 *ngIf="!loading">{{pageTopName}}</h1>
<h1>{{pageTopName}}</h1>
</div>
</div>
</div>
@ -31,7 +31,7 @@
</div>
<div class="sub-menu">
<!-- <pre>{{page.children.data.length|json}}</pre> -->
<pages-menu [items]="menuItems" (onSelected)="itemSelect($event)"></pages-menu>
<pages-menu [items]="subMenu" (onSelected)="itemSelect($event)" *ngIf="subMenu?.length"></pages-menu>
<!-- <pre>{{menuItems|json}}</pre> -->
</div>
</div>

29
src/app/_modules/pages/page/page.component.ts
View File

@ -15,6 +15,8 @@ export class PageComponent {
public menuItems:any[]
private url: string;
private inited = false;
public subMenu:any;
public pageTopName:string;
routeSubscription?: Subscription;
subscription: Subscription;
@ -38,24 +40,11 @@ export class PageComponent {
return this.permissions?.edit || this.permissions?.anything;
}
get pageTopName(){
let item:any;
let name:string
if(this.menuItems){
item = this.menuItems.find(item=>this.page.link.startsWith(item.link))
name= item?.name;
if (item?.depth>=2){
item = item.children.data.find(item=>this.page.link.startsWith(item.link))
name= item?.name;
}
}
return name;
}
ngAfterContentInit() {
this.listsService.controls().subscribe(res => {
this.inited ? this.fetch() : this.inited = true;
this.fetchMenu();
});
}
@ -88,6 +77,7 @@ export class PageComponent {
this.pagesService.find(this.url, {include: include.join(',')}).subscribe(res => {
this.page = res?.data;
this.loading = false;
this.fetchMenu();
}, error => {
this.loading = false;
});
@ -97,6 +87,17 @@ export class PageComponent {
let include = ['children.children.children.children'];
this.pagesService.root({include: include.join(',')}).subscribe(res => {
this.menuItems = res.data;
let topItem:any = null;
this.subMenu = [];
this.pageTopName = this.page.name;
topItem = this.menuItems.find(item=>this.page.link.startsWith(item.link));
this.subMenu = topItem?.children.data;
this.pageTopName = topItem?.name || this.pageTopName;
topItem = this.subMenu?.find(item=>this.page.link.startsWith(item.link));
this.pageTopName = topItem?.name || this.pageTopName;
this.subMenu = topItem?.children.data
});
}

100
src/assets/css/main-menu.scss
View File

@ -122,7 +122,7 @@
font-style: normal;
font-weight: 400;
line-height: 32px;
&.current-item{
&.parent-item{
>span{
display: inline-block;
border-bottom: 2px solid #0070BA;
@ -179,23 +179,29 @@
}
.sub-menu{
pages-menu {
display: block;
}
a{
display: block;
padding: 10px 20px;
}
>pages-menu {
display: flex;
flex-direction: column;
}
>pages-menu{
display: block;
padding: 20px;
border-radius: 8px;
background: #FFF;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
>pages-menu-item{
>a{
display: none;
};
>a.active>span{
color: var(--blue-1)
}
a{
span{
color: #6C6C6C;
font-family: PT Sans Narrow;
font-size: 24px;
@ -203,77 +209,41 @@
font-weight: 700;
line-height: 32px; /* 133.333% */
letter-spacing: 0.24px;
}
}
:hover{
color:var(--blue-2)
}
.current-item{
color:var(--blue-1)
}
>pages-menu{
padding: 20px;
border-radius: 8px;
background: #FFF;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
}
>pages-menu:not(.parent-item){
display: none;
}
}
>pages-menu-item.depth{
>pages-menu{
>pages-menu.parent-item{ //second level
display: block;
>pages-menu-item{
>a{display: none;}
pages-menu{
display: none;
&.parent-item{
display: block;
>a{
>span{
font-size: 20px;
font-family: PT Sans;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
}
>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
}
}
}
}
>a.active{
background-color: #EDEDED;
border-radius: 8px;
span{
color:#2D2D2D
}
}
}
}
}
}
}
}