Update Navigation Design

components/DropdownMenu/DropdownMenu.module.css

@@ -1,57 +1,30 @@
 .wrapper {
-  box-sizing: border-box;
-  overflow: hidden;
-  width: max-content;
-  padding-left: var(--m-3);
-  padding-right: var(--m-5);
-  padding-top: var(--m-2);
-  color: var(--color-black);
-  background: var(--color-white);
-  border-top: 1px solid #b3b3b3;
-  max-width: 100%;
-  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.15);
-  @media (--sm-scr) {
-    width: 100%;
-    text-align: left;
-    border-top: none;
-    border-bottom: 1px solid var(--color-lighter-gray);
-    padding: 0;
-    box-shadow: none;
-    padding-top: var(--m-4);
-  }
-}
-.asRow {
+
+background-color: #f8f7fd;
+overflow: hidden;
+max-width: 100%;
+width:100%;
+border-top: none;
+border-bottom:1px solid #D2DBDF;
+box-shadow: none;
+box-sizing: border-box;
+@media (--nav) {
+  background-color: white;
   width: 100vw;
-  padding-left: 0;
-  padding-top: 0;
+  border-top: 1px solid #B3B3B3;
+  border-bottom: 1px solid #f0f2f4;
+  padding-bottom: 10px;
+  padding-left: 4.5%;
+  padding-right: 4.5%;
+  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.15);
 }
-
-.menuTitle {
-  @media (--sm-scr) {
-    display: none;
-  }
-  @media (--md-scr) {
-    display: block;
-    align-items: left;
-    margin: 0 var(--m-3);
-    border-bottom: none;
-    border-color: var(--color-lightest-gray);
-    font-size: var(--fs-text-md);
-    line-height: var(--lh-xxl);
-  }
 }
-
 .body {
-  box-sizing: border-box;
+  box-sizing: unset;
   display: block;
-}
-
-.withSubMenus {
-  display: flex;
-  @media (--sm-scr) {
-    flex-direction: column;
-  }
-  @media (--md-scr) {
-    padding-bottom: var(--m-6);
+  justify-content: flex-start;
+  @media (--nav) {
+    display:flex;
   }
+  min-width:unset;
 }

components/DropdownMenu/DropdownMenu.tsx

@@ -1,21 +1,13 @@
 import styles from "./DropdownMenu.module.css";
 
 export interface DropdownMenuProps {
-  title: string;
   children: React.ReactNode;
-  displayAsRow?: boolean;
 }
 
-const DropdownMenu = ({ title, children, displayAsRow }: DropdownMenuProps) => {
+const DropdownMenu = ({ children }: DropdownMenuProps) => {
   return (
-    <div
-      className={`${styles.wrapper} ${displayAsRow && styles.asRow}`}
-      data-testid="mobile-dropdown"
-    >
-      {title && <h3 className={styles.menuTitle}>{title}</h3>}
-      <div className={`${styles.body} ${displayAsRow && styles.withSubMenus}`}>
-        {children}
-      </div>
+    <div className={styles.wrapper} data-testid="mobile-dropdown">
+      <div className={styles.body}>{children}</div>
     </div>
   );
 };

components/DropdownMenu/DropdownMenuItem.module.css

@@ -1,41 +1,140 @@
 .wrapper {
-  display: block;
-  padding-top: 0.5px;
-  line-height: 21px;
-  text-align: left;
+  display: none;
+  @media (--nav) {
+    display: block;
+  }
+  @media (--lg-scr) {
+    display: initial;
+  }
+
+  max-width: min-content;
+}
+
+.styledLink {
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-bottom: 24px;
   text-decoration: none;
   color: var(--color-code);
-
-  &:focus,
-  &:hover {
+  max-width: unset;
+  @media (--nav) {
+    max-width: 250px;
+    align-items: flex-start;
+  }
+  @media (--lg-scr) {
+    max-width: none;
+  }
+  &:hover,
+  &:active,
+  &:focus {
     color: var(--color-dark-purple);
+    background-color: none;
   }
 }
 
-.imageLink {
-  border: 1px solid var(--color-lightest-gray);
-  width: 280px;
-  @media (--sm-scr) {
-    margin-left: var(--m-4);
-    margin-bottom: var(--m-2);
-  }
+.center {
+  align-items: center;
 }
 
-.title {
-  display: block;
-  font-size: var(--fs-text-md);
-  font-weight: var(--fw-regular);
-  line-height: var(--lh-md);
-  padding-bottom: var(--m-2);
-  @media (--sm-scr) {
-    padding-left: var(--m-4);
+.imageItem {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+  border: 1px solid #f0f2f4;
+  overflow: hidden;
+  width: 180px;
+  min-width: unset;
+  box-sizing: unset;
+}
+.imageBox {
+  width: 180px;
+  max-width: 180px;
+  height: auto;
+  flex-shrink: 0;
+  align-self: center;
+  position: relative;
+  @media (--lg-scr) {
+    flex-shrink: 1;
   }
 }
-
+.imageBox img {
+  position: relative;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.item {
+  margin-left: 8px;
+  @media (--nav) {
+    margin-left: 16px;
+  }
+  &.imageitemText {
+    margin-top: 12px;
+    margin-bottom: 12px;
+    @media (--nav) {
+      min-width: 40%;
+      max-width: 50%;
+      margin-right: 8px;
+    }
+  }
+}
+.itemTitle {
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  margin: 0;
+  @media (--nav) {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: bold;
+  }
+}
+.description {
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  margin-bottom: 0;
+  margin-top: 4px;
+  color: var(--color-gray);
+  display: none;
+  @media (--nav) {
+    display: initial;
+  }
+}
+.dateText {
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  color: var(--color-gray);
+}
 .imageTitle {
-  padding: 0 0 var(--m-1) 10px;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  @media (--nav) {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: bold;
+  }
+  margin-top: 0;
 }
+.paragraph {
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: bold;
+  color: var(--color-dark-purple);
+}
+.imageItemTitle {
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
 
-.asTitle {
-  font-weight: var(--fw-bold);
+  @media (--nav) {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: bold;
+  }
 }

components/DropdownMenu/DropdownMenuItem.tsx

@@ -1,47 +1,73 @@
 import Link from "components/Link";
 import Image from "next/image";
 import styles from "./DropdownMenuItem.module.css";
-
+import cn from "classnames";
 export interface MenuItemProps {
-  title: string;
-  href?: string;
-  titleLink?: boolean;
-  isImageLink?: boolean;
-  imageSrc?: string;
+  itemType: string | "normal" | "image";
+  icon?: string | null;
+  title?: string | null;
+  description?: string | null;
+  link: string | null;
+  imageItem?: {
+    imageTitle?: string | null;
+    useMetadata: boolean | null;
+    customImage?: {
+      itemImage: string;
+      itemTitle: string;
+      imageCTA?: string;
+      imageDate?: string;
+    } | null;
+  };
   children?: MenuItemProps[];
-  passthrough?: boolean;
 }
 
 const DropdownMenuItem = ({
+  itemType,
   title,
-  href = "/",
-  passthrough = true, // If no value is sent, default to true
-  titleLink = false,
-  isImageLink = false,
-  imageSrc,
-}: MenuItemProps) => {
-  return !isImageLink ? (
-    <Link href={href} passthrough={passthrough} className={styles.wrapper}>
-      <strong className={`${styles.title} ${titleLink && styles.asTitle}`}>
-        {title}
-      </strong>
-    </Link>
-  ) : (
-    <Link href={href} passthrough={passthrough} className={styles.wrapper}>
-      <div className={styles.imageLink}>
-        <Image
-          src={imageSrc}
-          width={280}
-          height={139}
-          style={{ objectFit: "contain" }}
-          alt="featured resource"
-          sizes="25vw"
-        />
-        <strong className={`${styles.title} ${styles.imageTitle}`}>
-          {title}
-        </strong>
+  link = "",
+  icon,
+  description,
+  imageItem,
+  itemAmount,
+  ...props
+}: MenuItemProps & { itemAmount?: number }) => {
+  const { imageTitle, customImage } = imageItem || {};
+  return itemType !== "image" ? (
+    <Link
+      className={cn(styles.styledLink, !description && styles.center)}
+      href={link}
+      passthrough
+    >
+      <Image src={icon || ""} width={35} height={35} alt="" />
+      <div className={styles.item}>
+        <p className={styles.itemTitle}>{title}</p>
+        {description && <p className={styles.description}>{description}</p>}
       </div>
     </Link>
+  ) : (
+    <div className={styles.wrapper}>
+      {imageTitle && <h3 className={styles.imageTitle}>{imageTitle}</h3>}
+      <Link className={styles.styledLink} href={link}>
+        <div className={styles.imageItem}>
+          <div className={styles.imageBox}>
+            <Image
+              src={customImage?.itemImage || ""}
+              width={180}
+              height={100}
+              sizes="180px"
+              alt=""
+            />
+          </div>
+          <div className={cn(styles.item, styles.imageItemText)} {...props}>
+            <p className={styles.imageItemTitle}>{customImage?.itemTitle}</p>
+            {customImage?.imageDate && (
+              <p className={styles.dateText}>{customImage?.imageDate}</p>
+            )}
+            <p className={styles.paragraph}>{customImage?.imageCTA}</p>
+          </div>
+        </div>
+      </Link>
+    </div>
   );
 };