From 54bc4c33a3ed1be947110671560f159d70275931 Mon Sep 17 00:00:00 2001
From: Sosokker <sirinza29@gmail.com>
Date: Fri, 7 Mar 2025 03:14:26 +0700
Subject: [PATCH] ui: replace collapsible nav with clickable nav

---
 frontend/components/sidebar/app-sidebar.tsx |  4 +--
 frontend/components/sidebar/nav-crops.tsx   | 29 ++++++++++--------
 frontend/components/sidebar/nav-main.tsx    | 34 ++++++++++-----------
 3 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/frontend/components/sidebar/app-sidebar.tsx b/frontend/components/sidebar/app-sidebar.tsx
index c1a38cd..678b27f 100644
--- a/frontend/components/sidebar/app-sidebar.tsx
+++ b/frontend/components/sidebar/app-sidebar.tsx
@@ -56,15 +56,13 @@ export function AppSidebar({ config, ...props }: AppSidebarProps) {
     ],
     navMain: [
       { title: "Farms", url: "/farms", icon: Map },
-      { title: "Crops list", url: "/crops", icon: Frame },
       { title: "Inventory", url: "/inventory", icon: SquareTerminal },
       { title: "Marketplace Information", url: "/marketplace", icon: PieChart },
-      { title: "Knowledge Hub", url: "/knowledge", icon: BookOpen },
+      { title: "Knowledge Hub", url: "/hub", icon: BookOpen },
       { title: "Users", url: "/users", icon: User },
       { title: "AI Chatbot", url: "/chatbot", icon: Bot },
       { title: "Settings", url: "/settings", icon: Settings2 },
     ],
-    // Define crops with dynamic URLs – replace [farmId] with your actual farm identifier as needed.
     crops: [
       { title: "Crops 1", url: "/farms/[farmId]/crops/1", icon: Map },
       { title: "Crops 2", url: "/farms/[farmId]/crops/2", icon: Map },
diff --git a/frontend/components/sidebar/nav-crops.tsx b/frontend/components/sidebar/nav-crops.tsx
index 5bd9442..9106eb8 100644
--- a/frontend/components/sidebar/nav-crops.tsx
+++ b/frontend/components/sidebar/nav-crops.tsx
@@ -4,6 +4,7 @@ import { LucideIcon } from "lucide-react";
 import {
   SidebarGroup,
   SidebarGroupLabel,
+  SidebarGroupContent,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -22,20 +23,22 @@ interface NavCropsProps {
 
 export function NavCrops({ crops, title = "Crops" }: NavCropsProps) {
   return (
-    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+    <SidebarGroup>
       <SidebarGroupLabel>{title}</SidebarGroupLabel>
-      <SidebarMenu>
-        {crops.map((crop) => (
-          <SidebarMenuItem key={crop.title}>
-            <SidebarMenuButton asChild>
-              <a href={crop.url}>
-                <crop.icon />
-                <span>{crop.title}</span>
-              </a>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        ))}
-      </SidebarMenu>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {crops.map((crop) => (
+            <SidebarMenuItem key={crop.title}>
+              <SidebarMenuButton asChild>
+                <a href={crop.url}>
+                  <crop.icon />
+                  <span>{crop.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
     </SidebarGroup>
   );
 }
diff --git a/frontend/components/sidebar/nav-main.tsx b/frontend/components/sidebar/nav-main.tsx
index 20ace28..ebfc210 100644
--- a/frontend/components/sidebar/nav-main.tsx
+++ b/frontend/components/sidebar/nav-main.tsx
@@ -1,11 +1,10 @@
 "use client";
 
-import { ChevronRight, type LucideIcon } from "lucide-react";
-
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { type LucideIcon } from "lucide-react";
 import {
   SidebarGroup,
   SidebarGroupLabel,
+  SidebarGroupContent,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -31,20 +30,19 @@ export function NavMain({
   return (
     <SidebarGroup>
       <SidebarGroupLabel>Platform</SidebarGroupLabel>
-      <SidebarMenu>
-        {items.map((item) => (
-          <Collapsible key={item.title} asChild defaultOpen={item.isActive} className="group/collapsible">
-            <SidebarMenuItem>
-              <CollapsibleTrigger asChild>
-                <SidebarMenuButton tooltip={item.title}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton asChild isActive={item.isActive} tooltip={item.title}>
+                <a href={item.url}>
                   {item.icon && <item.icon />}
                   <span>{item.title}</span>
-                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                </SidebarMenuButton>
-              </CollapsibleTrigger>
-              <CollapsibleContent>
+                </a>
+              </SidebarMenuButton>
+              {item.items && (
                 <SidebarMenuSub>
-                  {item.items?.map((subItem) => (
+                  {item.items.map((subItem) => (
                     <SidebarMenuSubItem key={subItem.title}>
                       <SidebarMenuSubButton asChild>
                         <a href={subItem.url}>
@@ -54,11 +52,11 @@ export function NavMain({
                     </SidebarMenuSubItem>
                   ))}
                 </SidebarMenuSub>
-              </CollapsibleContent>
+              )}
             </SidebarMenuItem>
-          </Collapsible>
-        ))}
-      </SidebarMenu>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
     </SidebarGroup>
   );
 }