feat: improve menu flexibility (#152)

bloom-housing · Jul 16, 2024 · dc7c27e · dc7c27e
1 parent 5d21218
commit dc7c27e
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 0 deletions.
diff --git a/src/headers/SiteHeader.scss b/src/headers/SiteHeader.scss
@@ -433,6 +433,10 @@
   padding-right: var(--bloom-s1);
 }
 
+.site-header__dropdown-wrapper {
+  position: relative;
+}
+
 .site-header__navbar-wrapped {
   background-color: var(--wrapped-background-color);
   justify-content: flex-start;
@@ -503,6 +507,17 @@
 .site-header__dropdown {
   display: flex;
   flex-direction: column;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: -10px;
+    bottom: -20px;
+    left: -20px;
+    right: -20px;
+    z-index: -1;
+    pointer-events: auto;
+  }
 }
 
 .site-header__dropdown-item {

diff --git a/src/headers/SiteHeader.stories.tsx b/src/headers/SiteHeader.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from "react"
 
 import { SiteHeader } from "./SiteHeader"
+import Icon from "../icons/Icon"
 
 export default {
   title: "Headers/Site Header",
@@ -338,6 +339,49 @@ export const withDropdownIcons = () => (
     ]}
   />
 )
+
+export const withDropdownIconElement = () => (
+  <SiteHeader
+    homeURL={"/"}
+    languages={[
+      { label: "English", onClick: () => console.log("Clicked English"), active: true },
+      { label: "Español", onClick: () => console.log("Clicked Español"), active: false },
+      { label: "中文", onClick: () => console.log("Clicked 中文"), active: false },
+    ]}
+    notice="We're just getting started. We'd love to get your feedback."
+    logoSrc="/images/logo_glyph.svg"
+    title="Alameda County Housing Portal"
+    dropdownItemClassName={"text-2xs"}
+    menuLinks={[
+      {
+        title: "My Account",
+        subMenuLinks: [
+          {
+            title: "My Dashboard",
+            href: "/account/dashboard",
+            className: "text-[13px]",
+            iconElement: <Icon symbol="profile" size="medium" className="pr-2" />,
+          },
+          {
+            title: "My Applications",
+            href: "/account/dashboard",
+            iconElement: <Icon symbol="application" size="medium" className="pr-2" />,
+          },
+          {
+            title: "Account Settings",
+            href: "/account/edit",
+            iconElement: <Icon symbol="settings" size="medium" className="pr-2" />,
+          },
+          {
+            title: "Sign Out",
+            onClick: () => {},
+          },
+        ],
+      },
+    ]}
+  />
+)
+
 export const imageOnlyLogo = () => (
   <SiteHeader
     homeURL={"/"}

diff --git a/src/headers/SiteHeader.tsx b/src/headers/SiteHeader.tsx
@@ -15,6 +15,7 @@ export interface MenuLink {
   className?: string
   href?: string
   iconClassName?: string
+  iconElement?: React.ReactNode
   iconSrc?: string
   onClick?: () => void
   subMenuLinks?: MenuLink[]
@@ -122,6 +123,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
     const dropdownOptionContent = (option: MenuLink) => {
       return (
         <>
+          {option?.iconElement && isDesktop && option.iconElement}
           {option.iconSrc && isDesktop && (
             <img
               src={option.iconSrc}