app cards with action menu and tooltips

components/nav-main.tsx

@@ -1,10 +1,5 @@
 "use client";
 
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
 import {
   SidebarGroup,
   SidebarGroupLabel,
@@ -12,6 +7,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar";
+import Link from "next/link";
 
 export function NavMain({
   items,
@@ -25,18 +21,24 @@ export function NavMain({
 }) {
   return (
     <SidebarGroup>
-      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarGroupLabel>Aperture</SidebarGroupLabel>
       <SidebarMenu>
         {items.map((item) => (
-          <SidebarMenuItem
-            key={item.title}
-            className="hover:bg-back hover:border-0"
-          >
-            <SidebarMenuButton tooltip={item.title}>
-              {item.icon}
-              <span>{item.title}</span>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
+          <Link href={item.url} key={item.title}>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                tooltip={item.title}
+                className={
+                  item.isActive
+                    ? "bg-emerald-500/20 hover:bg-emerald-500/30 text-emerald-900 data-[active=true]:bg-emerald-500/20"
+                    : ""
+                }
+              >
+                {item.icon}
+                <span>{item.title}</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </Link>
         ))}
       </SidebarMenu>
     </SidebarGroup>