1 files changed, 24 insertions, 7 deletions
diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx
index e8cbd4c..f314c9f 100644
--- a/src/components/app-sidebar.tsx
+++ b/src/components/app-sidebar.tsx
@@ -1,13 +1,12 @@
 "use client"
 
 import * as React from "react"
-import {CircleDollarSign, MessageCircle, SquareStack} from "lucide-react"
+import {CircleDollarSign, SquareStack} from "lucide-react"
 
 import {NavMain} from "@/components/nav-main"
 import {
     Sidebar,
     SidebarContent,
-    SidebarFooter,
     SidebarGroup,
     SidebarGroupContent,
     SidebarGroupLabel,
@@ -17,10 +16,16 @@ import {
     SidebarMenuItem,
     useSidebar,
 } from "@/components/ui/sidebar"
-import {useAppSelector} from "@/hooks.ts";
+import {useAppDispatch, useAppSelector} from "@/hooks.ts";
+import {setPage} from "@/models/appSlice.ts";
+import {Badge} from "@/components/ui/badge.tsx";
+import {useSelector} from "react-redux";
+import {selectCashoutMethods} from "@/models/cashoutMethodSlice.ts";
 
 export function AppSidebar({...props}: React.ComponentProps<typeof Sidebar>) {
     const app = useAppSelector(state => state.app)
+    const dispatch = useAppDispatch()
+    const cashoutMethods = useSelector(selectCashoutMethods)
 
     const {isMobile} = useSidebar()
 
@@ -50,12 +55,24 @@ export function AppSidebar({...props}: React.ComponentProps<typeof Sidebar>) {
                     <SidebarGroupContent>
                         <SidebarMenu>
 
-                            <SidebarMenuItem key="cashout_methods">
+                            <SidebarMenuItem
+                                key="cashout_methods"
+                                className="cursor-pointer"
+                            >
                                 <SidebarMenuButton asChild>
-                                    <a href="#">
+                                    <a
+                                        onClick={() => dispatch(setPage("cashout_methods"))}
+                                    >
                                         <CircleDollarSign/>
-                                        <span>Methods</span>
-                                    </a>
+                                        <span>
+                                Methods <Badge
+                                            className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer"
+                                            variant="outline"
+                                            title={`${cashoutMethods.length.toLocaleString()} cashout methods available`}
+                                        >{cashoutMethods.length.toLocaleString()}</Badge>
+                            </span> </a>
+
+
                                 </SidebarMenuButton>
                             </SidebarMenuItem>