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

top menu

master
Boris Voropaev 2023-09-19 12:03:18 +03:00
parent ef5db83ef2
commit 28474e24bb
4 changed files with 73 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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.link" routerLinkActive="active" (click)="select(item)"
<a [routerLink]="item.depth>=2?null:item.link" routerLinkActive="active" (click)="select(item)"
[ngClass]="{'active-mob':item.link==currentURL}"><span>{{item.name}}</span></a>
<pages-menu *ngIf="children?.length" [items]="children"

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

@ -1,2 +1 @@
<pages-menu-item (click)="close()" (onSelected)="itemSelect($event)" (mouseleave)="leave()"
[class.hidden]="hidden" [item]="item" *ngFor="let item of visibleItems"></pages-menu-item>
<pages-menu-item (click)="setHover(i,!hover[i])" (mouseleave)="setHover(i,false)" (mouseover)="setHover(i,true)" (onSelected)="itemSelect($event)" [class.hover]="hover[i]" [class.depth]="getDepth(item)>=2" [item]="item" *ngFor="let item of visibleItems; let i=index;"></pages-menu-item>

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

@ -8,7 +8,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
export class PagesMenuComponent {
@Input() items = <any>[];
@Output() onSelected = new EventEmitter();
public hidden = false;
public hover:boolean[]=[]
private hiddenPages = ['/o-tsentre/protivodeistvie-korruptsii', '/o-tsentre/zashchita-personalnykh-dannykh', '/o-tsentre/okhrana-truda'];
@ -20,17 +20,22 @@ export class PagesMenuComponent {
});
}
close() {
this.hidden = !this.hidden;
// setTimeout(() => {this.hidden = false;}, 100);
}
leave(){
this.hidden = false;
}
itemSelect(event:any){
this.onSelected.emit(event);
}
setHover(i:number,hover:boolean){
this.hover=[];
this.hover[i]=hover;
}
getDepth(item){
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++;
});
return item.depth
}
}

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

@ -93,166 +93,88 @@
@media screen and (min-width: 1264px){
pages-menu {
pages-menu-item {
a {
transition: all 0.3s;
&:not(:hover).active{
>span{
display: inline-block;
box-sizing: border-box;
}
}
}
&:hover {
&>pages-menu {
display: flex;
}
}
&.hidden{
pages-menu {
display:none !important;
}
}
}
}
.grid-menu>pages-menu>pages-menu-item>a.active:not(:hover)>span,
.grid-menu>pages-menu>pages-menu-item.hidden>a.active>span {
padding-top: 2px;
border-bottom: 2px solid var(--blue-1) ;
color: var(--blue-1);
display: none;
}
// level 1
pages-menu {
.grid-menu>pages-menu {
width: 100%;
display: flex;
align-items: stretch;
overflow: hidden;
margin: 0 4px;
overflow: hidden;
flex-grow: 0;
flex-shrink: 0;
margin: 0;
&>pages-menu-item {
animation: slide-from-top-and-fade-in 0.2s;
>pages-menu-item {
animation: slide-from-top-and-fade-in 0.2s;
padding: 0 20px;
margin: 0 -4px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
flex-grow: 0;
flex-shrink: 0;
text-align: center;
padding: 0 20px;
margin: 0 -4px;
&:hover:not(.hidden) {
background-color: #004077;
a{
color: #FFF;
}
}
align-items: center;
&>a {
display: flex;
flex-direction: column;
justify-content: center;
a {
color: #0070BA;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 32px;
// &:hover {
// text-decoration: none;
// color: white;
// background: #004077;
// }
}
&>:hover {
& > pages-menu {
display: flex;
}
}
&>pages-menu:first-child {
&>pages-menu {
display: flex;
&.active-mob{
>span{
display: inline-block;
border-bottom: 2px solid #0070BA;
}
}
}
// level 2
&>pages-menu {
display: none;
justify-content: center;
align-items: stretch;
position: absolute;
top: 100%;
left: 0;
max-width: 100%;
background-color: #004077;
z-index: 1000;
padding: 24px calc( (100% - 1400px) / 2);;
margin: 0;
&>pages-menu-item {
display: flex;
flex-direction: column;
align-items: stretch;
flex-grow: 0;
flex-shrink: 1;
text-align: left;
// &.hidden {display: none;}
&>a {
font-family: PT Sans;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 160% */
color: white;
&>span {
display: block;
overflow: hidden;
}
&:hover, &.active {
&:after {
opacity: 1;
}
&.depth{
>a::after{
content:"";
display: inline-block;
width: 24px;
height: 24px;
background-image: url('~src/assets/images/icons/chevron_right_24dp.svg');
transform: rotateZ(90deg);
transition: transform 0.3s;
vertical-align: -6px;
margin-left: 4px;
}
&.hover {
>a::after{
transform: rotateZ(-90deg);
}
>pages-menu {
position:absolute ;
height: 68px;
background-color: #FFF;
top:104px;
left: 0;
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
overflow: hidden;
flex-grow: 0;
flex-shrink: 0;
>pages-menu-item{
animation: slide-from-top-and-fade-in 0.2s;
padding: 0 20px;
margin: 0 -4px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
}
// level 3
&>pages-menu {
position: relative;
padding: 20px 0 0 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
&>pages-menu-item {
position: relative;
display: block;
padding: 0;
margin: 20px 0 0 0;
a{
opacity: 0.63;
}
a:hover{
opacity: 1;
}
}
}
}
}
}
}
}