Skip to content

fix(frontend): show submenu flyout and tooltip links when sidebar is collapsed (EVO-1048) #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
marcelogorutuba wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

fix(frontend): show submenu flyout and tooltip links when sidebar is collapsed (EVO-1048) #54

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
39b4023
fix(frontend): show submenu flyout and tooltip links when sidebar is …
marcelogorutuba May 11, 2026
355e2e6
fix(frontend): address code review findings for EVO-1048 collapsed si…
marcelogorutuba May 12, 2026
75c7246
fix(frontend): resolve all remaining review issues for EVO-1048 colla…
marcelogorutuba May 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/layout/MainLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export default function MainLayout({ children }: MainLayoutProps) {
/>

{/* Main Layout Container */}
<div className="flex flex-1 min-h-0 transition-colors duration-150 ease-in-out">
<div className="flex flex-1 min-h-0 relative transition-colors duration-150 ease-in-out">
{/* Sidebar */}
<Sidebar
isCollapsed={isCollapsed}
Expand Down
29 changes: 17 additions & 12 deletions src/components/layout/components/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,21 +69,26 @@ export default function MenuItem({
<TooltipTrigger asChild>
{menuItem}
</TooltipTrigger>
<TooltipContent side="right">
<div>
<p className="font-medium">{item.name}</p>
{hasSubItems && (
<div className="mt-1 space-y-1">
<TooltipContent side="right" className={cn(hasSubItems ? 'p-0 overflow-hidden' : '')}>
{hasSubItems ? (
<div className="min-w-[180px]">
<p className="font-semibold text-sm px-3 pt-2.5 pb-1.5 text-primary-foreground">{item.name}</p>
<div className="border-t border-primary-foreground/20">
{item.subItems?.map(subItem => (
<div key={subItem.href} className="flex items-center gap-2">
<p className="text-xs text-muted-foreground">
{subItem.name}
</p>
</div>
<Link
key={subItem.href}
to={subItem.href}
className="flex items-center gap-2.5 px-3 py-2 text-sm text-primary-foreground hover:bg-primary-foreground/15 transition-colors"
>
<subItem.icon className="h-4 w-4 flex-shrink-0 text-primary-foreground/70" />
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consider explicitly marking the icon as decorative for accessibility if it doesn't convey unique information.

If the icon is decorative and the text already conveys the meaning, ensure the icon component either sets aria-hidden="true" or supports a prop to do so to prevent redundant screen reader announcements.

Suggested change
<subItem.icon className="h-4 w-4 flex-shrink-0 text-primary-foreground/70" />
<subItem.icon
className="h-4 w-4 flex-shrink-0 text-primary-foreground/70"
aria-hidden="true"
/>

<span>{subItem.name}</span>
</Link>
))}
</div>
)}
</div>
</div>
) : (
<p className="font-medium">{item.name}</p>
)}
</TooltipContent>
</Tooltip>
);
Expand Down
13 changes: 11 additions & 2 deletions src/components/layout/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,17 @@ export default function Sidebar({
</div>

{/* Second Sidebar for Submenus */}
{activeSubmenu && !isCollapsed && (
<div className="hidden md:flex w-64 bg-sidebar text-sidebar-foreground flex-col border-r border-sidebar-border">
{activeSubmenu && isCollapsed && (
<div
className="hidden md:block absolute inset-0 z-40"
onClick={() => setActiveSubmenu(null)}
/>
)}
Comment thread
sourcery-ai[bot] marked this conversation as resolved.
Outdated
{activeSubmenu && (
<div className={cn(
'hidden md:flex w-64 bg-sidebar text-sidebar-foreground flex-col border-r border-sidebar-border',
isCollapsed && 'absolute left-16 top-0 h-full z-50 shadow-xl',
)}>
{/* Submenu Header */}
<div className="flex items-center gap-3 p-4 border-b border-sidebar-border">
<activeSubmenu.icon className="h-5 w-5 text-primary" />
Expand Down