feat(WEB-250): overview hero final ui

components/MyPages/Sidebar/index.tsx

@@ -5,7 +5,7 @@ import { logout } from "@/constants/routes/handleAuth"
 import { serverClient } from "@/lib/trpc/server"
 
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/Title"
+import Title from "@/components/TempDesignSystem/Title"
 
 import styles from "./sidebar.module.css"
 
@@ -17,9 +17,7 @@ export default async function Sidebar({ lang }: LangParams) {
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
-        <Title level="h5" uppercase>
-          {navigation.title}
-        </Title>
+        <Title level="h5">{navigation.title}</Title>
         {navigation.items.map((item) => (
           <Fragment key={item.uid}>
             <Link

components/MyPages/Sidebar/sidebar.module.css

@@ -1,9 +1,10 @@
 .sidebar {
   align-self: flex-start;
   display: none;
+  padding-top: var(--Spacing-x3);
   position: sticky;
   /* Based on header and breadcrumbs height, and gap */
-  top: 14.6rem;
+  top: 7.1rem;
 }
 
 .nav {
@@ -14,7 +15,7 @@
   padding-left: 4rem;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .sidebar {
     display: block;
   }