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

Working on the focus color button on item menu sideBar.

Browse Source
This commit is contained in:
charles-gauthereau
2024-11-10 11:20:25 +01:00
parent 84030dcba0
commit 436f53850a
3 changed files with 66 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/Dashboard/LoggedInButton/LoggedInButton.tsx
-1
View File
@@ -1,4 +1,3 @@
import {Button} from "@/components/ui/button"
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"
import {currentUser} from "@/auth/current-user";
import {LoggedInDropdown} from "@/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown";
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 -92
View File
@@ -3,61 +3,19 @@ import {
SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu, SidebarMenuAction,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "@/components/ui/sidebar"
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
import {
Calendar,
ChartArea,
ChevronDown,
ChevronUp,
Home,
Inbox,
Search,
Settings,
ShieldHalf,
User2
ChevronDown
} from "lucide-react";
import Link from "next/link";
import {signOutAction} from "@/features/auth/auth.action";
import {UserAvatar} from "@/components/wrappers/Dashboard/UserAvatar/UserAvatar";
import {LoggedInDropdown} from "@/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown";
import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton";
import {Button, buttonVariants} from "@/components/ui/button"
import {cn} from "@/lib/utils";
import {SidebarMenuCustom} from "@/components/wrappers/Dashboard/SideBar/SideBarMenu/SideBarMenu";
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 (
<Sidebar collapsible="icon">
<SidebarHeader>
@@ -86,63 +44,17 @@ export function AppSidebar() {
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{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>
<SidebarMenuCustom/>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<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/>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
</Sidebar>
)
}