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 <Input
id="maxWidth" id="maxWidth"
value={url || ""} value={url || ""}
className="col-span-2 h-9" className="md:col-span-2 h-9"
onChange={(e) => { onChange={(e) => {
setUrl(get(e, "currentTarget.value")); setUrl(get(e, "currentTarget.value"));
}} }}

14
components/partials/SidebarBetter.tsx
View File

@ -36,6 +36,7 @@ interface TreeMenuItem {
interface TreeMenuProps { interface TreeMenuProps {
data: TreeMenuItem[]; data: TreeMenuItem[];
minimaze: () => void; minimaze: () => void;
onClick?: () => void;
mini: boolean; mini: boolean;
} }
@ -43,6 +44,7 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
data, data,
minimaze, minimaze,
mini, mini,
onClick,
}) => { }) => {
const [currentPage, setCurrentPage] = useState(""); const [currentPage, setCurrentPage] = useState("");
const [notification, setNotification] = useState(false as boolean); const [notification, setNotification] = useState(false as boolean);
@ -325,6 +327,9 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
href={item.href} href={item.href}
onClick={() => { onClick={() => {
if (item?.href) setCurrentPage(item.href); if (item?.href) setCurrentPage(item.href);
if (typeof onClick === "function") {
onClick();
}
}} }}
className={classNames( className={classNames(
"transition-all font-bold relative flex-row flex items-center cursor-pointer items-center text-base flex flex-row ", "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} href={item.href}
onClick={() => { onClick={() => {
if (item?.href) setCurrentPage(item.href); if (item?.href) setCurrentPage(item.href);
if (typeof onClick === "function") {
onClick();
}
}} }}
className={classNames( className={classNames(
"transition-all font-bold relative flex-row flex items-center cursor-pointer items-center text-base flex flex-row ", "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="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 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` css`
z-index: 1; z-index: 1;
` `
@ -476,8 +484,8 @@ 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 md:w-64 w-full", "relative pt-0 rounded-none w-full",
mini ? "w-20" : "", mini ? "w-20" : "md:w-64",
css` css`
> div { > div {
border-radius: 0px; border-radius: 0px;

11
components/tablelist/TableList.tsx
View File

@ -11,7 +11,7 @@ import {
useReactTable, useReactTable,
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import React, { useEffect, useState } from "react"; 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 { HiChevronLeft, HiChevronRight, HiPlus } from "react-icons/hi";
import { useLocal } from "@/lib/utils/use-local"; import { useLocal } from "@/lib/utils/use-local";
import { FaSort, FaSortDown, FaSortUp } from "react-icons/fa6"; 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"> <div className="tbl-wrapper flex flex-grow flex-col">
{!disabledHeader ? ( {!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="flex flex-row items-end">
<div className="sm:flex flex flex-col space-y-2"> <div className="sm:flex flex flex-col space-y-2">
<div className="flex"> <div className="flex">
@ -595,17 +595,14 @@ export const TableList = <T extends object>({
</div> </div>
</div> </div>
<div className="ml-auto flex items-center flex-row gap-x-1"> <div className="pt-2 md:pt-0 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="tbl-search items-center sm:mb-0 sm:flex sm:divide-x sm:divide-gray-100 flex-grow md:flex-grow-0">
<div <div
onSubmit={async (e) => { onSubmit={async (e) => {
e.preventDefault(); e.preventDefault();
await local.reload(); await local.reload();
}} }}
> >
<Label htmlFor="users-search" className="sr-only">
Search
</Label>
<div className="relative lg:w-56"> <div className="relative lg:w-56">
<InputSearch <InputSearch
id="users-search" id="users-search"