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

fix: enhance SidebarBetter and TableList components for improved layout and responsiveness

This commit is contained in:
faisolavolut 2025-03-18 14:55:44 +07:00
parent 2482b5f901
commit b7cc6832dd
3 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/form/field/TypeRichText.tsx
View File

@ -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"));
}}

14
components/partials/SidebarBetter.tsx
View File

@ -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;

11
components/tablelist/TableList.tsx
View File

@ -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"