Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add login/profile widget to nav bar. #1377

Merged
merged 1 commit into from
Jun 28, 2024
Merged

Add login/profile widget to nav bar. #1377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions app/components/ui/Navigation.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
}
}
48 changes: 39 additions & 9 deletions app/components/ui/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand All @@ -14,6 +15,7 @@ const {
showReportCrisis,
siteNavStyle,
title,
loginEnabled,
} = whiteLabel;

export const Navigation = ({
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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,
Expand Down
1 change: 1 addition & 0 deletions app/components/ui/nav-profile-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions app/utils/whitelabel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ interface WhiteLabelSite {
};
homePageComponent: homepageComponentEnums;
intercom: boolean;
loginEnabled: boolean;
logoLinkDestination: string;
navLogoStyle: string;
refinementListLimit: number;
Expand Down Expand Up @@ -105,6 +106,7 @@ services and re-entry programs.`,
},
homePageComponent: "HomePage",
intercom: false,
loginEnabled: false,
logoLinkDestination: "/",
navLogoStyle: styles.siteNav,
refinementListLimit: 10,
Expand Down Expand Up @@ -169,6 +171,7 @@ const SFServiceGuide: WhiteLabelSite = {
},
...whiteLabelDefaults,
intercom: true,
loginEnabled: true,
siteUrl: "https://sfserviceguide.org",
showBreakingNews: true,
title: "SF Service Guide",
Expand All @@ -195,6 +198,7 @@ const defaultWhiteLabel: WhiteLabelSite = {
},
...whiteLabelDefaults,
intercom: true,
loginEnabled: true,
siteUrl: "https://askdarcel.org",
showBreakingNews: true,
title: "SF Service Guide",
Expand Down
Loading