fixed articles section

src/app/articles/articles.component.css

@@ -17,7 +17,7 @@
 }
 
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 1023px) {
 .articles {
   height: 500px;
   overflow-y: auto;

src/app/articles/articles.component.html

@@ -24,15 +24,15 @@
             height="50"
           />
           <h2
-            class="font-medium text-4xl md:text-6xl leading-[50px] lg:leading-[70px]"
+            class="font-medium text-3xl md:text-6xl leading-[50px] lg:leading-[70px]"
           >
             Stay informed with our latest news and updates.
           </h2>
         </div>
         <div
           class="mt-auto ml-0 md:ml-12 lg:ml-1 flex items-center gap-2 h-10 w-52 cursor-pointer"
         >
-          <p class="border rounded-3xl p-1 text-base font-medium border-black">
+          <p class="border rounded-3xl p-1 text-sm md:text-base font-medium border-black">
             READ THE JOURNAL
           </p>
           <img src="/assets/icons/Arrow.svg" alt="" width="25" height="25" />
@@ -50,12 +50,12 @@
             <img
               [src]="post.image"
               width="100%"
-              class="w-4/5 lg:w-full"
+              class="w-11/12 lg:w-full"
               height="auto"
               alt="Blog Image"
             />
             <div class="flex items-end my-3">
-              <p class="w-3/4 text-xl font-medium text-[#2C2C2C]">
+              <p class="w-5/6 text-xl font-medium text-[#2C2C2C]">
                 {{ post.text }}
               </p>
               <img
@@ -65,7 +65,7 @@
                 height="25"
               />
             </div>
-            <div class="w-3/5 ml-auto mb-8">
+            <div class="w-full lg:w-3/5 ml-auto mb-8">
               <p class="text-[#393939] text-sm font-normal">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
               </p>

src/app/header/header.component.css

@@ -7,6 +7,46 @@
   border-radius: 50px;
 }
 
+
+
+/* Side Bar Navigation */
+.sideNav-container {
+  right: 0;
+  position: fixed;
+  top: 5rem;
+  width: 100%;
+  z-index: 300;
+}
+
+/* Backdrop */
+.backdrop {
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.5); 
+  height: 100vh;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.sideNav-style li:hover {
+  background-color: #1cb374c0;
+}
+.sideNav-style li:hover a {
+  color: #f9f9f9;
+}
+/* .sideNav-style li.active {
+  background-color: var(--secondary-color);
+  font-weight: bold;
+  color: #f9f9f9;
+} */
+.nav-menu {
+  display: none;
+}
+
+.sideNav-style .link-styles { 
+  display: block;
+  width: 100%;
+}
+
 @media only screen and (max-width: 1023px) {
   .nav-control {
     display: none;

src/app/header/header.component.html

@@ -1,5 +1,5 @@
 <div class="fixed w-full h-20 lg:h-24 z-10 top-0 bg-white">
-  <div class="container mx-auto py-4 lg:py-6 section-head ">
+  <div class="container mx-auto py-4 lg:py-6 section-head">
     <div class="flex justify-between items-center">
       <div class="w-48 lg:w-56">
         <img src="/assets/images/icon.png" width="100%" height="40px" alt="" />
@@ -12,7 +12,7 @@
             *ngFor="let item of navItems"
           >
             <a
-              class="text-base font-medium text-grey-one"
+              class="text-base font-medium text-grey-one hover:text-[#1cb374c0]"
               style="text-decoration: none"
               [href]="item.path"
             >
@@ -34,6 +34,47 @@
           />
         </button>
       </div>
+      <div class="block lg:hidden text-fine-green" *ngIf="showList" (click)="onShowList()">
+        <img src="assets/icons/menu_close.svg" alt="menu" width="30px" />
+      </div>
+      <div class="block lg:hidden text-fine-green" *ngIf="!showList" (click)="onShowList()">
+        <img src="assets/icons/menu-fill.svg" class="text-fine-green" width="30px" alt="menu" />
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- SMALL SCREEN -->
+<div *ngIf="showList">
+  <div class="sideNav-container">
+    <div class="backdrop" (click)="onShowList()">
+      <div class="sideNav-style h-screen w-11/12 md:w-3/5 bg-[#f5f5f5]">
+        <li
+          style="list-style: none"
+          class="cursor-pointer m-4 p-3 bg-light-green rounded-md"
+          *ngFor="let item of navItems"
+        >
+          <a
+            class="text-base font-medium text-grey-one"
+            style="text-decoration: none"
+            [href]="item.path"
+          >
+            {{ item.label }}</a
+          >
+        </li>
+        <div class="bg-[#00000031] my-6 w-full h-[1px]"></div>
+        <button
+        class="bg-fine-green w-3/4 mx-auto  flex gap-2 justify-center rounded-4xl font-medium p-3 text-white "
+      >
+        Download
+        <img
+          src="/assets/icons/download.svg"
+          width="20px"
+          height="18px"
+          alt=""
+        />
+      </button>
+      </div>
     </div>
   </div>
 </div>

src/app/header/header.component.ts

@@ -7,11 +7,12 @@ import { Component, HostListener, Renderer2 } from '@angular/core';
 })
 export class HeaderComponent {
   constructor(private renderer: Renderer2) {}
+  showList: boolean = false;
   navItems = [
-    { path: '#privacy', label: 'Privacy' },
-    { path: '#help', label: 'Help Center' },
     { path: '#blog', label: 'Blog' },
     { path: '#features', label: 'Features' },
+    { path: '#privacy', label: 'Privacy' },
+    { path: '#help', label: 'Help Center' },
   ];
 
   @HostListener('window:scroll', [])
@@ -27,4 +28,11 @@ export class HeaderComponent {
       this.renderer.removeClass(navControl, 'scrolled');
     }
   }
+  onShowList = () => {
+    this.showList = !this.showList;
+  };
+
+  closeShowList = () => {
+    this.showList = false;
+  };
 }