Assertion Failed When Dropdown Menu Is Opened

Hello,

I apologize if this isn't the appropriate place to ask, but I'm attempting to design a resizable sidebar layout utilizing the resizable components. Within the sidebar, there's a dropdown menu for user navigation. Occasionally, when the menu is open, it triggers an assertion failed error. Interestingly, this error doesn't occur consistently whenever the dropdown is accessed. Could it be due to the dropdown menu content overlapping both panels when open? (Refer to the attached screenshot.)

Screenshot 2024-04-19 at 12 15 22 PM

I really appreciate any help on this!

Stack: Next.js, shadcn/ui, Typescript Here is the code: layout.tsx

import React from "react";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { getServerAuthSession } from "@workspace/lib/next-auth/get-server-session";
import { NextAuthProvider } from "@/app/_providers/session-provider";
import { ResizeableLayout } from "@/components/layout/sidebar/resizable-layout";
import { LockScroll } from "@/components/lock-scroll";

interface MainLayoutProps {
  children: React.ReactNode;
}

export default async function MainLayout({ children }: MainLayoutProps) {
  const session = await getServerAuthSession();
  if (!session) {
    return redirect("/login");
  }
  const layout = cookies().get("react-resizable-panels:layout");
  const defaultLayout = layout ? JSON.parse(layout.value) : undefined;
  return (
    <NextAuthProvider session={session}>
      <ResizeableLayout defaultLayout={defaultLayout} user={session.user}>{children}</ResizeableLayout>
      <LockScroll />
    </NextAuthProvider>
  );
}

resizeable-layout.tsx

"use client";
import React from "react";
import type { User } from "next-auth";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@workspace/ui";
import { Sidebar } from "./sidebar";

interface ResizeableLayoutProps {
  children: React.ReactNode;
  defaultLayout?: number[];
  user: User;
}

export function ResizeableLayout({
  children,
  defaultLayout = [25, 75],
  user,
}: ResizeableLayoutProps) {
  const onLayout = (sizes: number[]) =>
    (document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`);
  return (
    <ResizablePanelGroup
      className="h-full items-stretch"
      direction="horizontal"
      onLayout={onLayout}
    >
      <ResizablePanel defaultSize={defaultLayout[0]} minSize={20} maxSize={25} order={1}>
        <Sidebar user={user} />
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={defaultLayout[1]} minSize={75} order={2}>
        <main className="flex h-screen">{children}</main>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

sidebar.tsx

"use client";

import React from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import type { User } from "next-auth";
import { cn } from "@/lib/utils";
import { UserButton } from "../user-button";

interface SidebarProps {
  user: User;
}

export function Sidebar({ user }: SidebarProps) {
  return (
    <aside className="bg-sidebar flex h-full flex-col">
      <div className="flex items-center justify-end">
        <UserButton user={user} />
      </div>
    </aside>
  );
}

bvaughn / react-resizable-panels

Assertion Failed When Dropdown Menu Is Opened #343

Coding Questions

Talk to other React developers