add doulbe drop down item to nav bar

Author: joshbermanssw

content/global/index.json

@@ -8,9 +8,22 @@
     "logo": "/uploads/tinaDocsLogo.svg",
     "navObjects": [
       {
-        "href": "https://tina.io/tinadocs/docs",
-        "label": "Documentation",
-        "_template": "navLink"
+        "label": "Products",
+        "items": [
+          {
+            "labelLeft": "TinaCMS",
+            "hrefLeft": "/",
+            "labelRight": "Docs",
+            "hrefRight": "/docs"
+          },
+          {
+            "labelLeft": "TinaDocs",
+            "hrefLeft": "/tinadocs",
+            "labelRight": "Docs",
+            "hrefRight": "/tinadocs/docs"
+          }
+        ],
+        "_template": "doubleNavItemDropDown"
       },
       {
         "href": "/pricing",

src/components/layout/nav/header.tsx

@@ -10,6 +10,7 @@ import { ModalButton } from "../../ui/modalButton";
 import { DropdownButton } from "../../ui/dropdownButton";
 import { GitHubButton } from "../../ui/githubButton";
 import { SearchBar } from "../../ui/searchBar";
+import { DoubleItemDropDownButton } from "../../ui/doubleItemDropDownButton";
 
 const NavigationObjectRenderer = ({ navObject }: { navObject: any }) => {
   const template = navObject.__typename;
@@ -70,6 +71,8 @@ const NavigationObjectRenderer = ({ navObject }: { navObject: any }) => {
           </div>
         </>
       );
+    case "GlobalHeaderNavObjectsDoubleNavItemDropDown":
+      return <DoubleItemDropDownButton navObject={navObject} />;
 
     default:
       return <span className="text-red-500">Unknown template: {template}</span>;

src/components/ui/doubleItemDropDownButton.tsx

@@ -0,0 +1,46 @@
+import Link from "next/link";
+import { useState } from "react";
+import { BiChevronDown } from "react-icons/bi";
+
+export const DoubleItemDropDownButton = ({ navObject }: { navObject: any }) => {
+  if (!navObject || !navObject.label) {
+    return null;
+  }
+
+  return (
+    <li key={`$${navObject.label}`} className="group">
+      <div className="relative group">
+        <span className="flex items-center cursor-pointer text-neutral-text">
+          {navObject.label}
+          <BiChevronDown className="ml-1 w-3 h-3 transition-transform duration-200 group-hover:rotate-180" />
+        </span>
+        {navObject.items && navObject.items.length > 0 && (
+          <ul className="absolute left-0 top-full mt-2 w-48 bg-background border rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
+            <div className="py-2">
+              {navObject.items.map((subItem: any, subIndex: any) => (
+                <div
+                  key={`${subIndex}-${subItem?.hrefLeft || "no-href"}`}
+                  className="flex items-center gap-2 px-4 py-2"
+                >
+                  <Link
+                    className="text-muted-foreground hover:text-accent-foreground text-sm duration-150"
+                    href={subItem?.hrefLeft || "#"}
+                  >
+                    {subItem?.labelLeft || "No Label"}
+                  </Link>
+                  <span className="text-muted-foreground">•</span>
+                  <Link
+                    className="text-muted-foreground hover:text-accent-foreground text-sm duration-150"
+                    href={subItem?.hrefRight || "#"}
+                  >
+                    {subItem?.labelRight || "No Label"}
+                  </Link>
+                </div>
+              ))}
+            </div>
+          </ul>
+        )}
+      </div>
+    </li>
+  );
+};

tina/collection/global.ts

@@ -3,6 +3,60 @@ import { ColorPickerInput } from "../fields/color";
 import { iconSchema } from "../fields/icon";
 import { buttonVariantsArray } from "@/src/components/ui/button";
 
+const navDoubleLinkDropdown = 
+{
+  name: 'doubleNavItemDropDown',
+  label: 'Double Nav Item Dropdown',
+  type: 'object',
+  ui: {
+    itemProps: (item: any) => {
+      return { label: `🥈 ${item?.label}` };
+    },
+  },
+  fields: [
+    {
+      name: 'label',
+      label: 'Label',
+      type: 'string',
+    },
+    {
+      name: 'items',
+      label: 'Item',
+      type: 'object',
+      list: true,
+      ui: {
+        itemProps: (item: any) => {
+          return {
+            label: `🥈 ${item?.labelLeft} | ${item?.labelRight}`,
+          };
+        },
+      },
+      fields: [
+        {
+          name: 'labelLeft',
+          label: 'Label Left',
+          type: 'string',
+        },
+        {
+          name: 'hrefLeft',
+          label: 'href Left',
+          type: 'string',
+        },
+        {
+          name: 'labelRight',
+          label: 'Label Right',
+          type: 'string',
+        },
+        {
+          name: 'hrefRight',
+          label: 'href Right',
+          type: 'string',
+        },
+      ],
+    },
+  ],
+}
+
 const navLink = {
   name: "navLink",
   label: "Nav Link",
@@ -152,6 +206,7 @@ const Global: Collection = {
             githubButton,
             ctaButton,
             demoModalButton,
+            navDoubleLinkDropdown,
           ],
         },
       ],