Made the site look a little nicer

Author: ProgrammerAL

src/SvgHelpers/SvgHelpers/Pages/About.razor renamed to src/SvgHelpers/SvgHelpers/Components/AboutComponent.razor

@@ -1,7 +1,3 @@
-@page "/about"
-
-<p>This site implements utilities to help a person manually edit SVG files.</p>
+<p>This site implements utilities to help a person manually edit SVG files.</p>
 
 <p>The source code is available at: <a href="https://github.com/ProgrammerAL/SvgHelpers" target="_blank">https://github.com/ProgrammerAL/SvgHelpers</a></p>
-
-

src/SvgHelpers/SvgHelpers/Components/HeaderNavBarComponent.razor

@@ -0,0 +1,31 @@
+<nav class="px-2">
+    <div class="container mx-auto flex flex-col md:flex-row gap-4 md:gap-0 items-center justify-between">
+        <div class="flex place-self-end block text-center text-green-700 self-end font-semibold">
+        </div>
+
+        <div class="w-auto place-self-end grid grid-cols-4 place-items-center items-center gap-2 md:gap-4">
+            <button onclick="@(() => ToggleAboutVisibility())"
+               class="text-green-700 hover:text-green-800 active:text-green-600 focus:text-green-900
+                       text-sm lg:text-lg font-semibold
+                       block text-center
+                       border-none hover:bg-transparent border-0
+                       col-start-3
+                       px-2">About</button>
+
+            <a href="https://ProgrammerAL.com"
+               class="text-green-700 hover:text-green-800 active:text-green-600 focus:text-green-900
+                       text-sm lg:text-lg font-semibold
+                       block text-center
+                       border-none hover:bg-transparent border-0
+                       col-start-4
+                       px-2">ProgrammerAL.com</a>
+        </div>
+    </div>
+
+    @if (IsAboutVisibile)
+    {
+        <AboutComponent />
+    }
+
+    <div class="border-green-700 border-b-4 border-solid w-full mt-2 mx-auto"></div>
+</nav>

src/SvgHelpers/SvgHelpers/Components/HeaderNavBarComponent.razor.cs

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Components;
+
+namespace ProgrammerAl.SvgHelpers.Components;
+public partial class HeaderNavBarComponent : ComponentBase
+{
+    private bool IsAboutVisibile { get; set; } = false;
+
+    private void ToggleAboutVisibility()
+    {
+        IsAboutVisibile = !IsAboutVisibile;
+    }
+}

src/SvgHelpers/SvgHelpers/Shared/MainLayout.razor

@@ -2,12 +2,9 @@
 @inherits LayoutComponentBase
 
 <div class="page">
-    <div class="px-8 bg-gray-200 border flex justify-end">
-        <a href="/about" class="text-blue-700 text-xl p-2">About</a>
-    </div>
-
     <main class="flex flex-col mt-4">
-        <article class="content mx-8">
+        <HeaderNavBarComponent />
+        <article class="content mt-4 mx-8">
             @Body
         </article>
     </main>