chore: merge with develop

frontend/.husky/pre-commit

@@ -1,4 +1,4 @@
 # hooks start from the project root directory
 cd frontend
 
-yarn lint:fix
+yarn lint:fix && yarn format

frontend/package.json

@@ -10,6 +10,7 @@
     "test": "echo \"tests\"",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
+    "format": "prettier 'src/**/*.{js,jsx,ts,tsx}' --write",
     "postinstall": "cd .. && husky frontend/.husky"
   },
   "dependencies": {

frontend/src/app/(app)/documentation/page.tsx

@@ -0,0 +1,7 @@
+export default function Documentation() {
+  return (
+    <div>
+      <h1 className="text-lg mb-10 font-semibold leading-6 text-navy-900">Documentation</h1>
+    </div>
+  );
+}

frontend/src/app/(app)/library/[ladder]/[bucket]/page.tsx

@@ -3,6 +3,7 @@ import { mapKeysToCamelCase } from '@app/utils';
 import { BucketDetails } from '@app/components/modules/BucketDetails';
 import { API_URLS } from '@app/api';
 import { Bucket, LadderBand } from '@app/types/common';
+import { routes } from '@app/constants';
 
 async function getBucketDetails(slug: string) {
   const response = await fetch(`${API_URLS.library.buckets}/${slug}`);
@@ -38,9 +39,9 @@ export default async function BucketDetailed({ params }: { params: { bucket: str
     <div>
       <Breadcrumbs
         breadcrumbs={[
-          { label: 'CPF Library', href: '/library', current: false },
-          { label: ladderName, href: `/library/${ladder}`, current: false },
-          { label: data.bucketName, href: `/library/${ladder}/${bucket}`, current: true },
+          { label: 'CPF Library', href: routes.library.index, current: false },
+          { label: ladderName, href: `${routes.library.index}/${ladder}`, current: false },
+          { label: data.bucketName, href: `${routes.library.index}/${ladder}/${bucket}`, current: true },
         ]}
       />
       {data && <BucketDetails data={data} />}

frontend/src/app/(app)/library/[ladder]/page.tsx

@@ -3,6 +3,7 @@ import { LibraryDetailed } from '@app/components/modules/LibraryDetailed';
 import { mapKeysToCamelCase } from '@app/utils';
 import { API_URLS } from '@app/api';
 import { LadderBand } from '@app/types/common';
+import { routes } from '@app/constants';
 
 async function getLadderDetails(slug: string) {
   const response = await fetch(`${API_URLS.library.ladders}/${slug}`);
@@ -25,11 +26,11 @@ export default async function LadderDetailed({ params }: { params: { ladder: str
     <div>
       <Breadcrumbs
         breadcrumbs={[
-          { label: 'CPF Library', href: '/library', current: false },
-          { label: data.ladderName, href: `/library/${params.ladder}`, current: true },
+          { label: 'CPF Library', href: routes.library.index, current: false },
+          { label: data.ladderName, href: `${routes.library.index}/${params.ladder}`, current: true },
         ]}
       />
-      {data && <LibraryDetailed data={data} />}
+      {data && <LibraryDetailed ladderSlug={params.ladder} data={data} />}
     </div>
   );
 }

frontend/src/app/(app)/my-space/page.tsx

@@ -0,0 +1,7 @@
+export default function MySpace() {
+  return (
+    <div>
+      <h1 className="text-lg mb-10 font-semibold leading-6 text-navy-900">My Space</h1>
+    </div>
+  );
+}

frontend/src/app/(app)/people/page.tsx

@@ -0,0 +1,7 @@
+export default function People() {
+  return (
+    <div>
+      <h1 className="text-lg mb-10 font-semibold leading-6 text-navy-900">People</h1>
+    </div>
+  );
+}

frontend/src/components/common/AccordionCard/AccordionCard.interface.ts

@@ -1,4 +1,5 @@
 export interface AccordionCardProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
   expandedByDefault?: boolean;
+  small?: boolean;
 }

frontend/src/components/common/AccordionCard/AccordionCard.tsx

@@ -8,6 +8,7 @@ export const AccordionCard = ({
   children,
   expandedByDefault,
   className,
+  small,
 }: PropsWithChildren<AccordionCardProps>) => {
   const [isOpen, setOpen] = useState(false);
 
@@ -32,7 +33,7 @@ export const AccordionCard = ({
           )}
           onClick={() => setOpen(!isOpen)}
         >
-          <span className="text-xl font-semibold text-navy-900">{title}</span>
+          <span className={`${small ? 'text-base' : 'text-xl'} font-semibold text-navy-900`}>{title}</span>
           {children ? (
             <div className="flex h-8 w-8 items-center justify-center rounded-full bg-navy-50">
               <ChevronRightIcon className={generateClassNames('rotate-90 text-navy-500', { '-rotate-90': isOpen })} />

frontend/src/components/common/BucketCard/BucketCard.interface.ts

@@ -1,5 +1,6 @@
 import { LadderBandBucket } from '@app/types/common';
 
 export interface BucketCardProps {
+  ladderSlug: string;
   bucket: LadderBandBucket;
 }

frontend/src/components/common/BucketCard/BucketCard.tsx

@@ -1,13 +1,14 @@
 import Link from 'next/link';
 import { BucketCardProps } from './BucketCard.interface';
 import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon';
+import { routes } from '@app/constants';
 
-export const BucketCard = ({ bucket }: BucketCardProps) => {
+export const BucketCard = ({ bucket, ladderSlug }: BucketCardProps) => {
   const { bucketSlug, bucketName, description } = bucket;
 
   return (
     <Link
-      href={`/library/backend/${bucketSlug}`}
+      href={`${routes.library.index}/${ladderSlug}/${bucketSlug}`}
       className="flex cursor-pointer flex-col gap-2 rounded-2xl border border-navy-200 bg-white p-6 hover:bg-navy-100"
     >
       <div className="flex justify-between">

frontend/src/components/common/LadderCard/LadderCard.tsx

@@ -1,11 +1,12 @@
 import Link from 'next/link';
 import { LadderCardInterface } from './LadderCard.interface';
+import { routes } from '@app/constants';
 
 export const LadderCard = ({ ladderName, ladderSlug }: LadderCardInterface) => (
   <Link
-    href={`/library/${ladderSlug}`}
+    href={`${routes.library.index}/${ladderSlug}`}
     className="flex h-44 cursor-pointer items-center justify-center rounded-2xl border border-navy-200 bg-white hover:bg-navy-100"
   >
-    <h2>{ladderName}</h2>
+    <h2 className="text-l text-navy-900">{ladderName}</h2>
   </Link>
 );

frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx

@@ -16,20 +16,22 @@ export const AdvancementLevel: React.FC<AdvancementLevelProps> = ({ showVertical
   return (
     <div className="flex flex-row">
       <div className="relative flex flex-col items-center">
-        <div
+        <button
           className="mb-2 mt-4 flex h-6 w-6 items-center justify-center rounded-full bg-blue-800 hover:opacity-50"
           onClick={toggleAccordionOpen}
         >
           <ChevronRightIcon className={`h-3.5 w-3.5 text-white ${!accordionOpen ? 'rotate-90' : '-rotate-90'}`} />
-        </div>
+        </button>
         {showVerticalLine && <div className="absolute left-3 top-12 h-[calc(100%-40px)] w-[1.5px] bg-blue-800" />}
       </div>
-      <div
-        className={`mb-4 ml-2 flex w-full flex-col gap-4 rounded-lg p-4 ${!accordionOpen && 'hover:bg-navy-50'}`}
-        onClick={accordionOpen ? undefined : toggleAccordionOpen}
-      >
-        <h3>Advancement level {advancementLevel}</h3>
-        <p className="text-base tracking-wide text-navy-600">{description}</p>
+      <div className="mb-4 ml-2 flex w-full flex-col gap-4">
+        <button
+          className={`flex w-full cursor-pointer flex-col gap-4 rounded-lg p-4 ${!accordionOpen && 'hover:bg-navy-50'}`}
+          onClick={toggleAccordionOpen}
+        >
+          <h3>Advancement level {advancementLevel}</h3>
+          <p className="text-base tracking-wide text-navy-600">{description}</p>
+        </button>
         {accordionOpen && (
           <>
             {projects.length > 0 && (
@@ -46,6 +48,7 @@ export const AdvancementLevel: React.FC<AdvancementLevelProps> = ({ showVertical
                 className="w-full"
                 title={category}
                 expandedByDefault={shouldBeExpandedByDefault}
+                small
               >
                 <AccordionList
                   items={skills.map(({ name, description }) => ({

frontend/src/components/modules/BucketDetails/BucketDetails.tsx

@@ -9,7 +9,7 @@ export const BucketDetails: React.FC<BucketDetailsProps> = ({ data }) => {
       <div className="mx-28 flex flex-col gap-8 rounded-2xl bg-white px-20 py-12">
         <div className="flex justify-between">
           <div className="flex flex-col gap-3">
-            <h2 className="text-xl font-semibold text-navy-900">{bucketName}</h2>
+            <h2 className="text-2xl font-semibold text-navy-900">{bucketName}</h2>
             <p className="text-base tracking-wide text-navy-600">{description}</p>
           </div>
         </div>

frontend/src/components/modules/LadderDetails/LadderDetails.interface.ts

@@ -2,6 +2,7 @@ import { LadderBand } from '@app/types/common';
 
 export interface LadderDetailsProps {
   ladder: LadderBand;
+  ladderSlug: string;
   ladderName: string;
   band: number;
 }

frontend/src/components/modules/LadderDetails/LadderDetails.tsx

@@ -6,7 +6,7 @@ import { BucketCard } from '@app/components/common/BucketCard';
 import { AccordionCard } from '@app/components/common/AccordionCard';
 import { AccordionList } from '@app/components/common/AccordionList';
 
-export const LadderDetails = ({ ladder, ladderName, band }: LadderDetailsProps) => {
+export const LadderDetails = ({ ladder, ladderName, band, ladderSlug }: LadderDetailsProps) => {
   return (
     <div className="flex flex-col gap-8 rounded-2xl bg-white px-20 py-12">
       <div className="flex justify-between">
@@ -33,15 +33,15 @@ export const LadderDetails = ({ ladder, ladderName, band }: LadderDetailsProps)
       <div className="flex flex-col gap-6">
         <p className="text-base tracking-wide text-navy-600">Buckets you need to complete to get on this band:</p>
         <div className="flex flex-col gap-4">
-          <p className="text-sm uppercase tracking-wide text-navy-600">Hard skills</p>
+          <p className="text-xs uppercase tracking-wide text-navy-600">Hard skills</p>
           <div className="flex flex-col gap-6">
             {ladder.hardSkillBuckets.map((bucket: LadderBandBucket) => (
-              <BucketCard bucket={bucket} key={bucket.bucketSlug} />
+              <BucketCard bucket={bucket} key={bucket.bucketSlug} ladderSlug={ladderSlug} />
             ))}
           </div>
         </div>
         <div className="flex flex-col gap-4">
-          <p className="text-sm uppercase tracking-wide text-navy-600">Soft skills</p>
+          <p className="text-xs uppercase tracking-wide text-navy-600">Soft skills</p>
           <div className="flex flex-col gap-6">
             <AccordionCard title="Time management">
               <div className="flex flex-col gap-6">

frontend/src/components/modules/LibraryDetailed/LibraryDetailed.interface.ts

@@ -1,6 +1,7 @@
 import { LadderBand } from '@app/types/common';
 
 export interface LibraryDetailedProps {
+  ladderSlug: string;
   data: {
     ladderName: string;
     bands: Record<string, LadderBand>;

frontend/src/components/modules/LibraryDetailed/LibraryDetailed.tsx

@@ -5,7 +5,7 @@ import { LadderTabs } from '@app/components/modules/LadderTabs';
 import { LibraryDetailedProps } from './LibraryDetailed.interface';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-export const LibraryDetailed: React.FC<LibraryDetailedProps> = ({ data }) => {
+export const LibraryDetailed: React.FC<LibraryDetailedProps> = ({ data, ladderSlug }) => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -41,7 +41,12 @@ export const LibraryDetailed: React.FC<LibraryDetailedProps> = ({ data }) => {
         <LadderTabs {...tabsProps} ladderOnClick={handleLadderChange} />
       </div>
       <div className="col-span-7">
-        <LadderDetails band={currentBand} ladder={data.bands[currentBand]} ladderName={data.ladderName} />
+        <LadderDetails
+          band={currentBand}
+          ladder={data.bands[currentBand]}
+          ladderName={data.ladderName}
+          ladderSlug={ladderSlug}
+        />
       </div>
     </section>
   );

frontend/src/components/modules/Sidebar/Sidebar.tsx

@@ -1,57 +1,58 @@
 'use client';
-import Image from 'next/image';
 import Link from 'next/link';
 import { generateClassNames } from '@app/utils';
-import { navigation } from './utils';
+import { navigation } from './constants';
 import { ChevronDoubleLeft } from '@app/static/icons/ChevronDoubleLeft';
 import { Button } from '@headlessui/react';
 import { useState } from 'react';
+import { usePathname } from 'next/navigation';
 
 const duration = 'duration-300' as const;
 
 export const Sidebar = () => {
   const [open, setOpen] = useState(true);
+  const pathname = usePathname();
 
   const toggleSidebar = () => setOpen((prev) => !prev);
 
   return (
     <nav
-      className={`z-50 h-screen ${open ? 'w-72' : 'w-16'} ${duration} flex flex-col border-r border-navy-200 bg-white px-3`}
+      className={`z-50 h-screen ${open ? 'w-72 px-3' : 'w-16 px-2'} ${duration} flex flex-col border-r border-navy-200 bg-white`}
     >
-      <div className="flex h-16 shrink-0 justify-between">
-        <div className={`${duration} flex ${open ? 'opacity-1' : 'opacity-0'}`}>
-          <Image
-            src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
-            alt="Logo"
-            width={32}
-            height={32}
-          />
+      <div className={`flex h-16 shrink-0 ${open ? 'justify-between' : 'justify-center'} mb-5 items-center`}>
+        <div
+          className={`${duration} flex ${open ? 'ml-3 w-[104px] text-base' : 'w-12 cursor-pointer text-xs'} h-11 items-center justify-center rounded-full border border-navy-900 font-semibold`}
+          onClick={open ? undefined : toggleSidebar}
+        >
+          CPF
         </div>
-        <Button onClick={toggleSidebar}>
-          <ChevronDoubleLeft className={`flex ${duration} ${open ? '' : 'mr-2 rotate-180'}`} />
-        </Button>
+        {open && (
+          <Button onClick={toggleSidebar}>
+            <ChevronDoubleLeft className={`flex ${duration}`} />
+          </Button>
+        )}
       </div>
-      <ul role="list" className="flex flex-1 flex-col gap-y-7">
-        <li>
-          <ul role="list" className="space-y-2">
-            {navigation.map((item) => (
-              <li key={item.name}>
-                <Link
-                  href={item.href}
-                  className={generateClassNames(
-                    'flex items-center whitespace-nowrap rounded-md p-2 font-medium text-navy-600 hover:bg-blue-100',
-                    { 'bg-blue-100 text-blue-900': item.current },
-                  )}
-                >
-                  <div className="flex items-center gap-x-3">
-                    <item.icon className="h-5 w-5" />
-                    <span className={`${duration} leading-6 ${open ? 'text-sm' : 'text-[0px]'}`}>{item.name}</span>
-                  </div>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </li>
+      <ul role="list" className="flex flex-1 flex-col space-y-2">
+        {navigation.map((item) => (
+          <li key={item.name} className={`flex w-full ${open ? 'justify-start' : 'justify-center'}`}>
+            <Link
+              href={item.href}
+              className={generateClassNames(
+                'flex items-center whitespace-nowrap rounded-md p-2 font-medium text-navy-600 hover:bg-blue-100',
+                {
+                  'bg-blue-100 text-blue-900': pathname.startsWith(item.href),
+                  'w-full': open,
+                  'w-10 justify-center': !open,
+                },
+              )}
+            >
+              <div className={`flex items-center ${open ? 'gap-x-3' : ''} `}>
+                <item.icon className="h-5 w-5" />
+                <span className={`${duration} leading-6 ${open ? 'text-sm' : 'text-[0px]'}`}>{item.name}</span>
+              </div>
+            </Link>
+          </li>
+        ))}
       </ul>
     </nav>
   );

frontend/src/components/modules/Sidebar/utils.ts → frontend/src/components/modules/Sidebar/constants.ts

@@ -2,25 +2,27 @@ import { HomeIcon } from '@app/static/icons/HomeIcon';
 import { PeopleIcon } from '@app/static/icons/PeopleIcon';
 import { LayoutIcon } from '@app/static/icons/LayoutIcon';
 import { DocumentIcon } from '@app/static/icons/DocumentIcon';
+import { routes } from '@app/constants';
 
 export const navigation = [
-  { name: 'My space', href: '#', current: false, icon: HomeIcon },
+  {
+    name: 'My space',
+    href: routes.mySpace.index,
+    icon: HomeIcon,
+  },
   {
     name: 'People',
-    href: '#',
-    current: false,
+    href: routes.people.index,
     icon: PeopleIcon,
   },
   {
     name: 'CPF Library',
-    href: '/library',
-    current: true,
+    href: routes.library.index,
     icon: LayoutIcon,
   },
   {
     name: 'Documentation',
-    href: '#',
-    current: false,
+    href: routes.documentation.index,
     icon: DocumentIcon,
   },
 ];

frontend/src/constants/index.ts

@@ -0,0 +1 @@
+export { routes } from './routes';