Nesting components within SideNavMenuItem

[andrewrisse]

Hi, I have use case for embedding an OverflowMenu within a SideNavMenuItem. I've been struggling to override the CSS to allow the options from the overflow menu to be visible.

Here is the component:

<SideNav aria-label="Side navigation" isOpen={true}>
	{#each $page.data.conversations as conversation}
		<SideNavMenu text={conversation.category}>
			{#each conversation.chats as chat}
				<SideNavMenuItem isSelected={true}>
					<div class="menu-content">
						<div class="menu-text">
							{chat.messages[chat.messages.length - 1].message}
						</div>

						<OverflowMenu>
							<OverflowMenuItem text="Edit" />
							<OverflowMenuItem text="Delete" />
						</OverflowMenu>
					</div>
				</SideNavMenuItem>
			{/each}
		</SideNavMenu>
	{/each}
</SideNav>

<style lang="scss">
	.menu-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 208px;
		.menu-text {
			width: 192px;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		:global(.bx--overflow-menu) {
			width: 16px;
			height: 32px;
		}

	}

	:global(.bx--side-nav__link-text) {
		position: relative;
		display: flex;
		flex-grow: 1;
		justify-content: space-between;
	}

	:global(.bx--side-nav__navigation) {
		list-style: none;
	}
	:global(.bx--side-nav__divider) {
		height: 2px !important;
	}
</style>```


The menu items are not visible when you click on the OverflowMenu button.

I've experimented with absolute positioning and z-indexes, but no luck.

I haven't been able to find much info for overriding Carbon Svelte components, so any help would be greatly appreciated.

Would it be possible to add a named slot to this component to make it easier to nest custom sub-components?

Thank you!

[andrewrisse]

Not clicked:

Clicked: