grid

src/app/_modules/layout/grid/grid.component.html

@@ -20,7 +20,7 @@
     <div class="main-content">
       <router-outlet></router-outlet>
     </div>    
-    <!-- <right-content></right-content> -->
+    <right-content></right-content>
   </div>
   <footer></footer>
 </div>

src/app/_modules/layout/layout.module.ts

@@ -11,6 +11,7 @@ import {GridComponent} from "@app/_modules/layout/grid/grid.component";
 import {SettingSiteComponent} from "@app/_modules/layout/setting-site/setting-site.component";
 import {HeaderUserBarComponent} from "@app/_modules/layout/header/user-bar/header-user-bar.component";
 import { LeftContentComponent } from './left-content/left-content.component';
+import { RightContentComponent } from './right-content/right-content.component';
 
 @NgModule({
   imports: [
@@ -27,7 +28,8 @@ import { LeftContentComponent } from './left-content/left-content.component';
     FooterComponent,
     SettingSiteComponent,
     HeaderUserBarComponent,
-    LeftContentComponent
+    LeftContentComponent,
+    RightContentComponent
   ],
   exports: [
     GridComponent,

src/app/_modules/layout/right-content/right-content.component.html

@@ -0,0 +1 @@
+<pages-menu></pages-menu>

src/app/_modules/layout/right-content/right-content.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'right-content',
+  templateUrl: './right-content.component.html',
+  styleUrls: ['./right-content.component.scss']
+})
+export class RightContentComponent {
+
+}

src/assets/css/basics.scss

@@ -90,6 +90,7 @@ body {
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: center;
+      gap: 40px;
       left-content{
         flex-basis: 100%;
         background-color: var(--second);
@@ -106,7 +107,7 @@ body {
           .left-content{
             width: 100%;
             height: 100%;
-            max-width: 900px;
+            max-width: 1280px;
             margin: 0 40px;
             position: relative;
             display: flex;
@@ -142,7 +143,7 @@ body {
           justify-content: center;
           .edit-field-row{
             width: 100%;
-            max-width: 900px;
+            max-width: 1280px;
             margin: 0 40px;
             display: flex;
             justify-content: right;
@@ -153,13 +154,19 @@ body {
 
         }
       }
+      .main-content{
+        flex-basis: 840px;
+      }
+      right-content{
+        flex-basis: 400px;
+      }
     }
   }
 }
 
 .limiter {
   width: 100%;
-  max-width: 900px;
+  max-width: 1280px;
   margin: 0 auto;
 }
 

src/assets/css/main-menu.scss

@@ -4,7 +4,7 @@ header{
   justify-content: center;
   background-color: var(--white);
   .header{
-    width: 1360px;
+    width: 1280px;
     height: 80px;
     margin: 12px 40px;
     display: flex;