mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-23 19:05:16 +02:00
feat: add CollapsedInboxIcon component to enhance sidebar functionality
This commit is contained in:
parent
75b7a9cc6c
commit
bd5f1b3cdf
1 changed files with 17 additions and 0 deletions
|
|
@ -31,6 +31,21 @@ function ChatListItemSkeleton() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function CollapsedInboxIcon({ item }: { item: NavItem }) {
|
||||||
|
const Icon = item.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className="relative flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<Icon className="h-3.5 w-3.5" />
|
||||||
|
{typeof item.badge === "string" ? (
|
||||||
|
<span className="absolute right-0 top-0 flex min-w-3.5 -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full bg-destructive px-1 text-[9px] font-medium leading-3 text-destructive-foreground">
|
||||||
|
{item.badge}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
interface SidebarProps {
|
interface SidebarProps {
|
||||||
searchSpace: SearchSpace | null;
|
searchSpace: SearchSpace | null;
|
||||||
isCollapsed?: boolean;
|
isCollapsed?: boolean;
|
||||||
|
|
@ -164,6 +179,8 @@ export function Sidebar({
|
||||||
isCollapsed={isCollapsed}
|
isCollapsed={isCollapsed}
|
||||||
isActive={inboxItem.isActive}
|
isActive={inboxItem.isActive}
|
||||||
badge={inboxItem.badge}
|
badge={inboxItem.badge}
|
||||||
|
collapsedIconNode={<CollapsedInboxIcon item={inboxItem} />}
|
||||||
|
tooltipContent={isCollapsed ? inboxItem.title : undefined}
|
||||||
buttonProps={
|
buttonProps={
|
||||||
{
|
{
|
||||||
"data-joyride": "inbox-sidebar",
|
"data-joyride": "inbox-sidebar",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue