midsuit
/
julong-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: update SidebarBetter and ButtonLink components for improved responsiveness and styling consistency

This commit is contained in:
faisolavolut 2025-03-18 13:49:11 +07:00
parent 37693e3ea1
commit 2482b5f901
2 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/partials/SidebarBetter.tsx
View File

@ -460,7 +460,7 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
<div className="flex flex-col flex-grow bg-white relative rounded-b-2xl"> <div className="flex flex-col flex-grow bg-white relative rounded-b-2xl">
<div <div
className={cx( className={cx(
"bg-linear-sidebar-active text-white p-1 absolute top-0 right-[-13px] cursor-pointer rounded-lg shadow-md", "bg-linear-sidebar-active text-white p-1 hidden md:absolute top-0 right-[-13px] cursor-pointer rounded-lg shadow-md",
css` css`
z-index: 1; z-index: 1;
` `
@ -476,7 +476,7 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
<Sidebar <Sidebar
aria-label="Sidebar with multi-level dropdown example" aria-label="Sidebar with multi-level dropdown example"
className={classNames( className={classNames(
"relative pt-0 rounded-none", "relative pt-0 rounded-none md:w-64 w-full",
mini ? "w-20" : "", mini ? "w-20" : "",
css` css`
> div { > div {
@ -496,7 +496,7 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
<Sidebar.Items> <Sidebar.Items>
<Sidebar.ItemGroup <Sidebar.ItemGroup
className={cx( className={cx(
"border-none mt-0 pt-4", "border-none mt-0 pt-0 md:pt-4",
mini ? "flex flex-col gap-y-2" : "" mini ? "flex flex-col gap-y-2" : ""
)} )}
> >
@ -515,7 +515,7 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
mini ? "justify-center" : "px-4" mini ? "justify-center" : "px-4"
)} )}
> >
<div className="flex flex-row justify-center flex-grow hidden"> <div className="hidden md:flex flex-row justify-center flex-grow">
<Popover <Popover
classNameTrigger={cx("flex flex-row justify-center flex-grow")} classNameTrigger={cx("flex flex-row justify-center flex-grow")}
popoverClassName={cx( popoverClassName={cx(

34
components/ui/button-link.tsx
View File

@ -10,21 +10,30 @@ const btn = cva(
"px-4 py-2 group relative flex items-stretch justify-center p-0.5 text-center font-medium transition-[color,background-color,border-color,text-decoration-color,fill,stroke,box-shadow] focus:z-10 focus:outline-none border border-transparent text-white focus:ring-4 focus:ring-cyan-300 enabled:hover:bg-cyan-800 dark:bg-cyan-600 dark:focus:ring-cyan-800 dark:enabled:hover:bg-cyan-700 rounded-lg" "px-4 py-2 group relative flex items-stretch justify-center p-0.5 text-center font-medium transition-[color,background-color,border-color,text-decoration-color,fill,stroke,box-shadow] focus:z-10 focus:outline-none border border-transparent text-white focus:ring-4 focus:ring-cyan-300 enabled:hover:bg-cyan-800 dark:bg-cyan-600 dark:focus:ring-cyan-800 dark:enabled:hover:bg-cyan-700 rounded-lg"
); );
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", " inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
{ {
variants: { variants: {
variant: { variant: {
default: "bg-primary text-white shadow hover:bg-primary/90", default:
"bg-primary text-white shadow hover:bg-primary/90 [&_svg]:size-4 ",
destructive: destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 [&_svg]:size-4 ",
outline: outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground [&_svg]:size-4 ",
secondary: secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 [&_svg]:size-4 ",
ghost: "hover:bg-accent hover:text-accent-foreground", ghost: "hover:bg-accent hover:text-accent-foreground [&_svg]:size-4 ",
link: "text-primary underline-offset-4 hover:underline", link: "text-primary underline-offset-4 hover:underline [&_svg]:size-4 ",
noline: noline:
"text-black border-none border-input bg-background hover:bg-accent hover:text-accent-foreground", "text-black border-none border-input bg-background hover:bg-accent hover:text-accent-foreground p-0 [&_svg]:size-4 ",
clean: cx(
"text-black border-none border-input bg-transparent ",
css`
padding: 0px;
height: auto;
width: auto;
`
),
}, },
size: { size: {
default: "h-9 px-4 py-2", default: "h-9 px-4 py-2",
@ -62,12 +71,17 @@ const ButtonLink: FC<any> = ({
className, className,
children, children,
target, target,
onClick,
href, href,
variant = "default", variant = "default",
}) => { }) => {
return ( return (
<Link href={href} target={target}> <Link href={href} target={target} className="flex flex-row items-center">
<ButtonBetter className={cx(className)} variant={variant}> <ButtonBetter
className={cx(className)}
variant={variant}
onClick={onClick}
>
{children} {children}
</ButtonBetter> </ButtonBetter>
</Link> </Link>