ForFarmTeam/ForFarm
1
0
Fork 0
mirror of https://github.com/ForFarmTeam/ForFarm.git synced 2025-12-19 14:04:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

ui: replace collapsible nav with clickable nav

Browse Source
This commit is contained in:
Sosokker 2025-03-07 03:14:26 +07:00
parent cc96dfae92
commit 54bc4c33a3
3 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/components/sidebar/app-sidebar.tsx
View File

@ -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 },

5
frontend/components/sidebar/nav-crops.tsx
View File

@ -4,6 +4,7 @@ import { LucideIcon } from "lucide-react";
import {
SidebarGroup,
SidebarGroupLabel,
SidebarGroupContent,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
@ -22,8 +23,9 @@ interface NavCropsProps {
export function NavCrops({ crops, title = "Crops" }: NavCropsProps) {
return (
<SidebarGroup className="group-data-[collapsible=icon]:hidden">
<SidebarGroup>
<SidebarGroupLabel>{title}</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{crops.map((crop) => (
<SidebarMenuItem key={crop.title}>
@ -36,6 +38,7 @@ export function NavCrops({ crops, title = "Crops" }: NavCropsProps) {
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
);
}

24
frontend/components/sidebar/nav-main.tsx
View File

@ -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>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<Collapsible key={item.title} asChild defaultOpen={item.isActive} className="group/collapsible">
<SidebarMenuItem>
<CollapsibleTrigger asChild>
<SidebarMenuButton tooltip={item.title}>
<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" />
</a>
</SidebarMenuButton>
</CollapsibleTrigger>
<CollapsibleContent>
{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>
</SidebarGroupContent>
</SidebarGroup>
);
}