Merge pull request #47 from gabrielduete/feat/adjust-breadcrumb

feat: adjust breadcrumb
gabrielduete · Jun 19, 2024 · dcea3dd · dcea3dd
2 parents f263714 + 8010816
commit dcea3dd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/pages/contents/[id].page.tsx → pages/[id].page.tsx b/pages/contents/[id].page.tsx → pages/[id].page.tsx
diff --git a/src/layout/components/Header/Header.data.tsx b/src/layout/components/Header/Header.data.tsx
@@ -7,8 +7,4 @@ export const items = [
     name: 'About',
     href: '/about',
   },
-  {
-    name: 'Contents',
-    href: '/contents',
-  },
 ]
diff --git a/src/layout/components/NavBar/Desktop/index.tsx b/src/layout/components/NavBar/Desktop/index.tsx
@@ -21,9 +21,12 @@ const DesktopNavBar = () => {
     setIsOpen(!isOpen)
   }
 
-  const goToContent = (idPage: string) => {
-    setIdPage(idPage)
-    router.push(`/contents/${idPage}`)
+  const goToContent = (id: string, title: string) => {
+    const titleWithHyphens = title.replaceAll(' ', '-')
+
+    setIdPage(id)
+
+    router.push(titleWithHyphens)
   }
 
   const childPageBlocks = pages?.filter(
@@ -33,7 +36,10 @@ const DesktopNavBar = () => {
   const paths = childPageBlocks
     ?.map(({ id, child_page }) => {
       const title = child_page?.title
-      return { id, title }
+
+      // @NOTE: Disable eslint to use assertion, because typescript is not recognizing that title is not undefined
+      // eslint-disable-next-line
+      return { id, title: title! }
     })
     .filter(page => page.title !== undefined)
 
@@ -42,7 +48,7 @@ const DesktopNavBar = () => {
       <S.Wrapper showNavBar={isOpen}>
         <S.NavBar>
           {paths?.map(({ title, id }) => (
-            <S.Item key={title} onClick={() => goToContent(id)}>
+            <S.Item key={title} onClick={() => goToContent(id, title)}>
               <S.Link>{title}</S.Link>
             </S.Item>
           ))}