Dropdown Menu not working as expected when inside of SidebarContent

[javiervargas02]

Hi all,

I'm working on a dynamic sidebar. When the sidebar is expanded (on non-mobile devices) or on mobile, I want to render a Collapsible component, and that part is already working, no changes/help needed there.

The issue comes when the sidebar is collapsed on non-mobile devices. In that case, I want to render a DropdownMenu.

I'm building my sidebar on top of the sidebar-07 block. For now, I'm reusing the footer shown in that block with some minor tweaks, and it works fine. Ideally, I want the dropdown menus inside the SidebarContent to look like the dropdown menu in the SidebarFooter.

However, when I render these dropdown menus inside SidebarContent, none of the styles are applied to the DropdownMenuContent or its children.

In the code below, I'm using the dropdown menu implementation from sidebar-06 almost exactly as shown in the shadcn docs. I only changed some variables to display the correct data and updated the trigger to be an icon (since I'm using the collapsible prop set to icons on the main Sidebar component).

As you can see in the screenshot, the DropdownMenuTrigger renders as expected, but the DropdownMenuContent and its items don't have the correct styles:

For comparison, here's how the SidebarFooter > DropdownMenu looks (and this is the style I want to achieve):

import { DropdownMenu, DropdownMenuTrigger } from "../ui/dropdown-menu";

import {
  DropdownMenuContent,
  DropdownMenuItem,
} from "@radix-ui/react-dropdown-menu";

import {
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";

import type { Page } from "@/types/pages";
import { isPageItem, isGroupItem, type SidebarSection } from "@/types/sidebar";

import { Link } from "react-router";

import { useSite } from "@/hooks/useSite";
import { useIsMobile } from "@/hooks/useMobile";

import sidebarItems from "@/constants/sidebarItems";

export default function Content() {
  const isMobile = useIsMobile();
  
  const { dispatch, state } = useSite();
  const { page, isSidebarExpanded } = state;


  const handleClick = (page: Page) => {
    dispatch({ type: "SET_PAGE", payload: page });
  };

  const isGroupActive = (
    item: (typeof sidebarItems)[number]["items"][number]
  ) => {
    if (isGroupItem(item)) {
      return item.children.some((sub) => sub.page === page);
    }
    return false;
  };

  return (
    <SidebarContent>
      {sidebarItems.map((section: SidebarSection) => (
        <SidebarGroup key={section.sectionTitle}>
          <SidebarGroupLabel>{section.sectionTitle}</SidebarGroupLabel>
          <SidebarMenu>
            {section.items.map((item) => {
              if (isPageItem(item)) {
              }
              if (isGroupItem(item)) {
                const groupActive = isGroupActive(item);
                return isSidebarExpanded || isMobile ? (
                  <Collapsible >
                    <span>Rest of the Code</span>
                  </Collapsible>
                ) : (
                  <DropdownMenu key={item.title}>
                    <SidebarMenuItem>
                      <DropdownMenuTrigger asChild>
                        <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
                          <item.icon />
                        </SidebarMenuButton>
                      </DropdownMenuTrigger>
                      {item.children?.length ? (
                        <DropdownMenuContent
                          side="right"
                          align="start"
                          className="min-w-56 rounded-lg">
                          {item.children.map((item) => (
                            <DropdownMenuItem asChild key={item.path}>
                              <Link
                                onClick={() => handleClick(item.page)}
                                to={item.path}>
                                {item.page}
                              </Link>
                            </DropdownMenuItem>
                          ))}
                        </DropdownMenuContent>
                      ) : null}
                    </SidebarMenuItem>
                  </DropdownMenu>
                );
              }
              return null;
            })}
          </SidebarMenu>
        </SidebarGroup>
      ))}
    </SidebarContent>
  );
}