From c0b68f9e5bd9ba6455d664d787c94d6bc0e88814 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Thu, 11 Apr 2024 13:44:04 +0200
Subject: [PATCH] refactor: Extract Sidebar Link to component

---
 .../(live)/(protected)/my-pages/layout.tsx    |  9 ++----
 components/MyPages/Sidebar/index.tsx          | 19 +++---------
 components/TempDesignSystem/Link/index.tsx    | 29 +++++++++++++++++
 .../TempDesignSystem/Link/link.module.css     | 31 +++++++++++++++++++
 components/TempDesignSystem/Link/link.ts      |  9 ++++++
 components/TempDesignSystem/Link/variants.ts  | 26 ++++++++++++++++
 types/requests/myPages/navigation.ts          |  1 -
 7 files changed, 102 insertions(+), 22 deletions(-)
 create mode 100644 components/TempDesignSystem/Link/index.tsx
 create mode 100644 components/TempDesignSystem/Link/link.module.css
 create mode 100644 components/TempDesignSystem/Link/link.ts
 create mode 100644 components/TempDesignSystem/Link/variants.ts

diff --git a/app/[lang]/(live)/(protected)/my-pages/layout.tsx b/app/[lang]/(live)/(protected)/my-pages/layout.tsx
index 76f346e5e..41c11dbfb 100644
--- a/app/[lang]/(live)/(protected)/my-pages/layout.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/layout.tsx
@@ -30,16 +30,11 @@ function getURL(node: PageLink) {
 function mapMenuItems(navigationItems: NavigationItem[]) {
   return navigationItems.map(({ item }): MenuItem => {
     const { node } = item.pageConnection.edges[0]
-    const {
-      title,
-      system: { uid },
-    } = node
 
     return {
-      title,
-      uid,
+      uid: node.system.uid,
       url: getURL(node),
-      linkText: item.link_text,
+      linkText: item.link_text || node.title,
       subItems: item.sub_items ? mapMenuItems(item.sub_items) : null,
     }
   })
diff --git a/components/MyPages/Sidebar/index.tsx b/components/MyPages/Sidebar/index.tsx
index 2a10f7307..be9c8e42e 100644
--- a/components/MyPages/Sidebar/index.tsx
+++ b/components/MyPages/Sidebar/index.tsx
@@ -1,38 +1,29 @@
 "use client"
 import { LogOut } from "react-feather"
-import Link from "next/link"
+import Link from "../../TempDesignSystem/Link"
 
 import styles from "./sidebar.module.css"
 import { SidebarProps } from "@/types/requests/myPages/navigation"
-import { usePathname } from "next/navigation"
 import { Fragment } from "react"
 
 export default function Sidebar({ menuItems }: SidebarProps) {
-  const currentPageSlug = `/${usePathname()
-    .split("/")
-    .filter((v) => v)
-    .at(-1)}`
-
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
         {menuItems.map((item) => (
           <Fragment key={item.uid}>
-            <Link
-              className={`${styles.link} ${currentPageSlug === item.url ? styles.active : ""}`}
-              href={item.url}
-            >
-              {item.linkText || item.title}
+            <Link variant={"sidebar"} href={item.url}>
+              {item.linkText}
             </Link>
             {item.subItems
               ? item.subItems.map((subItem) => {
                   return (
                     <Link
                       key={subItem.uid}
-                      className={`${styles.link} ${currentPageSlug === subItem.url ? styles.active : ""}`}
                       href={subItem.url}
+                      variant={"sidebar"}
                     >
-                      {subItem.linkText || subItem.title}
+                      {subItem.linkText}
                     </Link>
                   )
                 })
diff --git a/components/TempDesignSystem/Link/index.tsx b/components/TempDesignSystem/Link/index.tsx
new file mode 100644
index 000000000..34b4ed706
--- /dev/null
+++ b/components/TempDesignSystem/Link/index.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import { linkVariants } from "./variants"
+
+import NextLink from "next/link"
+
+import type { LinkProps } from "./link"
+import { usePathname } from "next/navigation"
+
+export default function Link({
+  className,
+  href,
+  size,
+  variant,
+  ...props
+}: LinkProps) {
+  const currentPageSlug = `/${usePathname()
+    .split("/")
+    .filter((v) => v)
+    .at(-1)}`
+  const isActive = currentPageSlug === href
+  const classNames = linkVariants({
+    active: isActive,
+    className,
+    size,
+    variant,
+  })
+  return <NextLink className={classNames} href={href} {...props} />
+}
diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css
new file mode 100644
index 000000000..088a78934
--- /dev/null
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -0,0 +1,31 @@
+.link {
+  text-decoration: none;
+}
+
+.default {
+  font-family: var(--ff-fira-sans);
+}
+
+.sidebar {
+  align-items: center;
+  color: var(--some-text-color, #111);
+  display: flex;
+  font-size: 1.6rem;
+  font-weight: 400;
+  gap: 0.6rem;
+  line-height: 1.9rem;
+  position: relative;
+}
+
+.activeSidebar {
+  font-weight: 600;
+}
+
+.activeSidebar::before {
+  bottom: -0.4rem;
+  background-color: var(--some-text-color, #000);
+  content: "";
+  height: 0.2rem;
+  position: absolute;
+  width: 100%;
+}
diff --git a/components/TempDesignSystem/Link/link.ts b/components/TempDesignSystem/Link/link.ts
new file mode 100644
index 000000000..51c70e5a6
--- /dev/null
+++ b/components/TempDesignSystem/Link/link.ts
@@ -0,0 +1,9 @@
+import { linkVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface LinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof linkVariants> {
+  href: string
+}
diff --git a/components/TempDesignSystem/Link/variants.ts b/components/TempDesignSystem/Link/variants.ts
new file mode 100644
index 000000000..d09bbee5b
--- /dev/null
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -0,0 +1,26 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./link.module.css"
+
+export const linkVariants = cva(styles.link, {
+  variants: {
+    active: {
+      true: styles.active,
+    },
+    size: {},
+    variant: {
+      default: styles.default,
+      sidebar: styles.sidebar,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+  compoundVariants: [
+    {
+      class: styles.activeSidebar,
+      active: true,
+      variant: "sidebar",
+    },
+  ],
+})
diff --git a/types/requests/myPages/navigation.ts b/types/requests/myPages/navigation.ts
index f1f787df3..f743e38de 100644
--- a/types/requests/myPages/navigation.ts
+++ b/types/requests/myPages/navigation.ts
@@ -11,7 +11,6 @@ export enum PageLinkEnum {
 
 export type MenuItem = {
   uid: string
-  title: string
   linkText: string
   subItems: MenuItem[] | null
   url: string