[Blog] [Ajay]: Add mobile responsiveness

Author: Ajay kumar

TestArena/Blog/Common/BlogImage.razor

@@ -28,7 +28,7 @@
 
 <div class="row image-header">
     <figure class="col-md-12">
-        <img class="article-image" src="@ImagePath" width="500" height="auto" alt="@Description"/>
+        <img class="img-fluid rounded mx-auto d-block my-3" src="@ImagePath" width="500" height="auto" alt="@Description"/>
         <figcaption>@ImageDescription</figcaption>
     </figure>
 </div>

TestArena/Blog/Common/Header.razor

@@ -21,7 +21,7 @@
 
 <header class="article-header">
     <h1 class="fw-bold">@Title</h1>
-    <img src="@Image" alt="Article Banner" class="article-image img-fluid mt-3">
+    <img src="@Image" alt="Article Banner" class="img-fluid rounded mx-auto d-block my-3">
 </header>
 
 @* <div class="row"> *@

TestArena/Layout/MainLayout.razor

@@ -5,9 +5,17 @@
     </div> *@
 
     <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
+        <header class="bg-primary text-white p-3 d-flex align-items-center">
+            <div class="logo">
+                <h3 class="m-0">Dev Arena</h3>
+            </div>
+            <div class="search-bar text-center">
+                <input type="text" class="form-control w-75 mx-auto" placeholder="Search...">
+            </div>
+            <div class="settings">
+                <button class="btn btn-light">Settings</button>
+            </div>
+        </header>
 
         <article class="content px-4">
             @Body

TestArena/Layout/NavMenu.razor

@@ -1,11 +1,23 @@
-<div class="top-row ps-3 navbar navbar-dark">
-    @* <div class="container-fluid">
-        <a class="navbar-brand" href="">TestArena</a>
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-    </div> *@
-</div>
+@* $1$ <div class="top-row ps-3 navbar navbar-dark"> #1# *@
+@* $1$     $1$ <div class="container-fluid"> #1# *@
+@* $1$         <a class="navbar-brand" href="">TestArena</a> #1# *@
+@* $1$         <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu"> #1# *@
+@* $1$             <span class="navbar-toggler-icon"></span> #1# *@
+@* $1$         </button> #1# *@
+@* $1$     </div> #1# *@ 
+@* $1$ </div> #1# *@
+
+<header class="bg-primary text-white p-3 d-flex align-items-center">
+    <div class="logo">
+        <h3 class="m-0">Tech Blog</h3>
+    </div>
+    <div class="search-bar text-center">
+        <input type="text" class="form-control w-75 mx-auto" placeholder="Search...">
+    </div>
+    <div class="settings">
+        <button class="btn btn-light">Settings</button>
+    </div>
+</header>
 
 @* <div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu"> *@
 @*     <nav class="flex-column"> *@