zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor sidebar navigation menu item rendering and styling (#150)

Browse Source 
- Improve sidebar menu item layout and responsiveness
- Extract and optimize classNames for link and span elements
- Remove conditional rendering of `renderAction`
- Enhance dynamic styling for collapsed and expanded sidebar states
This commit is contained in:
Giancarlo Buomprisco
2025-02-06 10:00:00 +07:00
committed by GitHub
parent 08d5b16123
commit 97e4bc9bad
1 changed files with 19 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/ui/src/shadcn/sidebar.tsx
View File

@@ -526,7 +526,7 @@ const SidebarMenuItem: React.FC<React.ComponentProps<'li'>> = ({
<li
data-sidebar="menu-item"
className={cn(
'group/menu-item relative flex group-data-[collapsible=icon]:justify-center',
'group/menu-item relative group-data-[collapsible=icon]:justify-center',
className,
)}
{...props}
@@ -940,22 +940,27 @@ export function SidebarNavigation({
})}
>
{children.map((child) => {
if (child.renderAction) {
return (
<SidebarMenuSubItem
key={child.path}
>
{child.renderAction}
</SidebarMenuSubItem>
);
}
const isActive = isRouteActive(
child.path,
currentPath,
child.end,
);
const linkClassName = cn(
'flex items-center',
{
'mx-auto w-full gap-0! [&>svg]:flex-1':
!open,
},
);
const spanClassName = cn(
'w-auto transition-opacity duration-300',
{
'w-0 opacity-0': !open,
},
);
return (
<SidebarMenuSubItem key={child.path}>
<SidebarMenuSubButton
@@ -963,24 +968,12 @@ export function SidebarNavigation({
asChild
>
<Link
className={cn(
'flex items-center',
{
'mx-auto w-full gap-0! [&>svg]:flex-1':
!open,
},
)}
className={linkClassName}
href={child.path}
>
{child.Icon}
<span
className={cn(
'w-auto transition-opacity duration-300',
{
'w-0 opacity-0': !open,
},
)}
>
<span className={spanClassName}>
<Trans
i18nKey={child.label}
defaults={child.label}