scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-187) Secondary navigation

Browse Source
This commit is contained in:
Pontus Dreij
2024-08-30 08:48:28 +02:00
parent 4040bb72b2
commit db042dbfde
9 changed files with 57 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Footer/Details/details.module.css
View File

@@ -52,7 +52,7 @@
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
} }
@media screen and (min-width: 1367px) { @media screen and (min-width: 767px) {
.details { .details {
padding: var(--Spacing-x6) var(--Spacing-x5) var(--Spacing-x4); padding: var(--Spacing-x6) var(--Spacing-x5) var(--Spacing-x4);
} }

2
components/Footer/Navigation/MainNav/mainnav.module.css
View File

@@ -22,7 +22,7 @@
justify-content: space-between; justify-content: space-between;
} }
@media screen and (min-width: 1367px) { @media screen and (min-width: 767px) {
.mainNavigation { .mainNavigation {
max-width: 360px; max-width: 360px;
} }

51
components/Footer/Navigation/SecondaryNav/index.tsx
View File

@@ -13,6 +13,7 @@ export default function FooterSecondaryNav({
secondaryLinks, secondaryLinks,
appDownloads, appDownloads,
}: FooterSecondaryNavProps) { }: FooterSecondaryNavProps) {
console.log("secondaryLinks", secondaryLinks[0].links)
return ( return (
<div className={styles.secondaryNavigation}> <div className={styles.secondaryNavigation}>
<nav className={styles.secondaryNavigationGroup}> <nav className={styles.secondaryNavigationGroup}>
@@ -21,13 +22,17 @@ export default function FooterSecondaryNav({
</Body> </Body>
<ul className={styles.secondaryNavigationList}> <ul className={styles.secondaryNavigationList}>
{appDownloads.links.map((link) => ( {appDownloads.links.map((link) => (
<li key={link.id} className={styles.appDownloadItem}> <li key={link.type} className={styles.appDownloadItem}>
<a href={link.href} target="_blank" rel="noopener noreferrer"> <a
href={link.href.href}
target="_blank"
aria-label={link.href.title}
>
<Image <Image
src={ src={
AppDownLoadLinks[link.id as keyof typeof AppDownLoadLinks] AppDownLoadLinks[link.type as keyof typeof AppDownLoadLinks]
} }
alt={link.title} alt={link.href.title}
width={125} width={125}
height={40} height={40}
/> />
@@ -42,23 +47,29 @@ export default function FooterSecondaryNav({
{link.title} {link.title}
</Body> </Body>
<ul className={styles.secondaryNavigationList}> <ul className={styles.secondaryNavigationList}>
{link.links.map((link) => ( {link.links.map(
<li key={link.id} className={styles.secondaryNavigationItem}> (subLink) =>
{link.isExternal ? ( subLink.url && (
<a <li
href={link.href} key={subLink.id}
key={link.title} className={styles.secondaryNavigationItem}
target={link.openInNewTab ? "_blank" : "_self"}
> >
{link.title} {subLink.isExternal ? (
</a> <a
) : ( href={subLink.url}
<Link href={link.href} key={link.title}> key={subLink.title}
{link.title} target={subLink.openInNewTab ? "_blank" : "_self"}
</Link> >
)} {subLink.title}
</li> </a>
))} ) : (
<Link href={subLink.url} key={subLink.url}>
{subLink.title}
</Link>
)}
</li>
)
)}
</ul> </ul>
</nav> </nav>
))} ))}

2
components/Footer/Navigation/SecondaryNav/secondarynav.module.css
View File

@@ -25,7 +25,7 @@
margin: 0; margin: 0;
} }
@media screen and (min-width: 1367px) { @media screen and (min-width: 767px) {
.secondaryNavigation { .secondaryNavigation {
margin-top: 0; margin-top: 0;
gap: 80px; gap: 80px;

4
components/Footer/Navigation/index.tsx
View File

@@ -1,12 +1,10 @@
import { footer } from "../mockedData"
import FooterMainNav from "./MainNav" import FooterMainNav from "./MainNav"
import FooterSecondaryNav from "./SecondaryNav" import FooterSecondaryNav from "./SecondaryNav"
import styles from "./navigation.module.css" import styles from "./navigation.module.css"
export default function FooterNavigation({ ...props }) { export default function FooterNavigation({ ...props }) {
const { mainLinks } = props const { mainLinks, secondaryLinks, appDownloads } = props
const { secondaryLinks, appDownloads } = footer
return ( return (
<section className={styles.section}> <section className={styles.section}>
<div className={styles.maxWidth}> <div className={styles.maxWidth}>

2
components/Footer/Navigation/navigation.module.css
View File

@@ -11,7 +11,7 @@
max-width: var(--max-width-content); max-width: var(--max-width-content);
} }
@media screen and (min-width: 1367px) { @media screen and (min-width: 767px) {
.section { .section {
padding: var(--Spacing-x9) 0; padding: var(--Spacing-x9) 0;
} }

4
server/routers/contentstack/base/output.ts
View File

@@ -273,8 +273,8 @@ const validateInternalLink = z
edges: z.array( edges: z.array(
z.object({ z.object({
node: z.object({ node: z.object({
title: z.string(), title: z.string().optional(),
url: z.string(), url: z.string().optional(),
}), }),
}) })
), ),

12
server/routers/contentstack/base/query.ts
View File

@@ -390,11 +390,21 @@ export const baseQueryRouter = router({
const mainLinks = transformPageConnectionLinks( const mainLinks = transformPageConnectionLinks(
validatedFooterData.main_links validatedFooterData.main_links
) )
console.log(
"secondary_links ",
validatedFooterData.secondary_links[0].links[0].pageConnection?.edges
)
const secondaryLinks = validatedFooterData.secondary_links.map(
(section) => ({
...section,
links: transformPageConnectionLinks(section.links),
})
)
return { return {
mainLinks: mainLinks, mainLinks: mainLinks,
appDownloads: validatedFooterData.app_downloads, appDownloads: validatedFooterData.app_downloads,
secondaryLinks: validatedFooterData.secondary_links, secondaryLinks: secondaryLinks,
} }
}), }),
}) })

14
types/components/footer/navigation.ts
View File

@@ -8,10 +8,10 @@ export type FooterMainNavProps = {
export type FooterSecondaryNav = { export type FooterSecondaryNav = {
id: string id: string
href: string
title: string
openInNewTab: boolean
isExternal: boolean isExternal: boolean
openInNewTab: boolean
title: string
url: string
} }
export type FooterSecondaryNavProps = { export type FooterSecondaryNavProps = {
secondaryLinks: { secondaryLinks: {
@@ -21,9 +21,11 @@ export type FooterSecondaryNavProps = {
appDownloads: { appDownloads: {
title: string title: string
links: { links: {
title: string href: {
href: string href: string
id: string title: string
}
type: string
}[] }[]
} }
} }