From 1c5dab84f42094238976aede7929b20880910d46 Mon Sep 17 00:00:00 2001
From: n-y-kim <nyn2265@gmail.com>
Date: Mon, 16 Sep 2024 22:52:41 +0900
Subject: [PATCH] Fix MainLayout with header & navlist

---
 .../Components/Layout/MainLayout.razor        | 55 +++++++++++++++----
 .../Components/Pages/Admin.razor              |  4 +-
 2 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/Layout/MainLayout.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/Layout/MainLayout.razor
index 56bf7fcf..f7449fbb 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/Layout/MainLayout.razor
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/Layout/MainLayout.razor
@@ -1,19 +1,52 @@
 @inherits LayoutComponentBase
 
-<div class="page">
-    @if (this._isAdmin == true)
-    {
-        <div class="sidebar">
-            <NavMenu />
+<FluentLayout Style="margin-top: 10px;">
+
+    <FluentHeader>
+        Azure OpenAI Proxy Playground
+        <div style="margin-left: auto;">
+            <FluentButton IconEnd="@(new Icons.Regular.Size20.Person().WithColor("Blue"))">
+                Login
+            </FluentButton>
+        </div>
+    </FluentHeader>
+
+    <FluentStack Orientation="Orientation.Horizontal" Width="100%">
+        <div>
+            <FluentNavMenu Width="250">
+                <FluentNavLink Icon="@(new Icons.Regular.Size24.Globe())" Href="/">AOAI Proxy Playground
+                </FluentNavLink>
+                <FluentNavLink Icon="@(new Icons.Regular.Size24.Home())" Href="/">Home</FluentNavLink>
+                @if (this._isAdmin == true)
+                {
+                    <FluentNavLink Icon="@(new Icons.Regular.Size24.Board())" Href="/admin">Admin Dashboard</FluentNavLink>
+                }
+            </FluentNavMenu>
         </div>
-    }
 
-    <main>
-        <article class="content px-4">
-            @Body
-        </article>
-    </main>
+        <div style="width: 100%;">
+            <div>
+                @Body
+            </div>
+        </div>
+    </FluentStack>
+</FluentLayout>
+
+@* <div class="page">
+<AdminTopListBar />
+@if (this._isAdmin == true)
+{
+<div class="sidebar">
+<NavMenu />
 </div>
+}
+
+<main>
+<article class="content px-4">
+@Body
+</article>
+</main>
+</div> *@
 
 <div id="blazor-error-ui">
     An unhandled error has occurred.
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Admin.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Admin.razor
index a03ff0aa..dae3e1ef 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Admin.razor
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Admin.razor
@@ -1,5 +1,7 @@
 @page "/admin"
 
 <PageTitle>Admin Page</PageTitle>
+@* 
+<AdminTopListBar /> *@
 
-<h1>Admin Dashboard Page</h1>
+<h3>Admin Dashboard Page</h3>