shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-15 20:17:22 +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

39
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" />
{title && ( <div className="overflow-x-scroll app-scrollbar mt-10 border-t border-t-muted">
<SectionHeaderTitle className="pl-2 hidden md:block">{title}</SectionHeaderTitle> <SectionHeader className="pl-3 pb-0 items-end ">
)} <div className="flex flex-row items-center gap-6 -mb-px">
<div className="flex flex-row items-center gap-3"> {title && (
{items?.map(({ label, ...item }, key) => ( <SectionHeaderTitle className="pl-2 hidden md:block">
<SectionHeaderLink key={key} {...item}> {title}
{label} </SectionHeaderTitle>
</SectionHeaderLink> )}
))} <div className="flex flex-row items-center gap-3 pr-3">
</div> {items?.map(({ label, ...item }, key) => (
<SectionHeaderLink key={key} {...item} className="relative z-2">
{label}
</SectionHeaderLink>
))}
</div>
</div>
</SectionHeader>
</div> </div>
</SectionHeader> </div>
); );
}; };