From 28474e24bb9e42db3ffdfd349f8b15dca5154487 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Tue, 19 Sep 2023 12:03:18 +0300 Subject: [PATCH] top menu --- .../menu/item/pages-menu-item.component.html | 2 +- .../pages/menu/pages-menu.component.html | 3 +- .../pages/menu/pages-menu.component.ts | 25 ++- src/assets/css/main-menu.scss | 190 ++++++------------ 4 files changed, 73 insertions(+), 147 deletions(-) diff --git a/src/app/_modules/pages/menu/item/pages-menu-item.component.html b/src/app/_modules/pages/menu/item/pages-menu-item.component.html index bf62322..4f2db0f 100644 --- a/src/app/_modules/pages/menu/item/pages-menu-item.component.html +++ b/src/app/_modules/pages/menu/item/pages-menu-item.component.html @@ -1,6 +1,6 @@
-{{item.name}} + diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts index ef7e594..15246ba 100644 --- a/src/app/_modules/pages/menu/pages-menu.component.ts +++ b/src/app/_modules/pages/menu/pages-menu.component.ts @@ -8,7 +8,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core'; export class PagesMenuComponent { @Input() items = []; @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 + } + } diff --git a/src/assets/css/main-menu.scss b/src/assets/css/main-menu.scss index 86163c7..7f45da5 100644 --- a/src/assets/css/main-menu.scss +++ b/src/assets/css/main-menu.scss @@ -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; - } - } - } } } + + } } } \ No newline at end of file