web-humas-fe/components/sidebar/sidebar-menu.tsx

16 lines
839 B
TypeScript
Raw Normal View History

2024-04-19 13:26:27 +00:00
import React from "react";
interface Props {
title?: string;
children?: React.ReactNode;
}
export const SidebarMenu = ({ title, children }: Props) => {
return (
<div className="flex gap-2 flex-col custom-scrollbar sidebar-scrollbar data-[top-scroll=true]:[mask-image:linear-gradient(0deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)] data-[bottom-scroll=true]:[mask-image:linear-gradient(180deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)] data-[top-bottom-scroll=true]:[mask-image:linear-gradient(#000,#000,transparent_0,#000_var(--scroll-shadow-size),#000_calc(100%_-_var(--scroll-shadow-size)),transparent)] overflow-auto max-h-[70vh] mr-[-1rem] pb-5" data-top-scroll="false" data-bottom-scroll="true">
<span className="text-xs font-normal ">{title}</span>
{children}
</div>
);
};