seti-ramesesv1/dist/templates/SidebarTemplate.js

Reusable components and context for Next.js apps

import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import '../styles/ActionBar.module.css.js';
import '../styles/CompassEditor.module.css.js';
import ContentPanel from '../components/common/ContentPanel.js';
import '../components/common/Datalist/Datalist.js';
import '../styles/Text.module.css.js';
import '../components/common/IconButton.js';
import '../components/common/RadioGroup.js';
import Sidebar from '../components/common/Sidebar.js';
import '../styles/TabList.module.css.js';
import styles from '../styles/SidebarTemplate.module.css.js';
import PanelRightClose from '../node_modules/lucide-react/dist/esm/icons/panel-right-close.js';

const SidebarLayout = ({ title, items, activeItem, target, showSidebar = false, showToggle = false, openItem, defaultOpenFirstDropdown = false, }) => {
    const [open, setOpen] = useState(true);
    useEffect(() => {
        const handleResize = () => {
            // collapse if screen is < 768px
            setOpen(window.innerWidth >= 768);
        };
        // run once on mount
        handleResize();
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
    }, []);
    return (jsx("div", { className: styles.layout, children: jsxs("div", { className: styles.inner, children: [showSidebar && (jsx(Sidebar, { items: items || [], onClick: openItem, activeItem: activeItem, showToggle: !showToggle, openSidebar: open, onToggle: setOpen, defaultOpenFirstDropdown: defaultOpenFirstDropdown })), jsxs("div", { className: styles.main, children: [showSidebar && !open && (jsx("div", { className: styles.closeBtnWrapper, children: jsx(PanelRightClose, { color: "#6b7280", onClick: () => setOpen(true), className: styles.closeIcon, size: 20 }) })), jsx(ContentPanel, { id: target })] })] }) }));
};

export { SidebarLayout as default };
//# sourceMappingURL=SidebarTemplate.js.map