[FE][CPF-69] Sidebar navigation routing (#70)

* feat: sidebar navigation * linter * feat: add logo for collapsed sidebar * linter * fix: ts error * fix: typo * refactor: move routes to global constants * linter
Tivix · Jul 1, 2024 · 67c445c · 67c445c
1 parent c40db8b
commit 67c445c
Show file tree

Hide file tree

Showing 16 changed files with 107 additions and 55 deletions.
diff --git a/frontend/src/app/(app)/documentation/page.tsx b/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>
+  );
+}
diff --git a/frontend/src/app/(app)/library/[ladder]/[bucket]/page.tsx b/frontend/src/app/(app)/library/[ladder]/[bucket]/page.tsx
@@ -2,6 +2,7 @@ import { Breadcrumbs } from '@app/components/modules/Breadcrumbs';
 import { mapKeysToCamelCase } from '@app/utils';
 import { BucketDetails } from '@app/components/modules/BucketDetails';
 import { API_URLS } from '@app/api';
+import { routes } from '@app/constants';
 
 async function getBucketDetails(slug: string) {
   const response = await fetch(`${API_URLS.library.buckets}/${slug}`);
@@ -34,9 +35,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} />}

diff --git a/frontend/src/app/(app)/library/[ladder]/page.tsx b/frontend/src/app/(app)/library/[ladder]/page.tsx
@@ -2,6 +2,7 @@ import { Breadcrumbs } from '@app/components/modules/Breadcrumbs';
 import { LibraryDetailed } from '@app/components/modules/LibraryDetailed';
 import { mapKeysToCamelCase } from '@app/utils';
 import { API_URLS } from '@app/api';
+import { routes } from '@app/constants';
 
 async function getLadderDetails(slug: string) {
   const response = await fetch(`${API_URLS.library.ladders}/${slug}`);
@@ -21,11 +22,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>
   );
 }
diff --git a/frontend/src/app/(app)/my-space/page.tsx b/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>
+  );
+}
diff --git a/frontend/src/app/(app)/people/page.tsx b/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>
+  );
+}
diff --git a/frontend/src/components/common/BucketCard/BucketCard.interface.ts b/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;
 }
diff --git a/frontend/src/components/common/BucketCard/BucketCard.tsx b/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">

diff --git a/frontend/src/components/common/LadderCard/LadderCard.tsx b/frontend/src/components/common/LadderCard/LadderCard.tsx
@@ -1,9 +1,10 @@
 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 className="text-l text-navy-900">{ladderName}</h2>

diff --git a/frontend/src/components/modules/LadderDetails/LadderDetails.interface.ts b/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;
 }
diff --git a/frontend/src/components/modules/LadderDetails/LadderDetails.tsx b/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">
@@ -36,7 +36,7 @@ export const LadderDetails = ({ ladder, ladderName, band }: LadderDetailsProps)
           <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>

diff --git a/frontend/src/components/modules/LibraryDetailed/LibraryDetailed.interface.ts b/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>;

diff --git a/frontend/src/components/modules/LibraryDetailed/LibraryDetailed.tsx b/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>
   );

diff --git a/frontend/src/components/modules/Sidebar/Sidebar.tsx b/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>
   );

diff --git a/...d/src/components/modules/Sidebar/utils.ts → ...c/components/modules/Sidebar/constants.ts b/...d/src/components/modules/Sidebar/utils.ts → ...c/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,
   },
 ];
diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
@@ -0,0 +1 @@
+export { routes } from './routes';
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
@@ -0,0 +1,15 @@
+export const routes = {
+  documentation: {
+    index: '/documentation',
+  },
+  library: {
+    index: '/library',
+  },
+  mySpace: {
+    index: '/my-space',
+  },
+  people: {
+    index: '/people',
+    myProfile: '/people/my-profile',
+  },
+};