bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix some UI issues 2

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-09-24 21:54:49 +02:00
parent d59b92a1b4
commit dc6c6f213f
16 changed files with 1036 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/components/layout/Sidebar/Sidebar.tsx
View File

@@ -515,12 +515,15 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
level > 0 && 'pl-6',
)}
>
<div className="relative">
<div className={clsx(
'relative',
isCollapsed && level === 0 && 'flex items-center justify-center'
)}>
{ItemIcon && (
<ItemIcon
className={clsx(
'flex-shrink-0 transition-colors duration-200',
isCollapsed && level === 0 ? 'w-5 h-5' : 'w-4 h-4 mr-3',
isCollapsed && level === 0 ? 'w-4 h-4' : 'w-4 h-4 mr-3',
isActive
? 'text-[var(--color-primary)]'
: 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
@@ -529,7 +532,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
)}
{/* Submenu indicator for collapsed sidebar */}
{isCollapsed && hasChildren && level === 0 && (
{isCollapsed && hasChildren && level === 0 && item.children && item.children.length > 0 && (
<div className="absolute -bottom-1 -right-1 w-2 h-2 bg-[var(--color-primary)] rounded-full opacity-75" />
)}
</div>
@@ -585,12 +588,12 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
disabled={item.disabled}
data-path={item.path}
onMouseEnter={() => {
if (isCollapsed && hasChildren && level === 0) {
if (isCollapsed && hasChildren && level === 0 && item.children && item.children.length > 0) {
setHoveredItem(item.id);
}
}}
onMouseLeave={() => {
if (isCollapsed && hasChildren && level === 0) {
if (isCollapsed && hasChildren && level === 0 && item.children && item.children.length > 0) {
setHoveredItem(null);
}
}}
@@ -600,7 +603,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
isActive && 'bg-[var(--color-primary)]/10 border-l-2 border-[var(--color-primary)]',
!isActive && 'hover:bg-[var(--bg-secondary)]',
item.disabled && 'opacity-50 cursor-not-allowed',
isCollapsed && level === 0 ? 'flex justify-center items-center p-3 aspect-square' : 'p-3'
isCollapsed && level === 0 ? 'flex justify-center items-center p-2 h-10 w-10 min-w-10 max-w-10' : 'p-3'
)}
aria-expanded={hasChildren ? isExpanded : undefined}
aria-current={isActive ? 'page' : undefined}
@@ -610,8 +613,8 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
</button>
{/* Submenu overlay for collapsed sidebar */}
{isCollapsed && hasChildren && level === 0 && isHovered && (
<div
{isCollapsed && hasChildren && level === 0 && isHovered && item.children && item.children.length > 0 && (
<div
className="absolute left-full top-0 ml-2 z-[var(--z-popover)]"
onMouseEnter={() => setHoveredItem(item.id)}
onMouseLeave={() => setHoveredItem(null)}
@@ -710,22 +713,22 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
)}
{/* Navigation */}
<nav className={clsx('flex-1 overflow-y-auto', isCollapsed ? 'px-2 py-4' : 'p-4')}>
<ul className={clsx(isCollapsed ? 'space-y-2' : 'space-y-2')}>
<nav className={clsx('flex-1 overflow-y-auto overflow-x-hidden', isCollapsed ? 'px-1 py-4' : 'p-4')}>
<ul className={clsx(isCollapsed ? 'space-y-1 flex flex-col items-center' : 'space-y-2')}>
{visibleItems.map(item => renderItem(item))}
</ul>
</nav>
{/* Profile section */}
{user && (
<div className="border-t border-[var(--border-primary)]">
<div className={clsx('border-t border-[var(--border-primary)]', isCollapsed && 'p-1 flex justify-center')}>
<div className="relative" data-profile-menu>
<button
onClick={handleProfileMenuToggle}
className={clsx(
'w-full flex items-center transition-all duration-200',
'hover:bg-[var(--bg-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20',
isCollapsed ? 'justify-center p-3' : 'p-4 gap-3',
isCollapsed ? 'justify-center p-2 h-10 w-10 mx-auto rounded-lg' : 'p-4 gap-3',
isProfileMenuOpen && 'bg-[var(--bg-secondary)]'
)}
aria-label="Menú de perfil"
@@ -733,9 +736,9 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
aria-haspopup="true"
>
<Avatar
src={user.avatar}
alt={user.name}
name={user.name}
src={user.avatar || undefined}
alt={user.full_name || 'Usuario'}
name={user.avatar ? user.full_name : undefined}
size={isCollapsed ? "sm" : "md"}
className="flex-shrink-0"
/>
@@ -802,14 +805,14 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
{/* Collapse button */}
{showCollapseButton && (
<div className={clsx('border-t border-[var(--border-primary)]', isCollapsed ? 'p-2' : 'p-4')}>
<div className={clsx('border-t border-[var(--border-primary)]', isCollapsed ? 'p-1 flex justify-center' : 'p-4')}>
<Button
variant="ghost"
size="sm"
onClick={onToggleCollapse}
className={clsx(
'w-full flex items-center transition-colors duration-200',
isCollapsed ? 'justify-center p-3 aspect-square' : 'justify-start px-4 py-2'
'flex items-center transition-colors duration-200',
isCollapsed ? 'justify-center h-10 w-10 p-2 rounded-lg' : 'w-full justify-start px-4 py-2'
)}
aria-label={isCollapsed ? t('common:actions.expand', 'Expand sidebar') : t('common:actions.collapse', 'Collapse sidebar')}
>
@@ -932,9 +935,9 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
aria-haspopup="true"
>
<Avatar
src={user.avatar}
alt={user.name}
name={user.name}
src={user.avatar || undefined}
alt={user.full_name || 'Usuario'}
name={user.avatar ? user.full_name : undefined}
size="md"
className="flex-shrink-0"
/>