【Convex】NextJs14 と Convex【#１０ Organization Switcher】

【#１０Organization Switcher】

YouTube: https://youtu.be/0sYadVSmfcs

https://youtu.be/0sYadVSmfcs

今回はClerkのOrganizationSwitcherを実装します。

app/(main)/layout.tsx

import { Navbar } from "./_components/navbar";
import { Sidebar } from "./_components/sidebar";

interface Props {
  children: React.ReactNode;
}

const MainLayout = ({ children }: Props) => {
  return (
    <div className="w-full h-full">
      <Sidebar />
      <div className="pl-[60px] overflow-hidden">
        <Navbar />
        {children}
      </div>
    </div>
  );
};

export default MainLayout;

app/(main)/_components/navbar.tsx

"use client";

import Link from "next/link";

import { UserButton } from "@clerk/nextjs";
import { OrgSwitcher } from "./org-switcher";

export const Navbar = () => {
  return (
    <nav className="flex items-center justify-between px-4 py-2 border-b border-slate-200">
      <Link href="/" className="hidden lg:block">
        <div className="flex flex-col justify-center">
          <h1 className="text-2xl font-bold">My App</h1>
          <p className="text-sm text-muted-foreground">convex nextjs app</p>
        </div>
      </Link>
      <div className="flex items-center justify-between gap-x-4">
        <OrgSwitcher />
        <UserButton />
      </div>
    </nav>
  );
};

app/(main)/_components/org-switcher.tsx

import { OrganizationSwitcher } from "@clerk/nextjs";

export const OrgSwitcher = () => {
  return (
    <div className="w-full flex items-center justify-between gap-x-2">
      <OrganizationSwitcher
        hidePersonal
        appearance={{
          elements: {
            rootBox: {
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              width: "100%",
              maxWidth: "380px",
            },
            organizationSwitcherTrigger: {
              padding: "6px",
              width: "100%",
              borderRadius: "8px",
              justifyContent: "center",
              backgroundColor: "#fff",
              "&:hover": {
                backgroundColor: "#fff",
              },
            },
          },
        }}
      />
      <div>invite button</div>
    </div>
  );
};