Skip to content
This repository has been archived by the owner on Jan 8, 2025. It is now read-only.

Commit

Permalink
Update Navigation Design (#430)
Browse files Browse the repository at this point in the history 
* chore: add new types

* chore: initial category stylecovnersion

* chore: ad dicons

* style: convert dropdownmenu

* chore: add query for nav

* style: dropdowsection conversion

* styles: dropdownsubmenu conversion

* style: convert dropdownmenuitem

* style: convert category and menu

* chore: img selector adjustment

* chore: add nav data fetching

* chore: correct logic

* chore: add image domain to config

* style: convert headercta

* style: convert header and menu

* chore: remove structure file

* style: display fixes to the category component

* style: headercta styling adjustments

* style: dropdownmenu styling

* style: general dropdowns tyling fixes

* style: convert eventbanner

* style: add border to header

* style: dropdownsection width

* style: logo link display size adjustment

* chore: use logo from sanity

* style: headercta display fixes

* style: icon positon tuning

* style: submenu link width adjustment

* style: equalise horizontal padding

* style: adjust dropdownmenu padding and border

* style: menu styling

* style: responsive image scaling

* style: add min widths and extra margin

* style: box sizing and min width to docs layout

* style: correct cta width

* chore: add missing passthrough value

* style: link hover effects

* style: sticky header on desktop

* Increase Icon size, center mobile text, run prettier

* Skip test

* Include event banner sideButtons

* HeaderCTA styling, center eventbanner text

* Center link text if no description

* Remove unneeded DropdownMenuOverlay

* resized fonts and corrected styling on image

* style: imageitem font size adjustment

* style: image size adjustment

* style: add bottompadding to dropdownmenu

* style: stick banner on desktop

* Render featured resources as column

* Silence type check error with navbar.json missing.

* Removed unused event URL check where CodeQL was failing.

---------

Co-authored-by: PietiKinnunen <106057688+PietiKinnunen@users.noreply.github.com>
Co-authored-by: Valtteri <valtteri@ikius.com>
Co-authored-by: Travis Swientek <travis@tswientek.com>
  • Loading branch information
@TuukkaIkius @PietiKinnunen
@valzuxx @travelton
4 people authored Feb 5, 2024
1 parent 043a31e commit aaa4536
Show file tree
Hide file tree
Showing 33 changed files with 1,411 additions and 882 deletions.
71 changes: 22 additions & 49 deletions components/DropdownMenu/DropdownMenu.module.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
14 changes: 3 additions & 11 deletions components/DropdownMenu/DropdownMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};
Expand Down
151 changes: 125 additions & 26 deletions components/DropdownMenu/DropdownMenuItem.module.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
92 changes: 59 additions & 33 deletions components/DropdownMenu/DropdownMenuItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};

Expand Down
Loading

0 comments on commit aaa4536

Please sign in to comment.