Files
web/components/MyPages/Sidebar/index.tsx
Michael Zetterberg 14e93eba7c chore: lint fix
2024-04-23 14:43:17 +02:00

64 lines
1.8 KiB
TypeScript

import { Fragment } from "react"
import { LogOut } from "react-feather"
import { GetNavigationMyPages } from "@/lib/graphql/Query/NavigationMyPages.graphql"
import { request } from "@/lib/graphql/request"
import Link from "@/components/TempDesignSystem/Link"
import Title from "../Title"
import { mapMenuItems } from "./helpers"
import styles from "./sidebar.module.css"
import type {
GetNavigationMyPagesData,
SidebarProps,
} from "@/types/requests/myPages/navigation"
export default async function Sidebar({ lang }: SidebarProps) {
const response = await request<GetNavigationMyPagesData>(
GetNavigationMyPages,
{
locale: lang,
}
)
// navigation_my_pages is of type Single, hence the hard [0]
const navigation = response.data.all_navigation_my_pages.items[0]
const menuItems = mapMenuItems(navigation.items)
return (
<aside className={styles.sidebar}>
<nav className={styles.nav}>
<Title level="h5" uppercase>
{navigation.title}
</Title>
{menuItems.map((item) => (
<Fragment key={item.uid}>
<Link href={item.url} partialMatch variant="sidebar">
{item.linkText}
</Link>
{item.subItems
? item.subItems.map((subItem) => {
return (
<Link
key={subItem.uid}
href={subItem.url}
partialMatch
variant="sidebar"
>
{subItem.linkText}
</Link>
)
})
: null}
</Fragment>
))}
<Link href="/api/web/auth/signout" variant="sidebar">
Log out <LogOut height={16} width={16} />
</Link>
</nav>
</aside>
)
}