Help implementing UI for accordion

[sakgoyal]

I want to create a discord style sidebar in financial tracker app.

I am having trouble getting it all set up. to look like the discord UI. Ideally I use accordion instead of collapsible.

I am mainly having issues getting the hover / active / spacing right.

the hover tints and font weights are being really tricky to deal with.

Recording.2026-03-10.003209.mp4

Recording.2026-03-10.003314.mp4

Details

import { Ghost, Plus, Settings } from 'lucide-react';
import { Wallet, Landmark, Building, Car, Bitcoin, CreditCard, Receipt, FileText } from 'lucide-react';
import * as React from 'react';
import { NavLink } from 'react-router-dom';

import { NavUser } from '@/components/NavUser';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSubButton, SidebarMenuSubItem } from '@/components/ui/sidebar';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { cn, currency } from '@/lib/utils';
import Data from '@/src/data';

import { Avatar, AvatarFallback } from './ui/avatar';
import { Button } from './ui/button';

type Accounts = (typeof Data.accounts)[keyof typeof Data.accounts];

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
	return (
		<Sidebar collapsible="icon" className="overflow-hidden *:data-[sidebar=sidebar]:flex-row" {...props}>
			<FirstSidebar />
			<SecondSidebar />
		</Sidebar>
	);
}

export function TopTabs() {
	// TODO: Filter accounts shown based on these tabs
	return (
		<Tabs defaultValue="all" className="w-full">
			<TabsList className="w-full h-11 p-1 bg-gray-200/80">
				<TabsTrigger value="all" className="flex-1  data-[state=active]:bg-gray-50 data-[state=active]:shadow-sm">
					All
				</TabsTrigger>
				<TabsTrigger value="assets" className="flex-1 data-[state=active]:bg-gray-50 data-[state=active]:shadow-sm">
					Assets
				</TabsTrigger>
				<TabsTrigger value="debts" className="flex-1 data-[state=active]:bg-gray-50 data-[state=active]:shadow-sm">
					Debts
				</TabsTrigger>
			</TabsList>
		</Tabs>
	);
}
function FirstSidebar() {
	return (
		<Sidebar
			collapsible="none"
			className="w-[calc(var(--sidebar-width-icon)+1px)]! border-r">
			<SidebarContent>
				<SidebarGroup className="flex flex-col items-center">
					{Data.nav.map((item) => (
						<SidebarMenuItem key={item.title}>
							<SidebarMenuButton tooltip={{ children: item.title, hidden: false }}>
								<NavLink to={item.path} className={({ isActive }) => cn('flex items-center justify-center rounded-lg p-2 h-10 w-10', isActive ? 'bg-primary/10 text-primary shadow-sm dark:bg-primary/20' : 'text-muted-foreground hover:bg-muted hover:text-foreground')}>
									<item.icon className="h-5 w-5" />
								</NavLink>
							</SidebarMenuButton>
						</SidebarMenuItem>
					))}
				</SidebarGroup>
			</SidebarContent>
			<SidebarFooter className="flex flex-col items-center gap-2 pb-4">
				<Button variant="ghost" className="h-10 w-10">
					<Ghost className="h-9 w-9 text-muted-foreground" />
				</Button>
				<NavLink to={'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/settings'} className={({ isActive }) => cn('flex items-center justify-center rounded-lg p-2 h-10 w-10', isActive ? 'bg-primary/10 text-primary shadow-sm dark:bg-primary/20' : 'text-muted-foreground hover:bg-muted hover:text-foreground')}>
					<Settings className="h-5 w-5" />
				</NavLink>
				<NavUser user={Data.user} />
			</SidebarFooter>
		</Sidebar>
	);
}

function SecondSidebar() {
	return (
		<Sidebar collapsible="none" className="hidden flex-1 md:flex">
			<SidebarHeader className="flex flex-row p-4 w-full font-medium justify-between">
				Accounts
				<Button variant="ghost">
					<Plus className="w-4 h-4" />
				</Button>
			</SidebarHeader>
			<SidebarContent>
				<SidebarGroup>
					<SidebarGroupContent>
						<TopTabs />
					</SidebarGroupContent>
				</SidebarGroup>
				<SidebarGroup>
					<SidebarMenu>
						<AccountList />
					</SidebarMenu>
				</SidebarGroup>
			</SidebarContent>
		</Sidebar>
	);
}

function AccountList() {
	return (
		<Accordion type="multiple" className="w-full border-none shadow-none rounded-none">
			{Object.entries(Data.accounts).map(([category, accounts]) => (
				<AccordionItem key={category} value={category} className="border-none">
					<CategoryHeader category={category} accounts={accounts} />

					<AccordionContent>
						{accounts.map((account) => (
							<AccountItem key={account.id} account={account} />
						))}
					</AccordionContent>
				</AccordionItem>
			))}
		</Accordion>
	);
}

function CategoryHeader({ category, accounts }: { category: string; accounts: Accounts }) {
	const IconMap = {
		Cash: Wallet,
		Investments: Landmark,
		Crypto: Bitcoin,
		Property: Building,
		Vehicle: Car,
		'Credit Card': CreditCard,
		Loan: Receipt,
		'Other Liability': FileText,
		'Other Asset': FileText,
	};
	const Icon = IconMap[category as keyof typeof IconMap] || FileText;
	return (
		<AccordionTrigger className="transition-none w-full hover:text-zinc-800 font-normal hover:font-bold rounded-md hover:no-underline group-data-[state=open]:font-bold group-data-[state=open]:text-zinc-800">
			<div className="flex w-full justify-between items-center ms-2">
				<div className="flex items-center gap-2">
					<Icon size="1em" />
					<span>{category}</span>
				</div>
				{/* <div className="text-end">
					<div className="text-sm text-muted-foreground font-medium">{currency(accounts.reduce((acc, account) => acc + account.balance, 0))}</div>
				</div> */}
			</div>
		</AccordionTrigger>
	);
}

function AccountItem({ account }: { account: Accounts[number] }) {
	// get the first two letters of the account name for the avatar fallback
	const avatarFallback = account.name
		.split(' ')
		.map((word) => word[0])
		.join('')
		.slice(0, 2);
	return (
		<SidebarMenuSubItem key={account.id}>
			<SidebarMenuSubButton asChild className="hover:bg-zinc-200 ">
				<div className="justify-between text-xl">
					<span className="flex flex-row items-center place-items-center gap-2 font-medium">
						<Avatar size="sm">
							<AvatarFallback>{avatarFallback}</AvatarFallback>
						</Avatar>
						{account.name}
					</span>
					<div className="font-medium">{currency(account.balance)}</div>
				</div>
			</SidebarMenuSubButton>
		</SidebarMenuSubItem>
	);
}

[aniruddhaadak80]

@sakgoyal Implementation details for "hover/active/spacing" in a Discord-like sidebar rely heavily on the group and group-hover utilities.

1. Parent item: group flex items-center gap-2 p-2 hover:bg-zinc-800 ...
2. Icon/Text: text-zinc-400 group-hover:text-white transition-colors.

For the accordion-style vs collapsible: passing variant="ghost" to the trigger often removes the background/border bulk.
The Discord "pill" indicator is usually absolute positioned:
<div className="absolute left-0 w-1 h-8 rounded-r bg-white opacity-0 group-hover:opacity-100 transition-all origin-left scale-y-0 group-hover:scale-y-100" />