Nav

Floating navigation bar.

Installation

bunx shadcn@latest add "https://c.drived.dev/r/tina/nav.json"

Steps

  1. Add global data query to your components/layout.tsx file.
components/layout.tsx
import client from "@tina/__generated__/client";
import { Nav } from "@/components/nav";

//...

export default async function Layout({ children, rawPageData }: LayoutProps) {
  const { data: GlobalData } = await client.queries.global({
    relativePath: `index.json`,
  });

  return (
    <LayoutProvider pageData={rawPageData}>
      <Nav data={GlobalData.global} />
      <main className="overflow-x-hidden pt-20">{children}</main>
    </LayoutProvider>
  );
}
  1. create new Tina collection called global inside tina/collection/global.ts. then, add navBlockSchema to the fields.
tina/collection/global.ts
import { navBlockSchema } from "@/components/nav";
import { Collection } from "tinacms";

const Global: Collection = {
  label: "Global",
  name: "global",
  path: "content/global",
  format: "json",
  fields: [navBlockSchema],
};

export default Global;
  1. don't forget to add Global to schema object inside tina/config.ts.
tina/config.ts
  import Global from "./collection/global";

  export default defineConfig({

    //...
    schema: {
      collections: [Page, Global],
    },
  })
  1. go to /admin and create a new page called index.json and add the required fields.

On this page