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={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`
z-index: 1;
`
@ -476,7 +476,7 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
<Sidebar
aria-label="Sidebar with multi-level dropdown example"
className={classNames(
"relative pt-0 rounded-none",
"relative pt-0 rounded-none md:w-64 w-full",
mini ? "w-20" : "",
css`
> div {
@ -496,7 +496,7 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
<Sidebar.Items>
<Sidebar.ItemGroup
className={cx(
"border-none mt-0 pt-4",
"border-none mt-0 pt-0 md:pt-4",
mini ? "flex flex-col gap-y-2" : ""
)}
>
@ -515,7 +515,7 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
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
classNameTrigger={cx("flex flex-row justify-center flex-grow")}
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"
);
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: {
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:
"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:
"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:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 [&_svg]:size-4 ",
ghost: "hover:bg-accent hover:text-accent-foreground [&_svg]:size-4 ",
link: "text-primary underline-offset-4 hover:underline [&_svg]:size-4 ",
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: {
default: "h-9 px-4 py-2",
@ -62,12 +71,17 @@ const ButtonLink: FC<any> = ({
className,
children,
target,
onClick,
href,
variant = "default",
}) => {
return (
<Link href={href} target={target}>
<ButtonBetter className={cx(className)} variant={variant}>
<Link href={href} target={target} className="flex flex-row items-center">
<ButtonBetter
className={cx(className)}
variant={variant}
onClick={onClick}
>
{children}
</ButtonBetter>
</Link>