<div className="md:self-start sticky top-16 bg-background px-4 mt-1 sm:px-6 md:pt-4 lg:pl-8 lg:pr-4">
<ScrollArea className="whitespace-nowrap">
<div className="w-max flex md:flex-col gap-1 bg-transparent text-muted-foreground pb-2">
{menuData.map((section) => (
<Button
key={section.title}
onClick={() => handleScrollToSection(section.title)}
variant="ghost"
size="sm"
className={cn(
'w-auto md:w-full hover:cursor-pointer relative md:justify-end',
activeSection === section.title
? cn(
'text-foreground after:absolute after:bottom-[-2px] after:bottom-0 after:w-full after:h-[2px] after:bg-primary',
'md:after:right-[-2px] md:after:top-0 md:after:h-full md:after:w-[2px]',
)
: '',
)}
>
{section.title}
</Button>
))}
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
</div>