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: [ navMain: [
{ title: "Farms", url: "/farms", icon: Map }, { title: "Farms", url: "/farms", icon: Map },
{ title: "Crops list", url: "/crops", icon: Frame },
{ title: "Inventory", url: "/inventory", icon: SquareTerminal }, { title: "Inventory", url: "/inventory", icon: SquareTerminal },
{ title: "Marketplace Information", url: "/marketplace", icon: PieChart }, { 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: "Users", url: "/users", icon: User },
{ title: "AI Chatbot", url: "/chatbot", icon: Bot }, { title: "AI Chatbot", url: "/chatbot", icon: Bot },
{ title: "Settings", url: "/settings", icon: Settings2 }, { title: "Settings", url: "/settings", icon: Settings2 },
], ],
// Define crops with dynamic URLs – replace [farmId] with your actual farm identifier as needed.
crops: [ crops: [
{ title: "Crops 1", url: "/farms/[farmId]/crops/1", icon: Map }, { title: "Crops 1", url: "/farms/[farmId]/crops/1", icon: Map },
{ title: "Crops 2", url: "/farms/[farmId]/crops/2", icon: Map }, { title: "Crops 2", url: "/farms/[farmId]/crops/2", icon: Map },

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

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

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

@ -1,11 +1,10 @@
"use client"; "use client";
import { ChevronRight, type LucideIcon } from "lucide-react"; import { type LucideIcon } from "lucide-react";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { import {
SidebarGroup, SidebarGroup,
SidebarGroupLabel, SidebarGroupLabel,
SidebarGroupContent,
SidebarMenu, SidebarMenu,
SidebarMenuButton, SidebarMenuButton,
SidebarMenuItem, SidebarMenuItem,
@ -31,20 +30,19 @@ export function NavMain({
return ( return (
<SidebarGroup> <SidebarGroup>
<SidebarGroupLabel>Platform</SidebarGroupLabel> <SidebarGroupLabel>Platform</SidebarGroupLabel>
<SidebarMenu> <SidebarGroupContent>
{items.map((item) => ( <SidebarMenu>
<Collapsible key={item.title} asChild defaultOpen={item.isActive} className="group/collapsible"> {items.map((item) => (
<SidebarMenuItem> <SidebarMenuItem key={item.title}>
<CollapsibleTrigger asChild> <SidebarMenuButton asChild isActive={item.isActive} tooltip={item.title}>
<SidebarMenuButton tooltip={item.title}> <a href={item.url}>
{item.icon && <item.icon />} {item.icon && <item.icon />}
<span>{item.title}</span> <span>{item.title}</span>
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" /> </a>
</SidebarMenuButton> </SidebarMenuButton>
</CollapsibleTrigger> {item.items && (
<CollapsibleContent>
<SidebarMenuSub> <SidebarMenuSub>
{item.items?.map((subItem) => ( {item.items.map((subItem) => (
<SidebarMenuSubItem key={subItem.title}> <SidebarMenuSubItem key={subItem.title}>
<SidebarMenuSubButton asChild> <SidebarMenuSubButton asChild>
<a href={subItem.url}> <a href={subItem.url}>
@ -54,11 +52,11 @@ export function NavMain({
</SidebarMenuSubItem> </SidebarMenuSubItem>
))} ))}
</SidebarMenuSub> </SidebarMenuSub>
</CollapsibleContent> )}
</SidebarMenuItem> </SidebarMenuItem>
</Collapsible> ))}
))} </SidebarMenu>
</SidebarMenu> </SidebarGroupContent>
</SidebarGroup> </SidebarGroup>
); );
} }