From b7cc6832dd34219110e163348191765244640cec Mon Sep 17 00:00:00 2001
From: faisolavolut <faisol@avolut.com>
Date: Tue, 18 Mar 2025 14:55:44 +0700
Subject: [PATCH] fix: enhance SidebarBetter and TableList components for
 improved layout and responsiveness

---
 components/form/field/TypeRichText.tsx |  2 +-
 components/partials/SidebarBetter.tsx  | 14 +++++++++++---
 components/tablelist/TableList.tsx     | 11 ++++-------
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/components/form/field/TypeRichText.tsx b/components/form/field/TypeRichText.tsx
index 2fc6635..c0aa767 100644
--- a/components/form/field/TypeRichText.tsx
+++ b/components/form/field/TypeRichText.tsx
@@ -459,7 +459,7 @@ export const TypeRichText: React.FC<any> = ({
                     <Input
                       id="maxWidth"
                       value={url || ""}
-                      className="col-span-2 h-9"
+                      className="md:col-span-2 h-9"
                       onChange={(e) => {
                         setUrl(get(e, "currentTarget.value"));
                       }}
diff --git a/components/partials/SidebarBetter.tsx b/components/partials/SidebarBetter.tsx
index abe36ee..ebb7962 100644
--- a/components/partials/SidebarBetter.tsx
+++ b/components/partials/SidebarBetter.tsx
@@ -36,6 +36,7 @@ interface TreeMenuItem {
 interface TreeMenuProps {
   data: TreeMenuItem[];
   minimaze: () => void;
+  onClick?: () => void;
   mini: boolean;
 }
 
@@ -43,6 +44,7 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
   data,
   minimaze,
   mini,
+  onClick,
 }) => {
   const [currentPage, setCurrentPage] = useState("");
   const [notification, setNotification] = useState(false as boolean);
@@ -325,6 +327,9 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
                               href={item.href}
                               onClick={() => {
                                 if (item?.href) setCurrentPage(item.href);
+                                if (typeof onClick === "function") {
+                                  onClick();
+                                }
                               }}
                               className={classNames(
                                 "transition-all  font-bold relative flex-row flex items-center cursor-pointer items-center   text-base flex flex-row  ",
@@ -393,6 +398,9 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
                       href={item.href}
                       onClick={() => {
                         if (item?.href) setCurrentPage(item.href);
+                        if (typeof onClick === "function") {
+                          onClick();
+                        }
                       }}
                       className={classNames(
                         "transition-all  font-bold relative flex-row flex items-center cursor-pointer items-center   text-base flex flex-row  ",
@@ -460,7 +468,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 hidden md:absolute top-0 right-[-13px] cursor-pointer rounded-lg shadow-md",
+          "hidden md:flex bg-linear-sidebar-active text-white p-1  md:absolute top-0 right-[-13px] cursor-pointer rounded-lg shadow-md",
           css`
             z-index: 1;
           `
@@ -476,8 +484,8 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
         <Sidebar
           aria-label="Sidebar with multi-level dropdown example"
           className={classNames(
-            "relative pt-0 rounded-none md:w-64 w-full",
-            mini ? "w-20" : "",
+            "relative pt-0 rounded-none  w-full",
+            mini ? "w-20" : "md:w-64",
             css`
               > div {
                 border-radius: 0px;
diff --git a/components/tablelist/TableList.tsx b/components/tablelist/TableList.tsx
index 127beae..2091565 100644
--- a/components/tablelist/TableList.tsx
+++ b/components/tablelist/TableList.tsx
@@ -11,7 +11,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import React, { useEffect, useState } from "react";
-import { Button, Label, Table } from "flowbite-react";
+import { Button, Table } from "flowbite-react";
 import { HiChevronLeft, HiChevronRight, HiPlus } from "react-icons/hi";
 import { useLocal } from "@/lib/utils/use-local";
 import { FaSort, FaSortDown, FaSortUp } from "react-icons/fa6";
@@ -573,7 +573,7 @@ export const TableList = <T extends object>({
     <>
       <div className="tbl-wrapper flex flex-grow flex-col">
         {!disabledHeader ? (
-          <div className="head-tbl-list block items-start justify-between   px-4 py-4 sm:flex">
+          <div className="head-tbl-list block items-start justify-between  flex-col gap-y-2 md:flex-row px-4 py-4 sm:flex">
             <div className="flex flex-row items-end">
               <div className="sm:flex flex flex-col space-y-2">
                 <div className="flex">
@@ -595,17 +595,14 @@ export const TableList = <T extends object>({
               </div>
             </div>
 
-            <div className="ml-auto flex items-center flex-row gap-x-1">
-              <div className="tbl-search hidden items-center sm:mb-0 sm:flex sm:divide-x sm:divide-gray-100">
+            <div className="pt-2 md:pt-0 ml-auto flex items-center flex-row gap-x-1">
+              <div className="tbl-search  items-center sm:mb-0 sm:flex sm:divide-x sm:divide-gray-100 flex-grow md:flex-grow-0">
                 <div
                   onSubmit={async (e) => {
                     e.preventDefault();
                     await local.reload();
                   }}
                 >
-                  <Label htmlFor="users-search" className="sr-only">
-                    Search
-                  </Label>
                   <div className="relative  lg:w-56">
                     <InputSearch
                       id="users-search"