pages tree styling

src/app/_modules/layout/header/header.component.scss

@@ -1,4 +1,5 @@
 @media screen and (max-width: 1264px){
+
 .hidemobile{
   display: none;
 }

src/app/_modules/pages/tree/pages-tree.component.html

@@ -1,14 +1,16 @@
-<div class="item active" *ngIf="!parent">
+<div class="item home active" *ngIf="!parent">
   <div class="bar">
-    <div class="left"></div>
-    <div class="mid">
-      <!--div class="info">
-        <div class="logo home"></div>
-        <div class="name"><p>Главная страница</p></div>
-      </div-->
+    <div class="left">
+      <button type="button" class="toggle"></button>
     </div>
-    <div class="right">
-      <div class="menu"><button type="button" class="btn icon add" (click)="add()"></button></div>
+    <div class="mid">
+      <div class="info">
+        <div class="logo"></div>
+        <div class="name"><p>Главная страница</p></div>
+      </div>
+    </div>
+    <div class="right right-home">
+      <div class="menu"><button type="button" class="clear add-child" title="Добавить страницу" (click)="add()"></button></div>
     </div>
   </div>
 </div>

src/app/_modules/pages/tree/pages-tree.component.scss

@@ -1,4 +1,26 @@
+
+.item.home .bar .mid .info .logo::before{
+  background-image: url('~src/assets/images/icons/home_page_24dp.svg');
+}
+
+.item:not(.home){    
+    .bar{
+      padding-left: 50px;
+      
+    }
+    .item .bar{
+      padding-left: 100px;
+    }
+    .item .item .bar{
+      padding-left: 150px;
+    }
+ }
+
+
+
 .item {
+
+  
   .bar {
     display: flex;
     flex-direction: row;
@@ -49,6 +71,7 @@
             width: 24px;
             height: 24px;
           }
+
           img {
             width: 100%;
             height: 100%;
@@ -75,7 +98,7 @@
       display: flex;
       flex-direction: row;
       align-items: center;
-      flex-shrink: 0;
+      flex-shrink: 1;
       button {
         margin-left: 24px;
         &.edit {
@@ -93,10 +116,13 @@
         }
       }
     }
+    .right-home {
+      width: 144px;
+    }
   }
   .items {
     display: none;
-    padding-left: 50px;
+
   }
   &.active {
     >.bar {

src/assets/images/icons/home_page_24dp.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 19H9V13H15V19H18V10L12 5.5L6 10V19ZM4 21V9L12 3L20 9V21H13V15H11V21H4Z" fill="white"/>
+</svg>

src/environments/environment.ts

@@ -6,7 +6,7 @@ export const environment = {
   production: false,
   apiUrl: 'http://api.vniigazv2.lc',
   clientId: 2,
-  clientSecret: 'AbV5mDVEimNQb2dKJTx9PYALFCiiYOHTsbeMEtp2',
+  clientSecret: 'XVBDBzHcJu52dGI5qctg8l6aT7Q8Ms9PKiAUHOVp',
 };
 
 /*