From dffd1c94b52bbc845af56236bba06b1abca26fed Mon Sep 17 00:00:00 2001
From: Ben Visness <bvisness@gmail.com>
Date: Tue, 2 Jul 2024 22:58:33 -0500
Subject: [PATCH] Add a profile dropdown menu

---
 public/style.css                           |  8 ++--
 src/hmnurl/hmnurl_test.go                  |  2 +-
 src/hmnurl/urls.go                         |  2 +-
 src/rawdata/scss/header.css                | 48 +++++++++++-----------
 src/templates/src/include/header-2024.html | 21 +++++++---
 src/templates/src/include/header.html      |  2 +-
 src/templates/types.go                     | 14 +++----
 src/website/base_data.go                   | 12 +++---
 src/website/routes.go                      |  2 +-
 9 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/public/style.css b/public/style.css
index d5633d21..ebeff171 100644
--- a/public/style.css
+++ b/public/style.css
@@ -8298,7 +8298,7 @@ header .header-nav > .root-item > a {
   display: block;
   padding: var(--spacing-3);
 }
-header .header-nav .submenu {
+header .submenu {
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -8309,16 +8309,16 @@ header .header-nav .submenu {
   border-width: 1px;
   border-top-width: 0;
 }
-header .header-nav .submenu > a {
+header .submenu > a {
   padding: var(--spacing-2) var(--spacing-3);
   display: block;
   white-space: nowrap;
   z-index: 1;
 }
-header .header-nav .root-item:not(:hover):not(.clicked) > .submenu {
+header .root-item:not(:hover):not(.clicked) > .submenu {
   display: none;
 }
-header .header-nav .root-item.clicked .svgicon {
+header .root-item.clicked .svgicon {
   transform: rotate(180deg);
 }
 header:not(.clicked) .root-item:not(:hover) > .submenu,
diff --git a/src/hmnurl/hmnurl_test.go b/src/hmnurl/hmnurl_test.go
index f9f6e82f..7b451f08 100644
--- a/src/hmnurl/hmnurl_test.go
+++ b/src/hmnurl/hmnurl_test.go
@@ -67,7 +67,7 @@ func TestLoginWithDiscord(t *testing.T) {
 }
 
 func TestLogoutAction(t *testing.T) {
-	AssertRegexMatch(t, BuildLogoutAction(""), RegexLogoutAction, nil)
+	AssertRegexMatch(t, BuildLogoutAction(""), RegexLogout, nil)
 }
 
 func TestRegister(t *testing.T) {
diff --git a/src/hmnurl/urls.go b/src/hmnurl/urls.go
index 880da51e..0dfeb0e9 100644
--- a/src/hmnurl/urls.go
+++ b/src/hmnurl/urls.go
@@ -219,7 +219,7 @@ func BuildLoginWithDiscord(redirectTo string) string {
 	return Url("/login-with-discord", []Q{{Name: "redirect", Value: redirectTo}})
 }
 
-var RegexLogoutAction = regexp.MustCompile("^/logout$")
+var RegexLogout = regexp.MustCompile("^/logout$")
 
 func BuildLogoutAction(redir string) string {
 	defer CatchPanic()
diff --git a/src/rawdata/scss/header.css b/src/rawdata/scss/header.css
index c5e48159..68faacbb 100644
--- a/src/rawdata/scss/header.css
+++ b/src/rawdata/scss/header.css
@@ -144,34 +144,34 @@ header {
       display: block;
       padding: var(--spacing-3);
     }
+  }
 
-    .submenu {
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      z-index: 100;
-      min-width: 8rem;
-      background-color: var(--c3);
-      border-style: solid;
-      border-width: 1px;
-      border-top-width: 0;
+  .submenu {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    z-index: 100;
+    min-width: 8rem;
+    background-color: var(--c3);
+    border-style: solid;
+    border-width: 1px;
+    border-top-width: 0;
 
-      >a {
-        padding: var(--spacing-2) var(--spacing-3);
-        display: block;
-        white-space: nowrap;
-        z-index: 1;
-      }
+    >a {
+      padding: var(--spacing-2) var(--spacing-3);
+      display: block;
+      white-space: nowrap;
+      z-index: 1;
+    }
+  }
+
+  .root-item {
+    &:not(:hover):not(.clicked)>.submenu {
+      display: none;
     }
 
-    .root-item {
-      &:not(:hover):not(.clicked)>.submenu {
-        display: none;
-      }
-
-      &.clicked .svgicon {
-        transform: rotate(180deg);
-      }
+    &.clicked .svgicon {
+      transform: rotate(180deg);
     }
   }
 
diff --git a/src/templates/src/include/header-2024.html b/src/templates/src/include/header-2024.html
index 531043fb..801ea574 100644
--- a/src/templates/src/include/header-2024.html
+++ b/src/templates/src/include/header-2024.html
@@ -39,13 +39,22 @@
             </div>
         </div>
 	</div>
-    <a class="db {{ if .User }}pv2 ph3{{ else }}pa3{{ end }} lh-solid flex f6 {{ if not .User }}bl{{ end }}" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
-        {{ with .User }}
-            <img class="avatar avatar-user" src="{{ .AvatarUrl }}">
-        {{ else }}
-            Log In
+    <div class="root-item f6">
+        <a class="db {{ if .User }}pv2 ph3{{ else }}pa3{{ end }} lh-solid flex f6 {{ if not .User }}bl{{ end }}" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
+            {{ with .User }}
+                <img class="avatar avatar-user" src="{{ .AvatarUrl }}">
+            {{ else }}
+                Log In
+            {{ end }}
+        </a>
+        {{ if .User }}
+            <div class="submenu right-0" id="profile-submenu">
+                <a href="{{ .Header.UserProfileUrl }}">Profile</a>
+                <a href="{{ .Header.UserSettingsUrl }}">Settings</a>
+                <a href="{{ .Header.LogoutUrl }}">Log Out</a>
+            </div>
         {{ end }}
-    </a>
+    </div>
 </header>
 <script type="text/javascript">
     document.addEventListener("DOMContentLoaded", function() {
diff --git a/src/templates/src/include/header.html b/src/templates/src/include/header.html
index 2c55653c..18ec8802 100644
--- a/src/templates/src/include/header.html
+++ b/src/templates/src/include/header.html
@@ -9,7 +9,7 @@
                 <a class="dib pv2 pl2" href="{{ .Header.UserProfileUrl }}">{{ .User.Username }}</a>
                 <a class="dib pv2 pr2" href="{{ .Header.UserSettingsUrl }}">(settings)</a>
             </div>
-            <a class="pa2" href="{{ .Header.LogoutActionUrl }}"><span class="icon-logout"></span> Log Out</a>
+            <a class="pa2" href="{{ .Header.LogoutUrl }}"><span class="icon-logout"></span> Log Out</a>
         {{ else }}
             <a class="pa2" id="register-link" href="{{ .Header.RegisterUrl }}">Register</a>
             <a class="pa2" id="login-link" href="{{ .LoginPageUrl }}">Log in</a>
diff --git a/src/templates/types.go b/src/templates/types.go
index a05915c8..5e1d510e 100644
--- a/src/templates/types.go
+++ b/src/templates/types.go
@@ -40,14 +40,12 @@ func (bd *BaseData) AddImmediateNotice(class, content string) {
 }
 
 type Header struct {
-	AdminUrl            string
-	UserProfileUrl      string
-	UserSettingsUrl     string
-	LoginActionUrl      string
-	LogoutActionUrl     string
-	ForgotPasswordUrl   string
-	RegisterUrl         string
-	LoginWithDiscordUrl string
+	AdminUrl          string
+	UserProfileUrl    string
+	UserSettingsUrl   string
+	LogoutUrl         string
+	ForgotPasswordUrl string
+	RegisterUrl       string
 
 	HMNHomepageUrl  string
 	ProjectIndexUrl string
diff --git a/src/website/base_data.go b/src/website/base_data.go
index ce5ace4f..e6858811 100644
--- a/src/website/base_data.go
+++ b/src/website/base_data.go
@@ -64,13 +64,11 @@ func getBaseData(c *RequestContext, title string, breadcrumbs []templates.Breadc
 
 		IsProjectPage: !project.IsHMN(),
 		Header: templates.Header{
-			AdminUrl:            hmnurl.BuildAdminApprovalQueue(), // TODO(asaf): Replace with general-purpose admin page
-			UserSettingsUrl:     hmnurl.BuildUserSettings(""),
-			LoginActionUrl:      hmnurl.BuildLoginAction(c.FullUrl()),
-			LogoutActionUrl:     hmnurl.BuildLogoutAction(c.FullUrl()),
-			ForgotPasswordUrl:   hmnurl.BuildRequestPasswordReset(),
-			RegisterUrl:         hmnurl.BuildRegister(""),
-			LoginWithDiscordUrl: hmnurl.BuildLoginWithDiscord(c.FullUrl()),
+			AdminUrl:          hmnurl.BuildAdminApprovalQueue(), // TODO(asaf): Replace with general-purpose admin page
+			UserSettingsUrl:   hmnurl.BuildUserSettings(""),
+			LogoutUrl:         hmnurl.BuildLogoutAction(c.FullUrl()),
+			ForgotPasswordUrl: hmnurl.BuildRequestPasswordReset(),
+			RegisterUrl:       hmnurl.BuildRegister(""),
 
 			HMNHomepageUrl:  hmnurl.BuildHomepage(),
 			ProjectIndexUrl: hmnurl.BuildProjectIndex(),
diff --git a/src/website/routes.go b/src/website/routes.go
index bb9941cd..1fc8b824 100644
--- a/src/website/routes.go
+++ b/src/website/routes.go
@@ -137,7 +137,7 @@ func NewWebsiteRoutes(conn *pgxpool.Pool) http.Handler {
 	hmnOnly.GET(hmnurl.RegexOldHome, Index)
 
 	hmnOnly.POST(hmnurl.RegexLoginAction, securityTimerMiddleware(time.Millisecond*100, Login))
-	hmnOnly.GET(hmnurl.RegexLogoutAction, Logout)
+	hmnOnly.GET(hmnurl.RegexLogout, Logout)
 	hmnOnly.GET(hmnurl.RegexLoginPage, LoginPage)
 	hmnOnly.GET(hmnurl.RegexLoginWithDiscord, LoginWithDiscord)