From faf03af90148c773ad49dae0a94001cb1cfe0832 Mon Sep 17 00:00:00 2001
From: Boris Voropaev <boris1voropaev@gmail.com>
Date: Thu, 28 Dec 2023 11:50:05 +0300
Subject: [PATCH] header nir

---
 .../layout/header/header.component.html       |  21 +-
 .../layout/header/header.component.ts         |  17 +-
 .../layout/jumbotron/jumbotron.component.html |   2 +-
 .../slider-menu/slider-menu.component.html    |  12 +-
 src/nir/css/_basics.scss                      |  47 +-
 src/nir/css/_grid.scss                        |  37 --
 src/nir/css/_main-menu.scss                   | 444 +++++-------------
 src/nir/css/_page-top-panel.scss              |  25 +-
 src/nir/css/_pages-section.scss               |   5 +-
 src/nir/images/ico/burger_32.svg              |   3 +
 src/nir/images/ico/login_24.svg               |   3 +
 11 files changed, 163 insertions(+), 453 deletions(-)
 create mode 100644 src/nir/images/ico/burger_32.svg
 create mode 100644 src/nir/images/ico/login_24.svg

diff --git a/src/nir/component/layout/header/header.component.html b/src/nir/component/layout/header/header.component.html
index 8ad4398..a973109 100644
--- a/src/nir/component/layout/header/header.component.html
+++ b/src/nir/component/layout/header/header.component.html
@@ -1,18 +1,17 @@
-<div class="header layout-corral" [class.rootpage]="isRootPage">
+<div class="header">
   <a class="burger" (click)="openMobileMenu()">
-    <ico *ngIf="!isRootPage" ico="burger_blue_40dp" [size]="36"></ico>
-    <ico *ngIf="isRootPage" ico="burger_white_40dp" [size]="36"></ico>
-  </a>
-  <a [routerLink]="rootPage?.link" class="logo">
-    <img *ngIf="!isRootPage" src="assets/images/logo_vniigaz.svg" alt="ВНИИГАЗ">
-    <img *ngIf="isRootPage" src="assets/images/logo_vniigaz_wt_280x110.svg" alt="ВНИИГАЗ">
+    <ico ico="burger_32" color="var(--black)" [size]="32"></ico>
   </a>
 
+  <img src="assets/images/nir-logo.svg" alt="НИР" [routerLink]="rootPage?.link" class="header-logo" >
+
   <pages-menu class="lvl-0"></pages-menu>
 
-  <div class="inline center header-right">
-    <locale></locale>
-    <a class="btn vnii" href="https://ais.vniigaz-cert.ru/" target="_blank">Личный кабинет (АИС СЦ)</a>
-  </div>
+  <a (click)="login()" class="header-login" *ngIf="!isLoggedIn">
+    <ico ico="login_24" ></ico>
+    <span>Войти</span>
+  </a>
+
+  <header-user-bar  *ngIf="isLoggedIn"></header-user-bar>
   
 </div>
diff --git a/src/nir/component/layout/header/header.component.ts b/src/nir/component/layout/header/header.component.ts
index 984a14f..98b7bc6 100644
--- a/src/nir/component/layout/header/header.component.ts
+++ b/src/nir/component/layout/header/header.component.ts
@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
 import {Router} from "@angular/router";
+import { AuthenticationService } from '@app/_services';
 import {PagesService} from "@app/_services/pages.service";
 
 @Component({
@@ -11,7 +12,8 @@ export class HeaderComponent {
 
   constructor(
     private router: Router,
-    public pagesService: PagesService
+    public pagesService: PagesService,
+    public authService: AuthenticationService
     ) {
   }
   // ngOnInit(){
@@ -24,11 +26,16 @@ export class HeaderComponent {
     return this.pagesService.rootPage;
   }
 
-  get isRootPage(){
-    return !this.pagesService.currentPage?.parents.data.length && this.pagesService.currentPage
-  }
-
   openMobileMenu(){
     this.router.navigate([{outlets: {slider: 'pages-menu'}}], {skipLocationChange: true}).then();
   }
+  
+  login() {
+    this.authService.popup('login');
+  }
+
+  get isLoggedIn() {
+    return this.authService.isLoggedIn;
+  }
+  
 }
\ No newline at end of file
diff --git a/src/nir/component/layout/jumbotron/jumbotron.component.html b/src/nir/component/layout/jumbotron/jumbotron.component.html
index 4635a82..baa9ba9 100644
--- a/src/nir/component/layout/jumbotron/jumbotron.component.html
+++ b/src/nir/component/layout/jumbotron/jumbotron.component.html
@@ -1,6 +1,6 @@
 <div class="jumbotron-bg space" [ngStyle]="bgStyle" [class.rootpage-jumbotron]="isRootPage">
     <div class="jumbotron-content layout-corral">
-        <header-user-bar></header-user-bar>
+
         <div class="jumbotron-content-center">
             <h1 [ngStyle]="h1Style">{{name}}</h1>
             <!-- <h1 *ngIf="isRootPage" [ngStyle]="h1Style">
diff --git a/src/nir/component/pages/menu/slider-menu/slider-menu.component.html b/src/nir/component/pages/menu/slider-menu/slider-menu.component.html
index 94ee5fe..32cd21c 100644
--- a/src/nir/component/pages/menu/slider-menu/slider-menu.component.html
+++ b/src/nir/component/pages/menu/slider-menu/slider-menu.component.html
@@ -1,16 +1,6 @@
 <slider side="left">
 
     <div body>
-        <pages-menu *ngIf="rootPages" [root]="rootPages" class="top-menu"></pages-menu>
-        <div class="btn-menu">
-            <div>
-                <a href="https://ais.vniigaz-cert.ru/" target="_blank">
-                    Личный кабинет (АИС СЦ)
-                </a>
-            </div>
-            <div>
-                <locale></locale>
-            </div>
-        </div>
+        <pages-menu *ngIf="rootPages" [root]="rootPages" class="lvl-0"></pages-menu>
     </div>        
 </slider>
\ No newline at end of file
diff --git a/src/nir/css/_basics.scss b/src/nir/css/_basics.scss
index c4544e7..8e5c301 100644
--- a/src/nir/css/_basics.scss
+++ b/src/nir/css/_basics.scss
@@ -112,25 +112,29 @@ $pxxs:4px;
   --radius-1: 12px;
   --radius-2: 20px;
   --white: #ffffff;
-  --light: #F6F6F6;
-
-
-  --prime: #0070BA;
-  --prime-hov: #005799;
-  --prime-act: #004077;
-  --prime-dis: #A1CAE5;
+  --light: #D8D8D8;
 
 
+  --prime: #009CAD;
+  --prime-hov: #007E91;
+  --prime-act: #006275;
+  --prime-dis: #a1dde5;
 
   --second: #6C6C6C;
   --second-hov: #4D4D4D;
   --second-act: #2D2D2D;
   --second-dis: #C0C0C0;
 
-  --dark: #1F1F1F;
-  --blue-0: #2EB2E8;
+  --black: rgba(0,0,0,0.88);
+  --bk66: rgba(0,0,0,0.66);
+  --bk44: rgba(0,0,0,0.44);
+  --bk22: rgba(0,0,0,0.22);
+  --bk8: rgba(0,0,0,0.08);
+  --bk4: rgba(0,0,0,0.04);
 
- 
+  --bg: #F4F5F3;
+  --bg-lt: #FBFCFA;
+  --bg-dk: #CFCFC6;
   
 }
 
@@ -296,29 +300,6 @@ span.link {
 }
 
 
-header{
-  .locale{
-    position: relative;
-    .locale-btn{
-      display: inline-flex;
-    }
-    .dropdown{
-      top: 27px;
-      left: -120px;
-    }
-    img{
-      height:18px;
-      width:27px;
-      object-fit: cover; 
-      border: 1px solid lightgray;
-      &:hover{
-        border-color: var(--prime-act);
-      }
-    }
-  }
-}
-
-
 
 @media screen and (min-width: 1330px) {
   .fullwidth {
diff --git a/src/nir/css/_grid.scss b/src/nir/css/_grid.scss
index b7f4311..5a0d842 100644
--- a/src/nir/css/_grid.scss
+++ b/src/nir/css/_grid.scss
@@ -41,37 +41,7 @@ jumbotron{
         }
       }
     }
-    &.rootpage-jumbotron{
-      .jumbotron-content{
-        header-user-bar{
-          top: 100px !important;
-        }
-        .jumbotron-content-center{
-          align-self: center;
-          align-items: center;
-          max-width: 100%;
-          width: 768px;
 
-          h1{
-            font-size: 80px;
-            line-height: 95px;
-          }
-          h4{
-            text-decoration: underline;
-            font-size: 25px;
-            font-weight: 400;
-            font-family: PT Sans;
-            margin-top: 16px;
-            a{
-              color: #fff;
-              text-decoration: underline;
-            }
-          }
-        }
-      }
-
-
-    }
   }
   .jumbotron-edit-field{
     height: 60px;
@@ -91,13 +61,6 @@ jumbotron{
 
 
 
-@media screen and (max-width: 480px) {
-  jumbotron .jumbotron-bg.rootpage-jumbotron .jumbotron-content .jumbotron-content-center h1{
-    font-size: 50px;
-    line-height: 60px;
-  }
-}
-
 
 
 .content-sapce{
diff --git a/src/nir/css/_main-menu.scss b/src/nir/css/_main-menu.scss
index e51a7c9..ef900a8 100644
--- a/src/nir/css/_main-menu.scss
+++ b/src/nir/css/_main-menu.scss
@@ -1,107 +1,94 @@
-pages-menu{
-  display:flex;
-  flex-direction: column;
-  padding-left: 0;
-}
-pages-menu{
-  padding-left: 24px;
-}
-
-
-
-header{
-
-  background-color: var(--white);
-  .header{
-    height: 80px;
-    margin: 12px 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    pages-menu{
-      flex-direction: row;
-      gap:24px;
-      &:not(.lvl-0){
-          display: none;
-        }
-        
-      .item{
-        drop-down{
-          display: none;
-        }
-        &.nav{
-          &::after{
-            content: '';
-            width: 24px;
-            height: 24px;
-            margin-top:6px;
-            background-image: url('../images/ico/chevron_right_prime_24.svg');
-            transform: rotateZ(90deg);
-          }
-          &.selected::after{
-            transform: rotateZ(-90deg);
-          }
-          &:hover::after{
-            background-image: url('../images/ico/chevron_right_prime_hov_24.svg');
-          }
-        }
-
-        >a{
-           border-bottom: 2px solid transparent;
-        }
-        &.parent,&.current{
-          >a {border-color: var(--prime);}
-        }
-
+// pages-menu{
+//   display:flex;
+//   flex-direction: column;
+//   padding-left: 0;
+// }
+// pages-menu{
+//   padding-left: 24px;
+// }
+header, slider-menu{
+  pages-menu-item{
+    .item{
+      drop-down{
+        display: none;
       }
-      .item.nav + pages-menu.selected.lvl-1{
-        position: absolute;
-        left:0px;
-        top:100px;
-        display: flex;
-        background-color: var(--white);
-        width: 100%;
-        justify-content: center;
-        padding-bottom: 36px;
-        z-index: 1;
+      a{
+        font-family: PT Sans;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        letter-spacing: 0.56px;
+        text-transform: uppercase;
+        color: var(--black);
+        margin: 0;
+      }
+      padding: 4px 0 0 0;
+      border-bottom: solid 4px transparent;
+      &.current{
+        border-color: var(--prime);
       }
     }
   }
-  .header-right{
-    gap: $p;
-    .locales-btn{
-      drop-down {
-        .on{
-            svg{
-                color:var(--dark)
-            }
-        }
+}
+
+
+header{
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-lt);
+  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
+
+  .header{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    pages-menu{
+      display: flex;
+      flex-direction: row;
+      gap: 16px;
+      margin: 0 60px;
+      &:not(.lvl-0){
+        display: none;
       }
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      gap: $pxxs;
+      
     }
-    .btn.vnii{
-      border-radius: 0;
-      padding: 8px 24px;
+
+    .burger{
+      align-items: center;
+      height: 32px;
+    }
+
+    .header-login{
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--black);
       font-family: PT Sans;
       font-size: 16px;
       font-style: normal;
       font-weight: 400;
       line-height: 24px;
+      ico svg{
+        color: var(--bk44) !important;
+      }
     }
-  }
-};
 
+    .header-logo{
+      cursor: pointer;
+    }
 
+    .burger:hover, .header-logo:hover, .header-login:hover ico, .item:hover{
+        background-color: var(--bk4);
+    }
 
-a.logo{
-  img{
-    width:114px; 
-    height: 80px;
-  }
+    .burger:active, .header-logo:active, .header-login:active ico, .item:active{
+      background-color: var(--bk8);
+    }
+  }  
 }
 
 
@@ -111,81 +98,30 @@ a.logo{
 
 slider[side="left"]{
   .slider-bar{
-    background-color: var(--prime-act);
-    padding: 40px 48px;
-    width: 480px;
+    background-color: var(--bg-lt);
+    width: 360px;
     max-width: 100vw;
     .header{
-      background-color: var(--prime-act);
       box-shadow: none;
-      padding: 0 0 28px;
+      background-color: transparent;
       .title{
         ico svg{
-          color: var(--white);
+          color: var(--black);
         }
       }
 
     }
     .body{
+      padding: 64px 0;
       pages-menu{
-        ico{
-
-          margin-top: 20px;
-          svg{
-            color: var(--white);
-          }
-        }
-        a{
-          font-family: PT Sans;
-          font-size: 20px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 24px;
-          color: var(--white);
-          margin: 20px 0 2px 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 32px;
+        &:not(.lvl-0){
+          display: none;
         }
 
-        &.top-menu{
-          margin-bottom: 20px;
-          &>pages-menu-item>.item>a{
-            font-family: PT Sans Narrow;
-            font-size: 24px;
-            font-style: normal;
-            font-weight: 700;
-            letter-spacing: 0.24px;
-          }
-        }
-        .current{
-          border-bottom: 2px solid var(--prime-dis);
-        }
-      }
-    }
-  }
-
-  .btn-menu{
-    display: flex;
-    flex-direction: column;
-    gap:40px;
-    padding: 20px 0 0 ;
-      border-top: 1px solid var(--prime);
-    a{
-      font-family: PT Sans Narrow;
-      font-size: 24px;
-      font-style: normal;
-      font-weight: 700;
-      letter-spacing: 0.24px;
-      color: #FFF;
-    }
-    locale{
-      img{
-        width: 27px;
-      }
-      .dropdown{
-        left: 48px;
-        top:-24px;
-        img{
-          border: 1px solid var(--second-dis);
-        }
       }
     }
   }
@@ -199,202 +135,32 @@ slider[side="left"]{
 
 
 
-@media screen and (max-width: 1330px){
+@media screen and (max-width: 720px){
+  header{
+    padding: 0 24px;
+    .header{
+      width: 100%;
+      justify-content: space-between;
+      pages-menu{
+        display: none !important;
+      }
+    }
+  }
+
+}
+
+
+@media screen and (min-width: 721px){
   .header{
-    pages-menu, >a.vnii, .header-right{
-      display: none !important;
-    }
-  }
-}
 
-@media screen and (max-width: 900px){
-  slider[side="left"]{
-    .slider-bar{
-      padding: 40px 32px;
-    }
-  }
-}
-
-
-
-
-@media screen and (min-width: 1330px){
-  .header{
     .burger{
       display: none;
-    }
-    >pages-menu.top-menu{
-      flex-direction: row;
-      gap:24px;
-      pages-menu-item{
-        font-size: 20px;
-        .item{
-          drop-down{
-            display: none;
-          }
-        }
-        .sub-menu:not(.current){
-          display:none;
-        }
-        .sub-menu>pages-menu{
-          position: absolute;
-          padding: 0;
-          height: 68px;
-          width: 100vw;
-          background-color: var(--white);
-          left: 0px;
-          top: 104px;
-          flex-direction: row;
-          gap:24px;
-          align-items: start;
-          justify-content: center;
-          z-index:1;
-          pages-menu-item{
-            pages-menu{
-              display: none;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-slider-menu{
-  pages-menu:not(.top-menu,.open){
-    display: none;
-  }
-}
-right-content{
-  drop-down{
-    display: none;
-  }
-  pages-menu{
-    padding-left: 0;
-  }
-  .item{
-    min-height: 0;
-    padding: 10px 20px;
-    border-radius: 8px;
-  }
-
-  .item.lvl-0{
-    padding: 0;
-    >a{
-      display: none;
-    }
-    &.nav+pages-menu{
-      pages-menu.lvl-2{
-        width: 400px;
-        margin-left: 40px;
-        border-radius: 8px;
-        background: #FFF;
-        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
-        padding: 20px;
-        pages-menu{
-          padding: 0;
-        }
-      }
-      .item{
-        a{
-          color: var(--second);
-          &:hover{
-            color: var(--prime-act);
-          }
-        }
-        &.lvl-1{display: none;}
-        &.lvl-2{
-          a{
-            font-family: "PT Sans Narrow";
-            font-size: 24px;
-            font-weight: 700;
-            line-height: 32px;
-            letter-spacing: 0.24px;
-          }
-          &.current>a,&.parent>a{
-            color: var(--prime);
-          }
-        }
-        &.current:not(.lvl-2){
-          background-color: #EDEDED;
-        }
-      }
-    }
-
-
-
-    &:not(.nav)+pages-menu{
-      width: 360px;
-      margin-left: 40px;
-      border-radius: 8px;
-      background: #FFF;
-      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
-      padding: 20px;
-      pages-menu{
-        padding: 0;
-      }
-      .item{
-        a{
-          color: var(--second);
-          &:hover{
-            color: var(--prime-act);
-          }
-        }
-        &.lvl-1{
-          a{
-            font-family: "PT Sans Narrow";
-            font-size: 24px;
-            font-weight: 700;
-            line-height: 32px;
-            letter-spacing: 0.24px;
-          }
-          &.current>a,&.parent>a{
-            color: var(--prime);
-          }
-        }
-        &.current:not(.lvl-1){
-          background-color: #EDEDED;
-        }
-      }
-    }
-
-
-
-    &+pages-menu{
-      &:not(.parent,.current){
-        display: none;
-      }
-
-    }
-    
+    }    
   }
 }
 
 
 
 
-.rootpage{
-  position: absolute;
-  max-width: 100%;
-  width: 1360px;
-  z-index: 1;
-  .locale img{
-    border: none;
-  }
-  pages-menu{
-    a{
-      color: #FFF;
-    }
-    .item.nav::after{
-      background-image: url('../images/ico/chevron_right_white_24.svg') !important;
-    }
-    pages-menu{
-      background-color: transparent !important;
-    }
-  }
-  .locale drop-down{
-    svg{
-      color: #FFF !important;
-    }
-  }
-}
+
 
diff --git a/src/nir/css/_page-top-panel.scss b/src/nir/css/_page-top-panel.scss
index 0450a7c..ba868a7 100644
--- a/src/nir/css/_page-top-panel.scss
+++ b/src/nir/css/_page-top-panel.scss
@@ -4,16 +4,13 @@ header-user-bar{
 
         position: relative;
         display: flex;
-        padding: 11px;
-        height: 64px;
         justify-content: center;
         background-color: #fff;
-        border-radius: 32px;  
-        border: 1px solid var(--second-dis);
       
         .avatar {
           width: 38px;
           height: 38px;
+          flex-shrink: 0;
           color: var(--prime);
           border: 1px solid var(--prime);
           background: #fff;
@@ -35,20 +32,24 @@ header-user-bar{
       
         .name{
           margin: 8px 4px 0 12px;
-          color: var(--second-act);
-          white-space: nowrap;
+          color: var(--black);
+          font-family: PT Sans;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 20px; /* 142.857% */
       
         }
       
       
         .dropdown{
-            right: 16px;
-            top: 48px;
+            right: 4px;
+            top: 36px;
         }
       
           drop-down {
             display: flex;
-            margin-top: 10px;
+            margin-top: 6px;
             .on{
                 svg{
                     color:var(--dark)
@@ -58,12 +59,8 @@ header-user-bar{
       
       
       }
-      @media screen and (max-width: 1330px) {
+      @media screen and (max-width: 760px) {
         .user {
-          .avatar {
-            background-color: var(--white);
-            margin-right: 18px;
-          }
           .name{
             display: none;
           }
diff --git a/src/nir/css/_pages-section.scss b/src/nir/css/_pages-section.scss
index e63796a..8503de7 100644
--- a/src/nir/css/_pages-section.scss
+++ b/src/nir/css/_pages-section.scss
@@ -566,10 +566,11 @@ video-section{
     &.next {
       margin-right: 20px;
       border-color: transparent;
-      font-size: 0.875rem;
+      font-family: PT Sans;
+      font-size: 16px;
       font-style: normal;
       font-weight: 400;
-      line-height: 18px;
+      line-height: 24px;
     }
   }
   .dots {
diff --git a/src/nir/images/ico/burger_32.svg b/src/nir/images/ico/burger_32.svg
new file mode 100644
index 0000000..e7014cb
--- /dev/null
+++ b/src/nir/images/ico/burger_32.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" id="ico">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 10H28V12H4V10ZM4 15H28V17H4V15ZM28 20H4V22H28V20Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/nir/images/ico/login_24.svg b/src/nir/images/ico/login_24.svg
new file mode 100644
index 0000000..3d12502
--- /dev/null
+++ b/src/nir/images/ico/login_24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none" id="ico">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 3H19.5C20.6046 3 21.5 3.89543 21.5 5V19C21.5 20.1046 20.6046 21 19.5 21H12.5V19H19.5V5H12.5V3ZM11.675 11H3.5V13H11.675L9.075 15.6L10.5 17L15.5 12L10.5 7L9.075 8.4L11.675 11Z" fill="currentColor"/>
+</svg>
\ No newline at end of file