Nav
Floating navigation bar.
Installation
bunx shadcn@latest add "https://c.drived.dev/r/tina/nav.json"
Steps
- Add global data query to your
components/layout.tsx
file.
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>
);
}
- create new Tina collection called
global
insidetina/collection/global.ts
. then, addnavBlockSchema
to the fields.
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;
- don't forget to add
Global
to schema object insidetina/config.ts
.
import Global from "./collection/global";
export default defineConfig({
//...
schema: {
collections: [Page, Global],
},
})
- go to
/admin
and create a new page calledindex.json
and add the required fields.