External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main'

Browse Source 
# Conflicts:
#	src/components/wrappers/Dashboard/SideBar/app-sidebar.tsx
This commit is contained in:
killian-larcher
2024-11-10 23:13:51 +01:00
parent c76727f0d1 436f53850a
commit cd1a913d16
2 changed files with 66 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/Dashboard/SideBar/SideBarMenu/SideBarMenu.tsx
+62
View File
@@ -0,0 +1,62 @@
"use client"
import {SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem} from "@/components/ui/sidebar";
import Link from "next/link";
import {cn} from "@/lib/utils";
import {buttonVariants} from "@/components/ui/button";
import {PropsWithChildren, useState} from "react";
import {ChartArea, Home, Settings, ShieldHalf} from "lucide-react";
export type SidebarMenuCustomProps = {}
export const SidebarMenuCustom = (props: SidebarMenuCustomProps) => {
const BASE_URL = "/dashboard";
// Menu items.
const items = [
{
title: "Home",
url: "/",
icon: Home,
},
{
title: "Agents",
url: "agents",
icon: ShieldHalf,
},
{
title: "Statistic",
url: "kpi",
icon: ChartArea,
},
{
title: "Settings",
url: "settings",
icon: Settings,
},
]
const [activeItem, setActiveItem] = useState(items[0].title);
const handleItemClick = (title: string) => {
setActiveItem(title);
console.log(title)
}
return(
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild >
<Link
className={cn(buttonVariants({size: "lg", variant: activeItem === item.title ? "secondary" : 'ghost'}), "justify-start p-0")}
href={`${BASE_URL}/${item.url}`}
onClick={() => handleItemClick(item.title)}
>
<item.icon/>
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
<SidebarMenuAction className={`peer-data-[active=true]/menu-button:opacity-100 ${activeItem === item.title ? 'active' : ''}`}/>
</SidebarMenuItem>
))}
</SidebarMenu>
)
}
src/components/wrappers/Dashboard/SideBar/app-sidebar.tsx
+4 -88
View File
@@ -3,54 +3,19 @@ import {
SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent,
SidebarGroupLabel, SidebarGroupLabel,
SidebarHeader, SidebarHeader,
SidebarMenu, SidebarMenuAction, SidebarMenu,
SidebarMenuButton, SidebarMenuButton,
SidebarMenuItem, SidebarMenuItem,
} from "@/components/ui/sidebar" } from "@/components/ui/sidebar"
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu"; import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
import { import {
ChartArea, ChevronDown
ChevronDown,
Home,
Settings,
ShieldHalf,
} from "lucide-react"; } from "lucide-react";
import Link from "next/link";
import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton"; import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton";
import {buttonVariants} from "@/components/ui/button" import {SidebarMenuCustom} from "@/components/wrappers/Dashboard/SideBar/SideBarMenu/SideBarMenu";
import {cn} from "@/lib/utils";
export function AppSidebar() { export function AppSidebar() {
const BASE_URL = "/dashboard";
// Menu items.
const items = [
{
title: "Home",
url: "/",
icon: Home,
},
{
title: "Agents",
url: "agents",
icon: ShieldHalf,
},
{
title: "Statistic",
url: "kpi",
icon: ChartArea,
},
{
title: "Settings",
url: "settings",
icon: Settings,
},
]
return ( return (
<Sidebar collapsible="icon"> <Sidebar collapsible="icon">
<SidebarHeader> <SidebarHeader>
@@ -79,66 +44,17 @@ export function AppSidebar() {
<SidebarGroup> <SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel> <SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent> <SidebarGroupContent>
<SidebarMenu> <SidebarMenuCustom/>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<Link
className={cn(buttonVariants({
size: "lg",
variant: "ghost"
}), "justify-start p-0")}
href={`${BASE_URL}/${item.url}`}>
<item.icon/>
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
<SidebarMenuAction className="peer-data-[active=true]/menu-button:opacity-100"/>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent> </SidebarGroupContent>
</SidebarGroup> </SidebarGroup>
</SidebarContent> </SidebarContent>
<SidebarFooter> <SidebarFooter>
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>
{/*<DropdownMenu>*/}
{/* <DropdownMenuTrigger asChild>*/}
{/* <SidebarMenuButton>*/}
{/* <UserAvatar/>*/}
{/* <User2 /> Username*/}
{/* <ChevronUp className="ml-auto" />*/}
{/* </SidebarMenuButton>*/}
{/* </DropdownMenuTrigger>*/}
{/* <DropdownMenuContent*/}
{/* side="top"*/}
{/* className="w-[--radix-popper-anchor-width]"*/}
{/* >*/}
{/* <DropdownMenuItem>*/}
{/* <span>Account</span>*/}
{/* </DropdownMenuItem>*/}
{/* <DropdownMenuItem>*/}
{/* <span>Billing</span>*/}
{/* </DropdownMenuItem>*/}
{/* /!*<DropdownMenuItem onClick={() => {*!/*/}
{/* /!* signOutAction()*!/*/}
{/* /!*}}>*!/*/}
{/* /!* <span>Sign out</span>*!/*/}
{/* /!*</DropdownMenuItem>*!/*/}
{/* </DropdownMenuContent>*/}
{/*</DropdownMenu>*/}
<LoggedInButton/> <LoggedInButton/>
</SidebarMenuItem> </SidebarMenuItem>
</SidebarMenu> </SidebarMenu>
</SidebarFooter> </SidebarFooter>
</Sidebar> </Sidebar>
) )
} }