apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-06-06 19:35:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix sidebar nav tooltips

Browse source
This commit is contained in:
Ramnique Singh 2025-08-19 19:33:01 +05:30
parent 9bee30aade
commit 221d7f992b
1 changed files with 51 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

65
apps/rowboat/app/projects/layout/components/sidebar.tsx
View file

@ -102,31 +102,26 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
href: 'workflow', href: 'workflow',
label: 'Build', label: 'Build',
icon: WorkflowIcon, icon: WorkflowIcon,
requiresProject: true
}, },
{ {
href: 'job-rules', href: 'job-rules',
label: 'Triggers', label: 'Triggers',
icon: ZapIcon, icon: ZapIcon,
requiresProject: true
}, },
{ {
href: 'conversations', href: 'conversations',
label: 'Conversations', label: 'Conversations',
icon: MessageSquareIcon, icon: MessageSquareIcon,
requiresProject: true
}, },
{ {
href: 'jobs', href: 'jobs',
label: 'Jobs', label: 'Jobs',
icon: LogsIcon, icon: LogsIcon,
requiresProject: true
}, },
{ {
href: 'config', href: 'config',
label: 'Settings', label: 'Settings',
icon: SettingsIcon, icon: SettingsIcon,
requiresProject: true
} }
]; ];
@ -179,49 +174,65 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
const Icon = item.icon; const Icon = item.icon;
const fullPath = `/projects/${projectId}/${item.href}`; const fullPath = `/projects/${projectId}/${item.href}`;
const isActive = pathname.startsWith(fullPath); const isActive = pathname.startsWith(fullPath);
const isDisabled = isProjectsRoute && item.requiresProject;
return ( return <>
<Tooltip {collapsed && <Tooltip
key={item.href} key={item.href}
content={collapsed ? item.label : ""} content={collapsed ? item.label : ""}
showArrow showArrow
placement="right" placement="right"
> >
<Link <Link
href={isDisabled ? '#' : fullPath} href={fullPath}
className={` className={`
relative w-full rounded-md flex items-center relative w-full rounded-md flex items-center
text-[15px] font-medium transition-all duration-200 text-[15px] font-medium transition-all duration-200
${collapsed ? 'justify-center py-4' : 'px-2.5 py-3 gap-2.5'} px-2.5 py-3 gap-2.5
${isActive ${isActive
? 'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-l-2 border-indigo-600 dark:border-indigo-400' ? 'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-l-2 border-indigo-600 dark:border-indigo-400'
: isDisabled : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-zinc-300'
? 'text-zinc-300 dark:text-zinc-600 cursor-not-allowed'
: 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-zinc-300'
} }
${isDisabled ? 'pointer-events-none' : ''}
`} `}
data-tour-target={item.href === 'config' ? 'settings' : item.href === 'sources' ? 'entity-data-sources' : undefined} data-tour-target={item.href === 'config' ? 'settings' : item.href === 'sources' ? 'entity-data-sources' : undefined}
> >
<Icon <Icon
size={collapsed ? COLLAPSED_ICON_SIZE : EXPANDED_ICON_SIZE} size={COLLAPSED_ICON_SIZE}
className={` className={`
transition-all duration-200 transition-all duration-200
${isDisabled ${isActive
? 'text-zinc-300 dark:text-zinc-600' ? 'text-indigo-600 dark:text-indigo-400'
: isActive : 'text-zinc-500 dark:text-zinc-400'
? 'text-indigo-600 dark:text-indigo-400'
: 'text-zinc-500 dark:text-zinc-400'
} }
`} `}
/> />
{!collapsed && (
<span>{item.label}</span>
)}
</Link> </Link>
</Tooltip> </Tooltip>}
); {!collapsed && <Link
href={fullPath}
className={`
relative w-full rounded-md flex items-center
text-[15px] font-medium transition-all duration-200
px-2.5 py-3 gap-2.5
${isActive
? 'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-l-2 border-indigo-600 dark:border-indigo-400'
: 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800/50 hover:text-zinc-900 dark:hover:text-zinc-300'
}
`}
data-tour-target={item.href === 'config' ? 'settings' : item.href === 'sources' ? 'entity-data-sources' : undefined}
>
<Icon
size={EXPANDED_ICON_SIZE}
className={`
transition-all duration-200
${isActive
? 'text-indigo-600 dark:text-indigo-400'
: 'text-zinc-500 dark:text-zinc-400'
}
`}
/>
<span>{item.label}</span>
</Link>}
</>
}) })
)} )}
</nav> </nav>
@ -276,7 +287,7 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
text-zinc-600 dark:text-zinc-400 text-zinc-600 dark:text-zinc-400
`} `}
> >
{ theme == "light" ? <Moon size={COLLAPSED_ICON_SIZE} /> : <Sun size={COLLAPSED_ICON_SIZE} /> } {theme == "light" ? <Moon size={COLLAPSED_ICON_SIZE} /> : <Sun size={COLLAPSED_ICON_SIZE} />}
{!collapsed && <span>Appearance</span>} {!collapsed && <span>Appearance</span>}
</button> </button>
</Tooltip> </Tooltip>
@ -284,7 +295,7 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
{useAuth && <> {useAuth && <>
{collapsed && <Tooltip content="Account" showArrow placement="right"> {collapsed && <Tooltip content="Account" showArrow placement="right">
<UserButton useBilling={useBilling} collapsed={collapsed} /> <UserButton useBilling={useBilling} collapsed={collapsed} />
</Tooltip>} </Tooltip>}
{!collapsed && <UserButton useBilling={useBilling} collapsed={collapsed} />} {!collapsed && <UserButton useBilling={useBilling} collapsed={collapsed} />}
</>} </>}