commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

feat: nav item dropdown animation implemented (#26534)

Browse Source 
* Nav Item dropdown animation Implemented

* minor issue resolved

* Dropdown

* fix: remove inert property from NavigationItem to resolve type check error

* add inert

* replace inert with visible/invisible class

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
Co-authored-by: Romit <85230081+romitg2@users.noreply.github.com>
Co-authored-by: Romit <romitgabani@icloud.com>
This commit is contained in:
Ram Shukla
2026-02-06 17:37:19 +05:30
committed by GitHub
co-authored by Devin AI Dhairyashil Shinde Romit Romit
parent 66fc0465bd
commit 08a5edd464
1 changed files with 40 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/modules/shell/navigation/NavigationItem.tsx
+40 -22
View File
@@ -171,9 +171,10 @@ export const NavigationItem: React.FC<{
aria-expanded={isExpanded}
aria-current={current ? "page" : undefined}
onClick={() => {
setIsExpanded(!isExpanded);
if (isTablet && hasChildren) {
setIsTooltipOpen(!isTooltipOpen);
} else {
setIsExpanded(!isExpanded);
}
}}
className={classNames(
@@ -274,11 +275,20 @@ export const NavigationItem: React.FC<{
</Link>
</Tooltip>
)}
{item.child &&
shouldShowChildren &&
item.child.map((item, index) => (
<NavigationItem index={index} key={item.name} item={item} isChild />
))}
{hasChildren && (
<div
className={classNames(
"grid transition-all duration-300 ease-in-out",
shouldShowChildren ? "grid-rows-[1fr] opacity-100 visible" : "grid-rows-[0fr] opacity-0 invisible"
)}
aria-hidden={!shouldShowChildren}>
<div className="overflow-hidden">
{item.child?.map((item, index) => (
<NavigationItem index={index} key={item.name} item={item} isChild />
))}
</div>
</div>
)}
</Fragment>
);
};
@@ -362,22 +372,30 @@ export const MobileNavigationMoreItem: React.FC<{
className="text-subtle h-5 w-5"
/>
</button>
{isExpanded && item.child && (
<ul className="bg-subtle">
{item.child.map((childItem) => (
<li key={childItem.name} className="border-subtle border-t">
<Link
href={childItem.href}
className="hover:bg-cal-muted flex items-center p-4 pl-12 transition"
>
<span className="text-default font-medium">
{isLocaleReady ? t(childItem.name) : <SkeletonText />}
</span>
</Link>
</li>
))}
</ul>
)}
<div
className={classNames(
"grid transition-all duration-300 ease-in-out",
isExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
)}>
<div className="overflow-hidden">
{item.child && (
<ul className="bg-subtle">
{item.child.map((childItem) => (
<li key={childItem.name} className="border-subtle border-t">
<Link
href={childItem.href}
className="hover:bg-cal-muted flex items-center p-4 pl-12 transition"
>
<span className="text-default font-medium">
{isLocaleReady ? t(childItem.name) : <SkeletonText />}
</span>
</Link>
</li>
))}
</ul>
)}
</div>
</div>
</>
) : (
<Link