diff --git a/src/frontend/src/components/sidebarComponent/index.tsx b/src/frontend/src/components/sidebarComponent/index.tsx index 153b80c45..02528228e 100644 --- a/src/frontend/src/components/sidebarComponent/index.tsx +++ b/src/frontend/src/components/sidebarComponent/index.tsx @@ -6,17 +6,13 @@ interface SidebarNavProps extends React.HTMLAttributes { items: { href: string; title: string; - }[]; - secondaryItems?: { - href: string; - title: string; + Icon: React.FC>; }[]; } export default function SidebarNav({ className, items, - secondaryItems, ...props }: SidebarNavProps) { const location = useLocation(); @@ -37,27 +33,15 @@ export default function SidebarNav({ className={cn( buttonVariants({ variant: "ghost" }), pathname === item.href - ? "border border-border bg-background hover:bg-background" - : "hover:bg-transparent hover:underline", - "justify-start" + ? "border border-border bg-muted hover:bg-muted" + : "border border-transparent hover:border-border hover:bg-transparent", + "justify-start gap-2" )} > + {item.title} ))} - {/* {secondaryItems && ( - <> -
- -
-
- -
- - )} */} ); } diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx index 04c45a7f4..659c5f456 100644 --- a/src/frontend/src/pages/MainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/index.tsx @@ -1,3 +1,4 @@ +import { Group, ToyBrick } from "lucide-react"; import { useContext, useEffect } from "react"; import { Outlet, useLocation, useNavigate } from "react-router-dom"; import DropdownButton from "../../components/DropdownButtonComponent"; @@ -44,10 +45,12 @@ export default function HomePage(): JSX.Element { { title: "Flows", href: "/flows", + Icon: Group, }, { title: "Components", href: "/components", + Icon: ToyBrick, }, ];