顶部导航栏重叠侧边栏

Question

工具：

• next.js
• 顺风
• Shadcn

我正在构建一个导航，它具有粘性顶部栏（shadcn 导航菜单）和侧边栏（shadcn 侧边栏），应延伸到顶部导航栏的底部。 无论我如何调整layout.tsx中的变量，我都无法将侧边栏固定在顶部导航栏下方。

这是我的layout.tsx的当前版本：

import * as React from "react"
import { AppNavigation } from "@/components/ui/app-navigation"
import { SidebarProvider } from "@/components/ui/sidebar"
import { AppSidebar } from "@/components/ui/app-sidebar"
import { SidebarTrigger } from "@/components/ui/sidebar"
import "../globals.css";

export const metadata = {
  title: 'Next.js Application',
  description: 'A Next.js application with custom navigation',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="min-h-screen bg-background font-brand antialiased">
      <header className="sticky top-0 z-50 w-full h-[72px] border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-full items-center">
          <AppNavigation />
        </div>
      </header>

      <div className="flex min-h-screen">
        <SidebarProvider>
          {/* Fixed Sidebar */}
          <div className="fixed top-16 left-0 h-[calc(100vh-72px)] w-64">
            <AppSidebar />
          </div>

          <main className="flex-1 ml-64 overflow-y-auto p-6" style={{ marginTop: '72px' }}>
            <SidebarTrigger />
            {children}
          </main>
        </SidebarProvider>
      </div>
    </div>
  )
}

• Flex 容器 - 我尝试过将侧边栏和主要内容放在同一个容器内或不在同一个容器内
• 我使用顺风和非顺风方法来调整容器高度
• 我调整了弹性设置
• 调整了主要的边距

Answer 1

您希望侧边栏的

top

属性等于标题的高度。在这种情况下，它将是

72px

（还添加了背景颜色以便更清楚地看到它）：

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div class="min-h-screen bg-background font-brand antialiased">
  <header class="sticky top-0 z-50 w-full h-[72px] border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
    <div class="container flex h-full items-center">
      <AppNavigation>AppNavigation</AppNavigation>
    </div>
  </header>

  <div class="flex min-h-screen">
    <div class="fixed top-[72px] left-0 h-[calc(100vh-72px)] w-64 bg-red-500">
      <AppSidebar>AppSidebar</AppSidebar>
    </div>

    <main class="flex-1 ml-64 overflow-y-auto p-6" style={{ marginTop: '72px' }}>
      <SidebarTrigger>SidebarTrigger</SidebarTrigger>
      {children}
    </main>
  </div>
</div>