从零搭建基于 AI GitHub 分析平台 (4) 搭建Layout

搭建Layout框架

添加 src/app/(protected)/layout.tsx

import { SidebarProvider } from "@/components/ui/sidebar";
import { UserButton } from "@clerk/nextjs";
import React from "react";


type Props = {
  children: React.ReactNode
}

const SidebarLayout = ( {children} : Props ) => {
  return (
    <SidebarProvider>
      {/* <AppSiderbar /> */}
      <main className="w-full m-2">
        {/* top bar */}
        <div className="flex items-center gap-2 border-siderbar-border bg-sidebar border shadow rounded-md p-2 px-4">
          {/* <SearchBar /> */}
          <div className="ml-auto"></div>
          <UserButton />
        </div>
        <div className="h-4"></div>
        {/* main content */}
        <div className="border-sidebar-border bg-sidebar border shadow rounded-md overflow-y-auto h-[calc(100vh-6rem)] p-4">
          {children}
        </div>
      </main>
    </SidebarProvider>
  )
}

export default SidebarLayout;

运行后，可以看到以下界面：

添加菜单项目

修改 src/app/(protected)/AppSiderbar.tsx:

const items = [
  {
    title: "面板",
    url: "/dashboard",
    icon: LayoutDashboard,
  },
  {
    title: "常见问题",
    url: "/qa",
    icon: Bot,
  },
  {
    title: "会议",
    url: "/meeting",
    icon: Presentation,
  },
  {
    title: "账单",
    url: "/billing",
    icon: Bot,
  },
];

export function AppSiderbar() {
  const pathname = usePathname();
  return (
    <Sidebar collapsible="icon" variant="floating">
      <SidebarHeader>
        Logo
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>
            Application
          </SidebarGroupLabel>
          <SidebarGroupContent>
           <SidebarMenu>
            {items.map(item =>{
              return(
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton asChild>
                    <Link href={item.url} className={cn({
                      "!bg-primary !text-white": pathname === item.url
                    })}>
                      <item.icon />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              )
            })}
           </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  )
}

修改后，界面如下：

添加项目菜单

const projects = [
  {
    name: "Project 1",
  },  
  {
    name: "Project 2",
  },  
  {
    name: "Project 3",
  },,  
  {
    name: "Project 4",
  },
];

<SidebarGroup>
  <SidebarGroupLabel>
    项目
  </SidebarGroupLabel>
  <SidebarGroupContent>
   <SidebarMenu>
    {projects.map(project =>{
      return(
        <SidebarMenuItem key={project?.name}>
          <SidebarMenuButton asChild>
            <div>
              <div className={cn(
                "rounded-sm border size-6 flex items-center justify-center text-sm bg-white text-primary",
                { "bg-primary text-white" : true }
              )}>
                {project?.name[0]}
              </div>
              <span>{project?.name}</span>
            </div>
          </SidebarMenuButton>
        </SidebarMenuItem>
      )
    })}
   </SidebarMenu>
  </SidebarGroupContent>
</SidebarGroup>

修改后，界面如下：

添加 创建项目 按钮

{/* Create Project Button*/}
<SidebarMenuItem>
  <Link href="/create">
    <Button size="sm" variant={'outline'} className="w-fit ">
        <Plus />
        创建项目
    </Button>
  </Link>
</SidebarMenuItem>

---

作者：Bearalise
出处：从零搭建基于 AI GitHub 分析平台 (4) 搭建Layout
版权：本文版权归作者所有
转载：欢迎转载，但未经作者同意，必须保留此段声明，必须在文章中给出原文链接。