feature: Nested lists (#110). Fixes #62

* feature: Add support for nested lists

* prevent moving the parent to a subtree

1 files changed, 17 insertions, 5 deletions

diff --git a/apps/web/components/dashboard/sidebar/SidebarItem.tsx b/apps/web/components/dashboard/sidebar/SidebarItem.tsx
index 7e5eb3bd..262fd9ae 100644
--- a/apps/web/components/dashboard/sidebar/SidebarItem.tsx
+++ b/apps/web/components/dashboard/sidebar/SidebarItem.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
@@ -9,25 +10,36 @@ export default function SidebarItem({
   logo,
   path,
   className,
+  style,
+  collapseButton,
+  right = null,
 }: {
   name: string;
   logo: React.ReactNode;
   path: string;
+  style?: React.CSSProperties;
   className?: string;
+  right?: React.ReactNode;
+  collapseButton?: React.ReactNode;
 }) {
   const currentPath = usePathname();
   return (
     <li
       className={cn(
-        "rounded-lg px-3 py-2 hover:bg-accent",
+        "relative rounded-lg px-3 py-2 hover:bg-accent",
         path == currentPath ? "bg-accent/50" : "",
         className,
       )}
+      style={style}
     >
-      <Link href={path} className="flex w-full gap-x-2">
-        {logo}
-        <span className="my-auto"> {name} </span>
-      </Link>
+      {collapseButton}
+      <div className="flex justify-between">
+        <Link href={path} className="flex w-full gap-x-2">
+          {logo}
+          <span className="my-auto"> {name} </span>
+        </Link>
+        {right}
+      </div>
     </li>
   );
 }