【Drizzle ORM】NextJs14 と Drizzle ORM【#２２ Mobile Navbar】

【#２２ Mobile Navbar】

YouTube: https://youtu.be/oW9iQhe7714
https://youtu.be/oW9iQhe7714

今回はモバイル用のナビゲーションを作成していきます。

npx shadcn-ui@latest add sheet
npx shadcn-ui@latest add separator

components/navbar/index.tsx

import Link from "next/link";
import { Loader2 } from "lucide-react";
import {
  SignInButton,
  SignedIn,
  SignedOut,
  UserButton,
  ClerkLoading,
  ClerkLoaded,
} from "@clerk/nextjs";

import { Button } from "@/components/ui/button";

import { NavList } from "./nav-list";
import { MobileNavList } from "./mobile-nav-list";

const navItem = [
  { href: "/", label: "Home" },
  { href: "/profile", label: "Profile" },
  { href: "/text", label: "Test" },
];

export const Navbar = () => {
  return (
    <div className="w-full py-3 px-6">
      <div className="w-full max-w-screen-2xl mx-auto flex items-center justify-between">
        <Link href="/">
          <h1 className="text-2xl font-bold">My App</h1>
          <p className="text-sm font-semibold text-muted-foreground">
            Nextjs Hono Drizzle
          </p>
        </Link>
        <nav className="flex items-center gap-x-3">
          <div className="hidden lg:block">
            <NavList navItem={navItem} />
          </div>
          <ClerkLoading>
            <div className="flex items-center justify-center">
              <Loader2 className="size-7 animate-spin" />
            </div>
          </ClerkLoading>
          <ClerkLoaded>
            <SignedOut>
              <Button asChild>
                <SignInButton />
              </Button>
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
          </ClerkLoaded>
          <div className="block lg:hidden">
            <MobileNavList navItem={navItem} />
          </div>
        </nav>
      </div>
    </div>
  );
};

components/navbar/mobile-nav-list.tsx

import Link from "next/link";
import { Menu } from "lucide-react";

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Separator } from "../ui/separator";

type Props = {
  navItem: {
    href: string;
    label: string;
  }[];
};

export const MobileNavList = ({ navItem }: Props) => {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">
          <Menu className="size-4" />
        </Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>My App</SheetTitle>
          <SheetDescription>Menu</SheetDescription>
          <Separator className="my-4" />
          <ul className="flex flex-col items-center justify-center gap-y-2">
            <li>
              <Link href="/">Home</Link>
            </li>
          </ul>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  );
};

今回の動画ではリンクをクリックしても
シートのコンポートネントが表示されたままになっていますので
次回はこちらの点を改善しながら
リンクの作成を行っていきます。