feat(WEB-154): my profile view

components/MyPages/Sidebar/Client.tsx

@@ -0,0 +1,46 @@
+"use client"
+import { usePathname } from "next/navigation"
+
+import Link from "@/components/TempDesignSystem/Link"
+
+import type { LangParams } from "@/types/params"
+
+export default function ClientSidebar({ lang }: LangParams) {
+  const pathname = usePathname()
+  return (
+    <>
+      <Link
+        currentPath={pathname}
+        href={`/${lang}/my-pages`}
+        variant="sidebar"
+      >
+        My Pages
+      </Link>
+      <Link currentPath={pathname} href="#" variant="sidebar">
+        My Stays
+      </Link>
+      <Link currentPath={pathname} href="#" variant="sidebar">
+        My Points
+      </Link>
+      <Link currentPath={pathname} href="#" variant="sidebar">
+        My Benefits
+      </Link>
+      {/* <Link currentPath={pathname} href="#" variant="sidebar">
+          My Challenges
+        </Link>
+        <Link currentPath={pathname} href="#" variant="sidebar">
+          My Favourites
+        </Link> */}
+      <Link currentPath={pathname} href="#" variant="sidebar">
+        About Scandic Friends
+      </Link>
+      <Link
+        currentPath={pathname}
+        href={`/${lang}/my-pages/profile`}
+        variant="sidebar"
+      >
+        My Profile
+      </Link>
+    </>
+  )
+}

components/MyPages/Sidebar/index.tsx

@@ -1,10 +1,10 @@
-"use client"
+import { Fragment } from "react"
 import { LogOut } from "react-feather"
-import Link from "../../TempDesignSystem/Link"
+import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./sidebar.module.css"
-import { SidebarProps } from "@/types/requests/myPages/navigation"
-import { Fragment } from "react"
+
+import type { SidebarProps } from "@/types/requests/myPages/navigation"
 
 export default function Sidebar({ menuItems }: SidebarProps) {
   return (
@@ -17,16 +17,16 @@ export default function Sidebar({ menuItems }: SidebarProps) {
             </Link>
             {item.subItems
               ? item.subItems.map((subItem) => {
-                  return (
-                    <Link
-                      key={subItem.uid}
-                      href={subItem.url}
-                      variant={"sidebar"}
-                    >
-                      {subItem.linkText}
-                    </Link>
-                  )
-                })
+                return (
+                  <Link
+                    key={subItem.uid}
+                    href={subItem.url}
+                    variant={"sidebar"}
+                  >
+                    {subItem.linkText}
+                  </Link>
+                )
+              })
               : null}
           </Fragment>
         ))}

components/MyPages/Sidebar/sidebar.module.css

@@ -2,7 +2,7 @@
   align-self: flex-start;
   display: none;
   position: sticky;
-  top: 13.2rem;
+  top: 14.6rem;
 }
 
 .nav {
@@ -13,33 +13,8 @@
   padding-left: 4rem;
 }
 
-.link {
-  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;
-  text-decoration: none;
-}
-
-.active {
-  font-weight: 600;
-}
-
-.active::before {
-  bottom: -0.4rem;
-  background-color: var(--some-text-color, #000);
-  content: "";
-  height: 0.2rem;
-  position: absolute;
-  width: 100%;
-}
-
 @media screen and (min-width: 950px) {
   .sidebar {
     display: block;
   }
-}
+}