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);
}
@media screen and (min-width: 1367px) {
@media screen and (min-width: 767px) {
.details {
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;
}
@media screen and (min-width: 1367px) {
@media screen and (min-width: 767px) {
.mainNavigation {
max-width: 360px;
}

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

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

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

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

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

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

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

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

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

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

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

@@ -390,11 +390,21 @@ export const baseQueryRouter = router({
const mainLinks = transformPageConnectionLinks(
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 {
mainLinks: mainLinks,
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 = {
id: string
href: string
title: string
openInNewTab: boolean
isExternal: boolean
openInNewTab: boolean
title: string
url: string
}
export type FooterSecondaryNavProps = {
secondaryLinks: {
@@ -21,9 +21,11 @@ export type FooterSecondaryNavProps = {
appDownloads: {
title: string
links: {
title: string
href: string
id: string
href: {
href: string
title: string
}
type: string
}[]
}
}