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.
ShelterTechSF · Jun 28, 2024 · 136865e · 136865e
1 parent df13b98
commit 136865e
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 9 deletions.
diff --git 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
@@ -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
diff --git 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",