Mobile breadcrumbs interactive (#199)

make mobile breadcrumbs interactive
webscopeio · Aug 8, 2023 · f3ef140 · f3ef140 · vercel · Aug 8, 2023
1 parent 8598662
commit f3ef140
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/docs/components/MobileDocsNav/MobileDocsNav.tsx b/src/docs/components/MobileDocsNav/MobileDocsNav.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect } from "react";
+import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
   Sheet,
@@ -42,9 +43,13 @@ export const MobileDocsNav = ({ items }: { items: DocItems }) => {
       </Sheet>
       {currentDocItem && (
         <p className="flex gap-3">
-          <span className="text-neutral-500">{currentDocItem.groupLabel}</span>
+          <Link href={currentDocItem.group.href} className="text-neutral-500">
+            {currentDocItem.group.label}
+          </Link>
           <span>{">"}</span>
-          <span className="font-semibold">{currentDocItem.itemLabel}</span>
+          <Link href={currentDocItem.item.href} className="font-semibold">
+            {currentDocItem.item.label}
+          </Link>
         </p>
       )}
     </nav>
@@ -56,9 +61,8 @@ function findCurrentItem(items: DocItems, pathname: string) {
     for (const item of group.items) {
       if (item.href === pathname) {
         return {
-          groupLabel: group.label,
-          itemLabel: item.label,
-          href: item.href,
+          group,
+          item,
         };
       }
     }

diff --git a/src/docs/constants/docsItems.ts b/src/docs/constants/docsItems.ts
@@ -4,6 +4,7 @@ import { templates } from "@templates";
 export type DocItems = DocItemGroup[];
 export type DocItemGroup = {
   label: string;
+  href: string;
   items: DocItem[];
 };
 export type DocItem = {
@@ -15,6 +16,7 @@ export type DocItem = {
 export const docsItems: DocItems = [
   {
     label: "Getting Started",
+    href: "/docs/installation",
     items: [
       {
         href: "/docs/installation",
@@ -25,6 +27,7 @@ export const docsItems: DocItems = [
   },
   {
     label: "Components",
+    href: "/docs/components",
     items: [
       {
         href: "/docs/components",
@@ -42,6 +45,7 @@ export const docsItems: DocItems = [
   },
   {
     label: "Templates",
+    href: "/docs/templates",
     items: templates.map((template) => ({
       href: `/docs/templates/${template.id}`,
       label: template.name,