From 2d7b91413b151f0e812baf94e9c596713b4a81c9 Mon Sep 17 00:00:00 2001
From: ecco257 <connorjwittman@gmail.com>
Date: Fri, 18 Oct 2024 19:31:20 -0400
Subject: [PATCH] Display username in profile container when logged in

---
 src/components/personal.rs |  9 +++++++++
 style/personal.scss        | 14 ++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/src/components/personal.rs b/src/components/personal.rs
index 6cb8090..c6b46a5 100644
--- a/src/components/personal.rs
+++ b/src/components/personal.rs
@@ -35,6 +35,15 @@ pub fn Profile() -> impl IntoView {
 
     view! {
         <div class="profile-container">
+            <div class="profile-name">
+                <Show
+                    when=move || logged_in.get().unwrap_or_default()
+                    fallback=|| view!{
+                        <h1>Not Logged In</h1>
+                    }>
+                    <h1>{move || user.get().map(|user| user.map(|user| user.username).unwrap_or_default())}</h1>
+                </Show>
+            </div>
             <div class="profile-icon" on:click=open_dropdown>
                 <Show
                     when=move || logged_in.get().unwrap_or_default()
diff --git a/style/personal.scss b/style/personal.scss
index de02199..75d16fb 100644
--- a/style/personal.scss
+++ b/style/personal.scss
@@ -15,6 +15,20 @@
     border: 0.2rem solid rgba(89, 89, 89, 0.199);
     padding: 0.5rem;
 
+    .profile-name {
+      display: flex;
+      flex-direction: column;
+      margin-left: 0.5rem;
+      h1 {
+        font-size: 1.2rem;
+        margin: 0;
+      }
+      h2 {
+        font-size: 1rem;
+        margin: 0;
+      }
+    }
+
     .profile-icon {
       display: inline-flex;
       padding: 0.2rem;