jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Added icons on sidebar

Browse source
This commit is contained in:
Lucas Oliveira 2023-12-04 14:52:31 -03:00
commit f964420a5e
2 changed files with 8 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/frontend/src/components/sidebarComponent/index.tsx
View file

@ -6,17 +6,13 @@ interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
items: { items: {
href: string; href: string;
title: string; title: string;
}[]; Icon: React.FC<React.SVGProps<SVGSVGElement>>;
secondaryItems?: {
href: string;
title: string;
}[]; }[];
} }
export default function SidebarNav({ export default function SidebarNav({
className, className,
items, items,
secondaryItems,
...props ...props
}: SidebarNavProps) { }: SidebarNavProps) {
const location = useLocation(); const location = useLocation();
@ -37,27 +33,15 @@ export default function SidebarNav({
className={cn( className={cn(
buttonVariants({ variant: "ghost" }), buttonVariants({ variant: "ghost" }),
pathname === item.href pathname === item.href
? "border border-border bg-background hover:bg-background" ? "border border-border bg-muted hover:bg-muted"
: "hover:bg-transparent hover:underline", : "border border-transparent hover:border-border hover:bg-transparent",
"justify-start" "justify-start gap-2"
)} )}
> >
<item.Icon className="w-5 stroke-[1.5]" />
{item.title} {item.title}
</Link> </Link>
))} ))}
{/* {secondaryItems && (
<>
<div className="py-2">
<Separator />
</div>
<div className="flex justify-center">
<button className="flex h-8 w-fit items-center justify-between rounded-md border border-ring/60 px-4 py-2 text-sm text-primary hover:bg-muted">
<IconComponent name="FolderPlus" className="mr-2 h-4 w-4 " />
New Folder
</button>
</div>
</>
)} */}
</nav> </nav>
); );
} }

3
src/frontend/src/pages/MainPage/index.tsx
View file

@ -1,3 +1,4 @@
import { Group, ToyBrick } from "lucide-react";
import { useContext, useEffect } from "react"; import { useContext, useEffect } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom"; import { Outlet, useLocation, useNavigate } from "react-router-dom";
import DropdownButton from "../../components/DropdownButtonComponent"; import DropdownButton from "../../components/DropdownButtonComponent";
@ -44,10 +45,12 @@ export default function HomePage(): JSX.Element {
{ {
title: "Flows", title: "Flows",
href: "/flows", href: "/flows",
Icon: Group,
}, },
{ {
title: "Components", title: "Components",
href: "/components", href: "/components",
Icon: ToyBrick,
}, },
]; ];