Add 2 column format in feed page

Author: anushika99

projects/commudle-admin/src/app/feature-modules/external-feed/components/external-feed/external-feed.component.html

@@ -1,23 +1,36 @@
 <div class="external-feed page-padding">
-  <nb-card class="header">
-    <nb-card-body>
-      <h1>
-        <nb-icon icon="cast-outline" status="warning"></nb-icon>
-        Feed
-      </h1>
-      <p>
-        Some links from around the world!
-      </p>
-    </nb-card-body>
-  </nb-card>
-  <div class="external-feed-list">
-    <div *ngFor="let post of externalPosts">
-      <app-external-feed-hlist-item [feedItem]="post"></app-external-feed-hlist-item>
+  <div class="page-container">
+    <div class="feed-desktop d-flex justify-content-start">
+      <div class="left-column">
+          <nb-card class="header">
+            <nb-card-body>
+                Popular Tags
+            </nb-card-body>
+          </nb-card>
+      </div>
+      <div class = "right-column ">
+        <nb-card class="header">
+          <nb-card-body>
+            <h1>
+              <nb-icon icon="cast-outline" status="warning"></nb-icon>
+              Feed
+            </h1>
+            <p>
+              Some links from around the world!
+            </p>
+          </nb-card-body>
+        </nb-card>
+        <div class="external-feed-list">
+          <div *ngFor="let post of externalPosts">
+            <app-external-feed-hlist-item [feedItem]="post"></app-external-feed-hlist-item>
+          </div>
+        </div>
+        <div class="load-more-button" *ngIf="canLoadMore && total">
+          <button [disabled]="isLoading" (click)="getFeedPosts()" fullWidth nbButton status="primary" size="small" outline>
+            Load More!
+          </button>
+        </div>
+      </div>
     </div>
   </div>
-  <div class="load-more-button" *ngIf="canLoadMore && total">
-    <button [disabled]="isLoading" (click)="getFeedPosts()" fullWidth nbButton status="primary" size="small" outline>
-      Load More!
-    </button>
-  </div>
 </div>

projects/commudle-admin/src/app/feature-modules/external-feed/components/external-feed/external-feed.component.scss

@@ -1,21 +1,43 @@
 @import '/projects/commudle-admin/src/assets/styles/variables';
 .external-feed {
-    width: 100%;
-  
-    .header {
-      h1 {
+    .left-column{
+      width: 300px;
+      // margin-top: 200px;
+      .header {
+        border: .0625rem solid #e4e9f2;
+        border-radius: 1rem;
+        box-shadow: none;
+        height: 60px;  
+        // h4 {
         font-weight: $fw-500;
-  
-        nb-icon {
-          font-size: $fs-40;
+        font-size: 25px;
+        text-align: justify;
+        // }
+      }
+    }
+    .right-column{
+      width: 1000px;
+    
+      .header {
+        h1 {
           font-weight: $fw-500;
+    
+          nb-icon {
+            font-size: $fs-40;
+            font-weight: $fw-500;
+          }
         }
       }
+
+    }  
+}
+
+@media (min-width: $media-width) {
+  .external-feed {
+    .page-container {
+      flex-direction: column;
+    // width: $media-width;
+        margin: 0 auto;
     }
-  
-    @media (min-width: $media-width) {
-      width: $media-width;
-      margin: 0 auto;
-    }
-  
-  }
+  }
+}