37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
|
|
const SkeletonLine = ({ height = 50, width = "100%", className = "" }) => (
|
|
<div
|
|
className={`skeleton mb-2 ${className}`}
|
|
style={{
|
|
height,
|
|
width,
|
|
}}
|
|
></div>
|
|
);
|
|
export const MenuItemSkeleton = ({ hasSubmenu = false, submenuCount = 3 }) => {
|
|
return (
|
|
<li className="menu-item">
|
|
<div className="menu-link d-flex align-items-center gap-2 ">
|
|
{/* icon placeholder */}
|
|
<SkeletonLine height={25} width="25px" className="rounded" />
|
|
{/* text placeholder */}
|
|
<SkeletonLine height={25} width="100%" />
|
|
</div>
|
|
|
|
{/* Submenu skeletons */}
|
|
{hasSubmenu && (
|
|
<ul className="menu-sub mt-1 ms-4">
|
|
{[...Array(submenuCount)].map((_, idx) => (
|
|
<li key={idx} className="menu-item">
|
|
<div className="menu-link d-flex align-items-center gap-2">
|
|
<SkeletonLine height={20} width="20px" className="rounded" />
|
|
<SkeletonLine height={24} width="100px" />
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</li>
|
|
);
|
|
};
|