tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
60 lines (59 loc) • 3.08 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { useTheme } from "../../theme/ThemeProvider";
const SideBar = ({ items, activeKey, onSelect, styles = {}, className = "", header, footer, }) => {
const theme = useTheme();
const [isActive, setIsActive] = useState(null);
const sidebarStyles = {
width: 220,
minWidth: 140,
background: theme.backgroundColor,
borderRight: `1px solid ${theme.borderColor}`,
display: "flex",
flexDirection: "column",
height: "100vh",
...styles,
};
const buttonBase = {
width: "100%",
color: theme.textColor,
border: "none",
textAlign: "left",
padding: theme.padding || "12px 20px",
fontFamily: theme.fontFamily,
fontSize: theme.fontSize,
cursor: "pointer",
outline: "none",
display: "flex",
alignItems: "center",
gap: 10,
background: "transparent",
borderLeft: "4px solid transparent",
fontWeight: 500,
transition: theme.transitionDuration ||
"background 0.2s, border 0.2s, box-shadow 0.2s",
boxShadow: "none",
};
return (_jsxs("aside", { style: sidebarStyles, className: className, children: [header && _jsx("div", { style: { padding: 16 }, children: header }), _jsx("nav", { style: { flex: 1, overflowY: "auto" }, children: items.map((item) => {
const isItemActive = activeKey === item.key;
const isPressed = isActive === item.key;
return (_jsxs("button", { onClick: () => onSelect(item.key), onMouseDown: () => setIsActive(item.key), onMouseUp: () => setIsActive(null), style: {
...buttonBase,
background: isItemActive
? theme.primaryColor
: buttonBase.background,
color: theme.textColor,
borderLeft: isItemActive
? `4px solid ${theme.secondaryColor}`
: buttonBase.borderLeft,
fontWeight: isItemActive ? 700 : 500,
boxShadow: isPressed
? `${theme.shadowInset ? "inset " : ""}${theme.shadowOffsetX} ${theme.shadowOffsetY} ${theme.shadowBlur} ${theme.shadowSpread} ${theme.shadowColor}`
: isItemActive
? `${theme.shadowInset ? "inset " : ""}${theme.shadowOffsetX} ${theme.shadowOffsetY} ${theme.shadowBlur} ${theme.shadowSpread} ${theme.secondaryColor}`
: buttonBase.boxShadow,
}, children: [item.icon && _jsx("span", { style: { marginRight: 8 }, children: item.icon }), item.label] }, item.key));
}) }), footer && _jsx("div", { style: { padding: 16 }, children: footer })] }));
};
export default SideBar;