92 lines
4.0 KiB
TypeScript
92 lines
4.0 KiB
TypeScript
"use client"
|
|
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
|
|
import { Sidebar, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"
|
|
import { ChevronDown, DollarSign, LayoutDashboard } from "lucide-react"
|
|
import mainLogo from "@/images/Telkomcel.png"
|
|
import Image from "next/image"
|
|
import QueryWrapper from "@/components/module/query-wrapper"
|
|
import Link from "next/link"
|
|
import { useMenuPricePlan } from "../../view-model/sidebar-view-model"
|
|
import { useEffect } from "react"
|
|
import pricePlanStore from "../../store"
|
|
|
|
const Content = () => {
|
|
const vm = useMenuPricePlan()
|
|
|
|
const resetState = pricePlanStore.reset
|
|
|
|
const onClickMenu = (id: string) => {
|
|
pricePlanStore.setType(id)
|
|
pricePlanStore.setCurrentPage(0)
|
|
}
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
resetState()
|
|
}
|
|
}, [resetState])
|
|
|
|
return (
|
|
<div>
|
|
<Sidebar>
|
|
<SidebarHeader className="mb-12">
|
|
<div className="max-w-[80%] mt-4 ml-4">
|
|
<Image src={mainLogo} alt="main-logo" />
|
|
</div>
|
|
</SidebarHeader>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem className="px-2">
|
|
<SidebarMenuButton>
|
|
<Link href="/" className="flex items-center gap-2 w-full text-white/60">
|
|
<LayoutDashboard size={14}/>
|
|
<span className="text-lg font-light">Dashboard</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
{vm.getData().map((item, idx) => (
|
|
<Collapsible defaultOpen className="group/collapsible" key={item.getParentName() + idx}>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel asChild onClick={() => onClickMenu("")}>
|
|
<CollapsibleTrigger className="flex items-center gap-1 text-white">
|
|
<DollarSign size={16} />
|
|
<span className="text-lg font-light">
|
|
{item.getParentName() === "S" ? "Subscribe" : item.getParentName()}
|
|
</span>
|
|
<ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
|
|
</CollapsibleTrigger>
|
|
</SidebarGroupLabel>
|
|
</SidebarGroup>
|
|
<CollapsibleContent className="px-6">
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{item.getPricePlanTypeDto().map((item) => (
|
|
<SidebarMenuItem key={item.id}>
|
|
<SidebarMenuButton asChild onClick={() => onClickMenu(item.id)}>
|
|
<span className={`text-base hover:text-black-80 ${item.id == pricePlanStore.getType() ? "text-white" : "text-white/70"}`}>
|
|
-
|
|
<span>{item.pricePlanTypeName}</span>
|
|
</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
))}
|
|
</Sidebar>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const PricePlanSidebar = () => {
|
|
return (
|
|
<QueryWrapper>
|
|
<Content />
|
|
</QueryWrapper>
|
|
)
|
|
}
|
|
|
|
export default PricePlanSidebar |