From 7c5f21791cf931137168beaab5e419410e69cd55 Mon Sep 17 00:00:00 2001
From: dannyzou18 <dzou3814@gmail.com>
Date: Sat, 30 Mar 2024 13:22:09 -0400
Subject: [PATCH] Added simple popup to profile icon 	modified:  
 src/components/dashboard.rs 	modified:   src/components/personal.rs 
 modified:   style/dashboard.scss 	modified:   style/home.scss 
 modified:   style/personal.scss

---
 src/components/dashboard.rs |  2 +-
 src/components/personal.rs  | 22 +++++++++++++++++++--
 style/dashboard.scss        |  5 +++++
 style/home.scss             |  4 ++--
 style/personal.scss         | 38 ++++++++++++++++++++++++++++++++++++-
 5 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/src/components/dashboard.rs b/src/components/dashboard.rs
index c6cc16f..9881db7 100644
--- a/src/components/dashboard.rs
+++ b/src/components/dashboard.rs
@@ -4,7 +4,7 @@ use leptos::*;
 pub fn Dashboard() -> impl IntoView {
     view! {
         <div class="dashboard-container home-component">
-            <h1>Dashboard</h1>
+            <h1 class="dashboard-header">Dashboard</h1>
         </div>
     }
 }
\ No newline at end of file
diff --git a/src/components/personal.rs b/src/components/personal.rs
index fdca503..7fc3ef8 100644
--- a/src/components/personal.rs
+++ b/src/components/personal.rs
@@ -14,12 +14,30 @@ pub fn Personal() -> impl IntoView {
 
 #[component]
 pub fn Profile() -> impl IntoView {
+    let (dropdown_open, set_dropdown_open) = create_signal(false);
+
+    let open_dropdown = move |_| {
+        set_dropdown_open.update(|value| *value = !*value);
+        log!("opened dropdown");
+    };
     view! {
         <div class="profile-container">
-            <div class="profile-icon">
+            <div class="profile-icon" on:click=open_dropdown>
                 <Icon icon=Icon::from(CgProfile) />
             </div>
-            
+            <div class="dropdown-container" style={move || if dropdown_open() {"display: flex"} else {"display: none"}}>
+                <DropDownNotLoggedIn />
+            </div>
+        </div>
+    }
+}
+#[component]
+pub fn DropDownNotLoggedIn() -> impl IntoView {
+    view! {
+        <div class="dropdown-not-logged">
+            <h1>Not Logged in!</h1>
+            <a href="/login"><button class="auth-button">Log In</button></a>
+            <a href="/signup"><button class="auth-button">Sign up</button></a>
         </div>
     }
 }
diff --git a/style/dashboard.scss b/style/dashboard.scss
index 6ecba86..e0df7d0 100644
--- a/style/dashboard.scss
+++ b/style/dashboard.scss
@@ -2,4 +2,9 @@
 
 .dashboard-container {
   width: calc(100% - 22rem - 16rem);
+  .dashboard-header {
+    font-size: 1.2rem;
+    font-weight: 300;
+    border-bottom: 2px solid white;
+  }
 }
diff --git a/style/home.scss b/style/home.scss
index 7a33033..371032d 100644
--- a/style/home.scss
+++ b/style/home.scss
@@ -11,6 +11,6 @@
   background: #1c1c1c;
   height: 100vh;
   margin: 2px;
-  padding: 1rem 1.5rem 1.5rem 1.5rem;
+  padding: 0.2rem 1.5rem 1.5rem 1rem;
   border-radius: 0.5rem;
-}
\ No newline at end of file
+}
diff --git a/style/personal.scss b/style/personal.scss
index 37692e7..e03e05e 100644
--- a/style/personal.scss
+++ b/style/personal.scss
@@ -10,7 +10,7 @@
   .profile-container {
     display: flex;
     border-radius: 0.4rem;
-    margin: 0.3rem;
+    margin: 0.2rem;
     min-height: 6rem;
     border: 2px solid rgba(89, 89, 89, 0.199);
     padding: 0.5rem;
@@ -34,5 +34,41 @@
     .profile-icon:active {
       transform: scale(0.8);
     }
+    .dropdown-container {
+      position: absolute;
+      top: 3.8rem;
+      right: 0.8rem;
+      background: #1c1c1c;
+      border-radius: 0.5rem;
+      width: 10rem;
+      z-index: 1;
+      background-color: red;
+      border: 1px solid grey;
+
+      .dropdown-not-logged {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+        h1 {
+          font-size: 1.2rem;
+        }
+        .auth-button {
+        }
+      }
+    }
+    .dropdown-container:before {
+      content: "";
+      position: absolute;
+      top: -0.4rem;
+      right: 0.92rem;
+      width: 10px;
+      height: 10px;
+      transform: rotate(45deg);
+      background-color: red;
+      border-left: 1px solid grey;
+      border-top: 1px solid grey;
+    }
   }
 }