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

V3-breadcrumb-menu #838

Merged
merged 17 commits into from
Oct 30, 2024
Merged

V3-breadcrumb-menu #838

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
d998884
functioning breadcrumb menu
anemne Oct 25, 2024
26d2f42
Merge branch 'v3' into v3-breadcrumb-menu
anemne Oct 29, 2024
f30dd01
breadcrumbMenu
anemne Oct 29, 2024
bcf0ae9
remove breadcrumbmenu from homepage
anemne Oct 30, 2024
8338a99
Add todo
anemne Oct 30, 2024
0e1a46a
fixes from review
anemne Oct 30, 2024
6e00a12
Update src/components/navigation/header/header.module.css
anemne Oct 30, 2024
44dc77a
lint fix
anemne Oct 30, 2024
35dd887
move breadcrumbmenu to own component
anemne Oct 30, 2024
d3f1953
move dot to front of breadcrumb
anemne Oct 30, 2024
fafdadb
merge with main
anemne Oct 30, 2024
9cae544
Update src/components/navigation/breadCrumbMenu/BreadCrumbMenu.tsx
anemne Oct 30, 2024
3182838
e --> slug
anemne Oct 30, 2024
c69858a
Merge branch 'v3-breadcrumb-menu' of github.com:varianter/variant.no …
anemne Oct 30, 2024
9ff3ba7
prettier
anemne Oct 30, 2024
a9bcccc
add check
anemne Oct 30, 2024
f235a0e
merge v3 into branch
anemne Oct 30, 2024
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
159 changes: 107 additions & 52 deletions src/components/navigation/header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { SanityImage } from "src/components/image/SanityImage";
import LanguageSwitcher from "src/components/languageSwitcher/LanguageSwitcher";
import CustomLink from "src/components/link/CustomLink";
import LinkButton from "src/components/linkButton/LinkButton";
import Text from "src/components/text/Text";
import { getHref } from "src/utils/link";
import { BrandAssets } from "studio/lib/interfaces/brandAssets";
import { InternationalizedString } from "studio/lib/interfaces/global";
Expand All @@ -26,6 +27,11 @@ export interface IHeader {
pathTranslations: InternationalizedString;
}

export interface BreadCrumbProps {
currentLanguage: string;
pathname: string;
}

const filterLinks = (data: ILink[], type: string) =>
data?.filter((link) => link._type === type);

Expand Down Expand Up @@ -68,60 +74,109 @@ export const Header = ({
}, []);

return (
<FocusOn
enabled={isOpen}
onClickOutside={toggleMenu}
onEscapeKey={toggleMenu}
className={`${styles.focusOn} ${isOpen && styles.isOpen}`}
>
<header>
<nav aria-label="Main menu">
<div className={styles.wrapper}>
{assets?.primaryLogo && (
<div className={styles.logo}>
<Link href="/" aria-label="Home">
<SanityImage image={assets.primaryLogo} />
</Link>
</div>
)}
{renderPageLinks(links, false, pathname)}
{renderPageCTAs(ctas, false)}
<div className={styles.languageSwitcher}>
{defaultLanguage && (
<LanguageSwitcher
currentLanguage={currentLanguage}
pathTranslations={pathTranslations}
/>
)}
</div>
<button
aria-haspopup="true"
aria-controls={sidebarID}
className={isOpen ? styles.open : styles.closed}
aria-expanded={isOpen}
onClick={toggleMenu}
/>
</div>
{isOpen && (
<div
className={styles.mobileMenu}
id={sidebarID}
aria-label="Mobile Menu"
onClick={() => setIsOpen(false)}
>
{renderPageLinks(sidebarLinks, true, pathname)}
{renderPageCTAs(sidebarCtas, true)}
{defaultLanguage && (
<LanguageSwitcher
currentLanguage={currentLanguage}
pathTranslations={pathTranslations}
/>
<>
<FocusOn
enabled={isOpen}
onClickOutside={toggleMenu}
onEscapeKey={toggleMenu}
className={`${styles.focusOn} ${isOpen && styles.isOpen}`}
>
<header>
<nav aria-label="Main menu">
<div className={styles.wrapper}>
{assets?.primaryLogo && (
<div className={styles.logo}>
<Link href="/" aria-label="Home">
<SanityImage image={assets.primaryLogo} />
</Link>
</div>
)}
{renderPageLinks(links, false, pathname)}
{renderPageCTAs(ctas, false)}
<div className={styles.languageSwitcher}>
{defaultLanguage && (
<LanguageSwitcher
currentLanguage={currentLanguage}
pathTranslations={pathTranslations}
/>
)}
</div>
<button
anemne marked this conversation as resolved.
Show resolved Hide resolved
anemne marked this conversation as resolved.
Show resolved Hide resolved
aria-haspopup="true"
aria-controls={sidebarID}
className={isOpen ? styles.open : styles.closed}
aria-expanded={isOpen}
onClick={toggleMenu}
/>
</div>
)}
</nav>
</header>
</FocusOn>
{isOpen && (
<div
className={styles.mobileMenu}
id={sidebarID}
aria-label="Mobile Menu"
onClick={() => setIsOpen(false)}
>
{renderPageLinks(sidebarLinks, true, pathname)}
{renderPageCTAs(sidebarCtas, true)}
{defaultLanguage && (
<LanguageSwitcher
currentLanguage={currentLanguage}
pathTranslations={pathTranslations}
/>
)}
</div>
)}
</nav>
</header>
</FocusOn>
{pathname !== "/" && pathname !== "/" + currentLanguage && (
<BreadCrumb currentLanguage={currentLanguage} pathname={pathname} />
)}
</>
);
};

export const BreadCrumb = ({ currentLanguage, pathname }: BreadCrumbProps) => {
anemne marked this conversation as resolved.
Show resolved Hide resolved
return (
<ul className={styles.breadCrumbMenu}>
{/* TODO: "Hjem" should be updated with translation */}
{[
"Hjem",
...(pathname.includes("/" + currentLanguage + "/")
? pathname.split("/").slice(2)
: pathname.split("/").slice(1)),
].map((e, index, path) => {
const href =
"/" + currentLanguage + "/" + path.slice(1, index + 1).join("/");
const isLast = index === path.length - 1;

return (
<li key={index} className={styles.breadCrumb}>
<Link className={styles.breadCrumb} href={href}>
<Text
className={
isLast ? styles.breadCrumbText : styles.breadCrumbLink
}
type={isLast ? "labelSemibold" : "desktopLink"}
>
{e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()}
</Text>
</Link>
{!isLast && (
<span
className={
index < path.length - 2
? styles.dotSeparator
: styles.lastDotSeparator
}
>
•
</span>
)}
anemne marked this conversation as resolved.
Show resolved Hide resolved
</li>
);
})}
</ul>
);
};

Expand Down
44 changes: 40 additions & 4 deletions src/components/navigation/header/header.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@
background-color: var(--primary-black);
}

.scrolled {
background-color: var(--primary-black);
}

.isOpen {
height: 100vh;
display: flex;
Expand Down Expand Up @@ -149,3 +145,43 @@
composes: button;
background: url("/_assets/menu-close.svg") no-repeat 50% 50%;
}

.breadCrumbMenu {
position: relative;
anemne marked this conversation as resolved.
Show resolved Hide resolved
color: var(--primary-text);
anemne marked this conversation as resolved.
Show resolved Hide resolved
background-color: var(--primary-bg);
display: flex;
flex-direction: row;
gap: 0.5rem;
align-items: center;
list-style: none;
text-decoration: none;
}

.breadCrumb {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
color: var(--primary-black);
text-decoration: none;
list-style: none;
}

.breadCrumbText {
color: var(--primary-black);
}

.breadCrumbLink {
color: var(--primary-black);
text-decoration: underline;
}

.dotSeparator {
font-size: 2.5em;
}

.lastDotSeparator {
font-size: 2.5em;
color: var(--secondary-red);
}
anemne marked this conversation as resolved.
Show resolved Hide resolved
26 changes: 14 additions & 12 deletions src/components/text/text.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,10 @@
/* .h6 */

.desktopLink {
font-size: 10rem;
line-height: 100%;
font-weight: 500;

@media (min-width: 1024px) {
font-size: 5.25rem;
line-height: normal;
}
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 110%;
}

.bodyXl {
Expand Down Expand Up @@ -137,8 +133,14 @@
line-height: 120%;
}

.labelSemibold {
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 120%;
}

/* TODO: add font variables */
/* .labelSemibold, */
/* .labelBold, */
/* .quoteItalic, */
/* .quoteNormal, */
/* .labelBold */
/* .quoteItalic */
/* .quoteNormal */
3 changes: 3 additions & 0 deletions src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ html {

--focus-color: #8b0f40;

/* TODO: upgrade color-scheme with correct colors */
--secondary-red: #f0503f;

/* breakpoints */
--breakpoint-mobile: 767px;
--breakpoint-tablet: 640px;
Expand Down