From 136865e196c8c3b4cf07100effe0181af267bd6f Mon Sep 17 00:00:00 2001
From: Richard Xia <richardxia@richardxia.com>
Date: Thu, 27 Jun 2024 21:04:10 -0700
Subject: [PATCH] Add login/profile widget to nav bar.

This allows the login page to be discoverable, since previously, you had
to manually type in the address of the login page into the address bar.
This is gated as a new whitelabel property named `loginEnabled`, which
is only being enabled on the SFSG site and the legacy default askdarcel
site.
---
 app/components/ui/Navigation.module.scss | 50 ++++++++++++++++++++++++
 app/components/ui/Navigation.tsx         | 48 ++++++++++++++++++-----
 app/components/ui/nav-profile-icon.svg   |  1 +
 app/utils/whitelabel.ts                  |  4 ++
 4 files changed, 94 insertions(+), 9 deletions(-)
 create mode 100644 app/components/ui/nav-profile-icon.svg

diff --git a/app/components/ui/Navigation.module.scss b/app/components/ui/Navigation.module.scss
index 853296631..c62557863 100644
--- a/app/components/ui/Navigation.module.scss
+++ b/app/components/ui/Navigation.module.scss
@@ -199,3 +199,53 @@
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
   }
 }
+
+.profileMenuContainer {
+  position: relative;
+}
+
+.profileMenuButton {
+  background: transparent;
+  // Unset the global styles coming from _forms.scss
+  height: revert;
+  padding: revert;
+
+  &:active,
+  &:focus,
+  &:hover {
+    box-shadow: none;
+  }
+}
+
+.profileMenuButtonImage {
+  height: 32px;
+  // Esoteric way to force an image to any color you want. This matches
+  // $color-brand
+  // https://stackoverflow.com/a/53336754
+  filter: invert(32%) sepia(55%) saturate(4616%) hue-rotate(211deg)
+    brightness(97%) contrast(85%);
+}
+
+.profileMenu {
+  display: none;
+  position: absolute;
+  right: 0;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+  min-width: 200px;
+  background: white;
+
+  &.isOpen {
+    display: block;
+  }
+}
+
+.profileMenuItemLink {
+  display: block;
+  padding: 12px 16px;
+
+  &:active,
+  &:focus,
+  &:hover {
+    backdrop-filter: brightness(95%);
+  }
+}
diff --git a/app/components/ui/Navigation.tsx b/app/components/ui/Navigation.tsx
index c9263a65f..d12eb5d1c 100644
--- a/app/components/ui/Navigation.tsx
+++ b/app/components/ui/Navigation.tsx
@@ -5,6 +5,7 @@ import qs from "qs";
 import { useAppContext, whiteLabel } from "utils";
 import Translate from "./Translate";
 import styles from "./Navigation.module.scss";
+import navProfileIcon from "./nav-profile-icon.svg";
 
 const {
   appImages: { logoSmall },
@@ -14,6 +15,7 @@ const {
   showReportCrisis,
   siteNavStyle,
   title,
+  loginEnabled,
 } = whiteLabel;
 
 export const Navigation = ({
@@ -94,15 +96,6 @@ const SiteLinks = () => {
 
   return (
     <ul className={styles.navRight}>
-      {/* Todo: This will eventually be replaced by a user icon with a dropdown menu of account related options.
-          The designs are still forthcoming. For now, it serves as a basic log-out functionality for the purposes
-          of development and testing.
-      */}
-      {authState && (
-        <li>
-          <Link to="/log-out">Log Out</Link>
-        </li>
-      )}
       <li>
         <Link to="/about">About</Link>
       </li>
@@ -124,6 +117,19 @@ const SiteLinks = () => {
           Contact Us
         </a>
       </li>
+      {/* Todo: This will eventually be replaced by a user icon with a dropdown menu of account related options.
+          The designs are still forthcoming. For now, it serves as a basic log-out functionality for the purposes
+          of development and testing.
+      */}
+      {loginEnabled && (
+        <li>
+          {authState ? (
+            <ProfileMenu />
+          ) : (
+            <Link to="/log-in">Navigator Log In</Link>
+          )}
+        </li>
+      )}
       {showReportCrisis && (
         <li>
           <a
@@ -143,6 +149,30 @@ const SiteLinks = () => {
   );
 };
 
+const ProfileMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <div className={styles.profileMenuContainer}>
+      <button
+        className={styles.profileMenuButton}
+        onClick={() => setIsOpen(!isOpen)}
+        type="button"
+      >
+        <img
+          className={styles.profileMenuButtonImage}
+          src={navProfileIcon}
+          alt="Profile menu"
+        />
+      </button>
+      <div className={`${styles.profileMenu} ${isOpen ? styles.isOpen : ""}`}>
+        <Link className={styles.profileMenuItemLink} to="/log-out">
+          Log Out
+        </Link>
+      </div>
+    </div>
+  );
+};
+
 const SiteSearch = ({
   query,
   setQuery,
diff --git a/app/components/ui/nav-profile-icon.svg b/app/components/ui/nav-profile-icon.svg
new file mode 100644
index 000000000..782885d3d
--- /dev/null
+++ b/app/components/ui/nav-profile-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg>
\ No newline at end of file
diff --git a/app/utils/whitelabel.ts b/app/utils/whitelabel.ts
index 93b4fc060..be2da2379 100644
--- a/app/utils/whitelabel.ts
+++ b/app/utils/whitelabel.ts
@@ -43,6 +43,7 @@ interface WhiteLabelSite {
   };
   homePageComponent: homepageComponentEnums;
   intercom: boolean;
+  loginEnabled: boolean;
   logoLinkDestination: string;
   navLogoStyle: string;
   refinementListLimit: number;
@@ -105,6 +106,7 @@ services and re-entry programs.`,
   },
   homePageComponent: "HomePage",
   intercom: false,
+  loginEnabled: false,
   logoLinkDestination: "/",
   navLogoStyle: styles.siteNav,
   refinementListLimit: 10,
@@ -169,6 +171,7 @@ const SFServiceGuide: WhiteLabelSite = {
   },
   ...whiteLabelDefaults,
   intercom: true,
+  loginEnabled: true,
   siteUrl: "https://sfserviceguide.org",
   showBreakingNews: true,
   title: "SF Service Guide",
@@ -195,6 +198,7 @@ const defaultWhiteLabel: WhiteLabelSite = {
   },
   ...whiteLabelDefaults,
   intercom: true,
+  loginEnabled: true,
   siteUrl: "https://askdarcel.org",
   showBreakingNews: true,
   title: "SF Service Guide",