shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 04:27:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: fix appshell section tabs styling

Browse Source
This commit is contained in:
dswbx
2025-09-05 17:24:47 +02:00
parent 1a7670f57a
commit 732cd31e1f
1 changed files with 23 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/src/ui/layouts/AppShell/AppShell.tsx
View File

@@ -339,10 +339,10 @@ export const SectionHeaderLink = <E extends React.ElementType = "a">({
<Tag <Tag
{...props} {...props}
className={twMerge( className={twMerge(
"flex flex-row items-center justify-center gap-2.5 px-5 h-12 leading-none font-medium text-primary/80 rounded-tr-lg rounded-tl-lg cursor-pointer z-2", "hover:bg-primary/5 flex flex-row items-center justify-center gap-2.5 px-5 h-12 leading-none font-medium text-primary/80 rounded-tr-lg rounded-tl-lg cursor-pointer border border-transparent border-b-0",
active active
? "bg-primary/3 text-primary border border-muted border-b-0" ? "bg-background hover:bg-background text-primary border-muted border-b-0"
: "link hover:bg-primary/2", : "link opacity-80",
badge && "pr-4", badge && "pr-4",
className, className,
)} )}
@@ -365,20 +365,27 @@ export type SectionHeaderTabsProps = {
}; };
export const SectionHeaderTabs = ({ title, items }: SectionHeaderTabsProps) => { export const SectionHeaderTabs = ({ title, items }: SectionHeaderTabsProps) => {
return ( return (
<SectionHeader className="mt-10 border-t border-t-muted pl-3 pb-0 items-end overflow-x-scroll app-scrollbar relative after:inset-0 after:z-1"> <div className="relative">
<div className="flex flex-row items-center gap-6 relative"> <div className="absolute left-0 right-0 bottom-0 z-0 h-px bg-muted" />
<div className="overflow-x-scroll app-scrollbar mt-10 border-t border-t-muted">
<SectionHeader className="pl-3 pb-0 items-end ">
<div className="flex flex-row items-center gap-6 -mb-px">
{title && ( {title && (
<SectionHeaderTitle className="pl-2 hidden md:block">{title}</SectionHeaderTitle> <SectionHeaderTitle className="pl-2 hidden md:block">
{title}
</SectionHeaderTitle>
)} )}
<div className="flex flex-row items-center gap-3"> <div className="flex flex-row items-center gap-3 pr-3">
{items?.map(({ label, ...item }, key) => ( {items?.map(({ label, ...item }, key) => (
<SectionHeaderLink key={key} {...item}> <SectionHeaderLink key={key} {...item} className="relative z-2">
{label} {label}
</SectionHeaderLink> </SectionHeaderLink>
))} ))}
</div> </div>
</div> </div>
</SectionHeader> </SectionHeader>
</div>
</div>
); );
}; };