feat(WEB-304): remaning UI from design system primitives

components/MyPages/Sidebar/index.tsx

@@ -1,52 +1,57 @@
 import { Fragment } from "react"
-import { LogOut } from "react-feather"
 
 import { logout } from "@/constants/routes/handleAuth"
 import { serverClient } from "@/lib/trpc/server"
 
+import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import styles from "./sidebar.module.css"
 
-import { LangParams } from "@/types/params"
+import type { LangParams } from "@/types/params"
 
 export default async function Sidebar({ lang }: LangParams) {
   const navigation = await serverClient().contentstack.myPages.navigation.get()
   const { formatMessage } = await getIntl()
-
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
         <Title level="h5">{navigation.title}</Title>
-        {navigation.items.map((item) => (
-          <Fragment key={item.uid}>
-            <Link
-              href={item.originalUrl || item.url}
-              partialMatch
-              variant="sidebar"
-            >
-              {item.linkText}
-            </Link>
-            {item.subItems
-              ? item.subItems.map((subItem) => (
-                <Link
-                  key={subItem.uid}
-                  href={subItem.originalUrl || subItem.url}
-                  partialMatch
-                  variant="sidebar"
-                >
-                  {subItem.linkText}
-                </Link>
-              ))
-              : null}
+        {navigation.menuItems.map((menuItem, idx) => (
+          <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
+            <Divider color="peach" />
+            <ul className={styles.list}>
+              {menuItem.links.map((link) => (
+                <li key={link.uid}>
+                  <Link
+                    color="burgundy"
+                    href={link.originalUrl || link.url}
+                    partialMatch
+                    size={menuItem.display_sign_out_link ? "small" : "regular"}
+                    variant="sidebar"
+                  >
+                    {link.linkText}
+                  </Link>
+                </li>
+              ))}
+              {menuItem.display_sign_out_link ? (
+                <li>
+                  <Link
+                    color="burgundy"
+                    href={logout[lang]}
+                    prefetch={false}
+                    size="small"
+                    variant="sidebar"
+                  >
+                    {formatMessage({ id: "Log out" })}
+                  </Link>
+                </li>
+              ) : null}
+            </ul>
           </Fragment>
         ))}
-
-        <Link prefetch={false} href={logout[lang]} variant="sidebar">
-          {formatMessage({ id: "Log out" })} <LogOut height={16} width={16} />
-        </Link>
       </nav>
     </aside>
   )

components/MyPages/Sidebar/sidebar.module.css

@@ -1,22 +1,20 @@
 .sidebar {
-  align-self: flex-start;
   display: none;
-  padding-top: var(--Spacing-x3);
-  position: sticky;
-  /* Based on header and breadcrumbs height, and gap */
-  top: 7.1rem;
 }
 
 .nav {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  padding-left: 4rem;
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+.list {
+  list-style: none;
 }
 
 @media screen and (min-width: 1367px) {
   .sidebar {
+    align-self: flex-start;
     display: block;
+    padding-top: var(--Spacing-x1);
   }
 }