From 2482b5f9013b37eef3247448e24e92374da10259 Mon Sep 17 00:00:00 2001
From: faisolavolut <faisol@avolut.com>
Date: Tue, 18 Mar 2025 13:49:11 +0700
Subject: [PATCH] fix: update SidebarBetter and ButtonLink components for
 improved responsiveness and styling consistency

---
 components/partials/SidebarBetter.tsx |  8 +++----
 components/ui/button-link.tsx         | 34 +++++++++++++++++++--------
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/components/partials/SidebarBetter.tsx b/components/partials/SidebarBetter.tsx
index 857a0ce..abe36ee 100644
--- a/components/partials/SidebarBetter.tsx
+++ b/components/partials/SidebarBetter.tsx
@@ -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(
diff --git a/components/ui/button-link.tsx b/components/ui/button-link.tsx
index 8db1062..be02245 100644
--- a/components/ui/button-link.tsx
+++ b/components/ui/button-link.tsx
@@ -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>